如何在浏览器的调试器中调试通过jQuery动态加载的JavaScript代码？

Question

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

说明：

我需要使用并已经使用了动态添加脚本：

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

为了实现某些条件下动态加载myScript.js，且必须在整个脚本加载完后才能调用myFunction...

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

是否有另一种方法可以达到所有目标，以便能够在浏览器中调试动态加载的脚本？

- TwiToiT

---

可能是Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?的重复问题。 - GorvGoyl

使用debugger;在动态加载的脚本中自动停止，参见https://javascript.info/debugging-chrome。 - yu yang Jian

Answer 1

您可以给动态加载的脚本命名，以便在Chrome/Firefox JavaScript调试器中显示。要做到这一点，您需要在脚本末尾放置一个注释：

//# sourceURL=filename.js

这个文件将会显示在"Sources"选项卡中，名称为filename.js。据我所知，你可以在名称中使用单引号，但如果使用斜杠，则可能会出现奇怪的行为。

由于如果未指定域名，filename.js 将出现在名为 "(no domain)" 的文件夹中，因此为了改善调试体验，指定一个域名是很方便的。例如，要查看一个名为 "custom" 的文件夹，可以使用以下方式：

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

一个完整的例子如下：

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

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

- Mark

---

请注意，虽然在Chrome浏览器中//@仍然有效，但已更改为//#。 在.html文件中的脚本也可以以相同的方式命名。 注意！在“=”符号前后不要留下任何空格。 - Mert Mertce

对我来说，JS文件在一个名为"(无域)"的分组中显示在源列表中。可能值得一提，因为我一开始错过了它！ - JMac

小提示：Chrome 调试器会将这些伪 JavaScript 文件抛到“源”选项卡中的“(no domain)”节点元素中，至少在本地主机上进行调试时是这样。那就是我找到它们的地方。 - Robert Oschler

另一件需要注意的事情是注释样式。你提供的“deprecation of/ /@sourceURL”链接提到了“//# sourceURL=”和“/# sourceURL=”。这是因为这也可以用于CSS，其中必须使用块注释，因为单行“//”注释无效。令我惊讶的是，在JavaScript中不能使用“/ sourceURL=”。它会被忽略掉。 - Jools

据我所知，大多数JavaScript代码压缩工具都会在生产阶段删除这些行，使其对于生产环境的错误诊断毫无用处。 - Lluís Suñol

Answer 2

我尝试使用原帖提出的"# sourceURL=filename.js"，但除非以前已存在并产生了异常，否则在“资源”面板中仍然不会显示。

在代码中添加"debugger;"语句可以强制在该位置中断程序执行。一旦在“资源”面板的选项卡中找到文件，就可以像平常一样设置断点并删除“debugger;”语句。

- kevinpo

---

它也可能出现在“来源”标签页下的“(无域)”列表中。 - Splaktar

我也需要使用 debugger;，并且在脚本加载时必须打开 DevTools。 - Barmar

一些额外的信息：使用browsertools://作为协议，例如 //# sourceURL=browsertools://yourdomaingoeshere.com/action-openuwws.js - dolbysurnd

我使用了//# sourceURL=filename.js，这样js文件就会显示在源代码树中，但我喜欢使用debugger;，因为我可以将它放在任何地方，并且可以在加载应用程序之前将其放置在源代码中。一旦进入应用程序，它就会作为初始断点，然后我可以通过开发工具添加更多断点，监视变量等，与正常情况下一样。 - FreeSoftwareServers

Answer 3

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

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

- xRavisher

---

更多废弃信息请参考：https://developers.google.com/web/updates/2013/06/sourceMappingURL-and-sourceURL-syntax-changed - Pysis

当然可以，但据我所知，大多数压缩工具都会在生产阶段删除这些行。 - Lluís Suñol

@LluísSuñol sourceMappingURL 的整个目的是为了调试已经被压缩（minified）的代码并理解映射（Mapping）。但就个人而言，只在源代码上进行调试，而不是在生产环境中。 - FreeSoftwareServers

Answer 4

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

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

- Lluís Suñol

---

这个救了我！无论我做了什么，直到我放入调试器命令，文件才出现。之后，它在页面重新加载和调试会话中持久存在，即使我删除了调试器命令。 - Mike Devenney

Answer 5

当我在IE中尝试追踪这种问题时，我会打开开发工具（F12），然后在控制台中使用以下代码找到断点的位置：

debugger;myFunction();

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

- Alan Samet