调试动态添加的javascript文件

Question

我有一个Web应用程序，可以根据用户选择的实时动态添加javascript文件作为选项，以避免刷新屏幕。

我现在正在尝试调试这些动态添加的javascript文件，并尝试过谷歌Chrome的开发者工具和Firebug的Firefox插件，并注意到动态添加的javascript“文件”没有出现，所以我无法选择它们添加断点等。

那么，是否有解决方案，即调试动态添加的javascript文件？

Answer 1

查看sourceURL这是一种向DevTools指示应将eval'd字符串视为真实文件的方法。它完全符合您的要求。

在要被撤消的字符串的末尾，请留下此表单的评论：

//# sourceURL=app/js/myapp.js

从那里开始，Chrome DevTools（和Firebug）会将其视为“真实文件”。

Much more explanation here和HTML5 Rocks有an article和sourceURL demo。

Answer 2

您可以在要设置断点的动态脚本中添加debugger;语句。如果在打开开发工具UI时执行线程到达语句，这将使chrome停止在常规断点上。

您也可以使用它来启动脚本，因此您的脚本会出现在调试器中，然后您可以在此之后手动设置断点。