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

Question

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

解释：

我需要使用并且已经使用过

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

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

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

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

score 217 · Accepted Answer

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

//# sourceURL=filename.js

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

由于如果未指定域filename.js将出现在名为“（无域）”的文件夹中，因此可以方便地指定域以改善调试体验，例如查看“自定义”文件夹，可以使用：

//# sourceURL=browsertools://custom/filename.js

一个完整的例子如下：

window.helloWorld = function helloWorld()
{
  console.log('Hello World!');
}
//# sourceURL=browsertools://custom/helloWorld.js

score 16 · Accepted Answer

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

注意： //@ sourceURL并且//@ sourceMappingURL已弃用。

score 15 · Accepted Answer

我尝试使用 OP 建议作为解决方法的“//# sourceURL=filename.js”，但它仍然没有出现在“源”面板中，除非它已经存在于我的选项卡中它产生了一个例外。

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

score 6 · Accepted Answer

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

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

score 0 · Accepted Answer

当试图在 IE 中跟踪这类事情时，我打开开发工具 (F12)，然后通过在控制台中使用以下行来查找放置断点的位置：

debugger;myFunction();

这将切换到调试器选项卡，您可以在其中单步myFunction()执行并设置断点。

5 回答 5