设置断点和调试eval的JavaScript [英] Set breakpoints and debug eval'd JavaScript

问题描述

我 ^* 使用客户端JS来解析XML文件，并生成复杂的JS代码到 eval 。 （生成运行时启动的可重用的功能）但是，我需要调试正在生成的代码，并希望使用Chrome的内置断点，步进，观察窗口等。

I^* am using client-side JS to parse XML files and generate complex JS code to eval as a result. (Generating re-usable functions that are kicked off by a runtime.) However, I need to debug the code being generated, and would like to use Chrome's built-in breakpoints, stepping, watch windows, etc.

有更简单的方法来做到这一点：

Is there an easier way to do this than:

• 将生成的JS字符串转储到控制台， /或窗口。


• 复制JavaScript


• （可选）通过像 JSBeautifier 。


• 将JS粘贴到通过< script src =...> / code>在另一个网页。



• Dump the generated JS string to the console and/or window.
• Copy the JavaScript
• (optional) Run the JS through a prettifier like JSBeautifier.
• Paste the JS into a file that is loaded via <script src="..."> in another web page.

^{* 其实我的一个朋友在做这个不是我}

推荐答案

而不是使用 eval ，而不是手动复制/粘贴到单独的文件中，您可以通过使用< script> 元素的rel =noreferrer>数据uri 。通过这种方式，Chrome的开发人员工具（和Firebug）允许您选择数据URI作为脚本，打开漂亮打印，设置断点和离开。

Instead of using eval, and instead of manually copy/pasting into a separate file, you can dynamically load the JS directly into the page that generated it by using a data uri on a dynamically-created <script> element. With this approach, Chrome's Developer Tools (and Firebug) allow you to pick the data-URI as a script, turn on the Pretty Print, set breakpoints, and away you go.

var js = createMyJSCodeString();
addCode(js); // Right now! Debuggable!

// Dynamically evaluate JavaScript-as-string in the browser
function addCode(js){
  var e = document.createElement('script');
  e.type = 'text/javascript';
  e.src  = 'data:text/javascript;charset=utf-8,'+escape(js);
  document.body.appendChild(e);
}

这篇关于设置断点和调试eval的JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！