javascript - 设置断点并调试 eval'd JavaScript

Question

我^*正在使用客户端 JS 来解析 XML 文件并生成复杂eval的 JS 代码。（生成由运行时启动的可重用函数。）但是，我需要调试正在生成的代码，并且想使用 Chrome 的内置断点、步进、监视窗口等。

有没有比以下更简单的方法来做到这一点：

• 将生成的 JS 字符串转储到控制台和/或窗口。
• 复制 JavaScript
• （可选）通过类似JSBeautifier的美化器运行 JS 。
• 将 JS 粘贴到通过<script src="...">另一个网页加载的文件中。

^{*实际上，我的一个朋友正在这样做，而不是我}

Answer 1

您可以通过在动态创建的元素上使用数据 urieval将 JS 直接动态加载到生成它的页面中，而不是使用, 而不是手动复制/粘贴到单独的文件中。通过这种方法，Chrome 的开发人员工具（和 Firebug）允许您选择数据 URI 作为脚本，打开 Pretty Print，设置断点，然后就可以离开了。<script>

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);
}