如何在浏览器的调试器本身中调试动态加载的JavaScript(使用jQuery)？

Question

动态添加的脚本未显示在浏览器的调试器脚本部分中.

说明:

我需要使用并使用过

if( someCondition == true ){
   $.getScript("myScirpt.js", function() {
       alert('Load Complete');
       myFunction();
   });
}

这样myScript.js可以在满足某些条件时动态加载...并且只有在加载完整个脚本后才能调用myFunction ...

但是浏览器没有在调试器的脚本部分显示动态加载的myScript.js.

是否有另一种方法可以实现所有目标,这将使人们能够在浏览器本身中调试动态加载的脚本？

Answer 1

您可以为动态加载的脚本指定一个名称,以便在Chrome/Firefox JavaScript调试器中显示.为此,您可以在脚本末尾添加注释:

//# sourceURL=filename.js

然后,此文件将在"源"选项卡中显示为filename.js.根据我的经验,你可以在名字中使用\,但如果使用/的话,我会得到奇怪的行为.

有关更多信息,请参阅: // @ sourceurl的动态JavaScript 弃用中的断点

Answer 2

您可以使用//# sourceURL=,并//# sourceMappingURL=在你的脚本文件或脚本标签的末尾.

注意: //@ sourceURL并且//@ sourceMappingURL已弃用.

Answer 3

我尝试使用OP建议作为解决方法的"//#sourceURL = filename.js",但它仍然没有在Sources面板中显示,除非它在我之前的选项卡中已经存在它产生了一个例外.

编写"调试器"; 线迫使它在那个位置断裂.然后,一旦它出现在Sources面板中的标签中,我可以设置正常的断点并删除"调试器"; 线.

Answer 4

请注意，以这种方式出现在“源”选项卡中的源文件将出现在（无域）组中，并且，如果要调试它，则需要debugger;在代码中添加一行，使该行得以执行（通常在（开始执行源文件），然后在任何需要的地方添加断点。

如果您正在调试生产阶段，则debugger;代码中可能没有行，则可以通过使用CharlesProxy对“插入了debbuger行的源文件的新副本”进行本地映射来实现此目的。