如何在浏览器的调试器中调试动态加载的JavaScript（使用jQuery）？

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

说明：

我需要使用并且已经使用

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

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

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

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

您可以为动态加载的脚本命名，以便在Chrome / Firefox JavaScript调试器中显示。为此，请在脚本末尾添加注释：

//# sourceURL=filename.js

然后，该文件将在“源”选项卡中显示为filename.js。以我的经验，您可以在名称中使用\，但是如果使用/，则会出现奇怪的行为。

有关更多信息，请参见： // @ sourceurl的动态JavaScript 弃用断点

您可以在脚本文件或脚本标签的末尾使用//# sourceURL=和//# sourceMappingURL=。

注意： //@ sourceURL和//@ sourceMappingURL已弃用。

我尝试使用OP建议的“ //＃sourceURL = filename.js”作为一种解决方法，但除非在上一次使用时它已存在于我的选项卡中，否则它仍未在“源”面板中显示给我。它产生了一个例外。

编码一个“调试器”；线迫使它在那个位置断裂。然后，一旦它出现在“源”面板的选项卡中，我就可以像正常情况一样设置断点并删除“调试器”。线。

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

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

当尝试在IE中跟踪此类事件时，我打开开发工具（F12），然后通过在控制台中使用以下行找到断点的放置位置：

debugger;myFunction();

切换到调试器选项卡，您可以在其中进入myFunction()并设置断点。