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

发布于 2025-01-01 02:24:15 字数 385 浏览 5 评论 0原文

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

说明：

我需要使用并已经使用，

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

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

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

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

原文

A dynamically-added script is not showing up in the browser's debugger's scripts section.

Explanation:

I need to use and have used

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

so that myScript.js can be dynamically loaded on meeting some condition...
And myFunction can be called only after getting the whole script loaded...

But browsers are not showing the dynamically loaded myScript.js in their debugger's script section.

Is there another way round so that all of the goals may be achieved which will make one to be able to debug a dynamically-loaded script there in the browser itself?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青衫负雪 2025-01-08 02:24:15

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

//# sourceURL=filename.js

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

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

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

完整的示例如下：

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

有关详细信息，请参阅：
动态 JavaScript 中的断点
 弃用 //@sourceurl

You can give your dynamically loaded script a name so that it shows in the Chrome/Firefox JavaScript debugger. To do this you place a comment at the end of the script:

//# sourceURL=filename.js

This file will then show in the "Sources" tab as filename.js. In my experience you can use 's in the name but I get odd behaviour if using /'s.

Since if a domain it is not specified filename.js will appear in a folder called "(no domain)" it is convenient to specify a domain for improving the debugging experience, as an example to see a "custom" folder it is possible to use:

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

A complete example follows:

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

For more information see:
Breakpoints in Dynamic JavaScript
deprecation of //@sourceurl

回复收藏 0 原文

む无字情书 2025-01-08 02:24:15

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

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

回复收藏 0 原文

冧九 2025-01-08 02:24:15

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

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

回复收藏 0 原文

尘世孤行 2025-01-08 02:24:15

请注意，以这种方式出现在源选项卡中的源文件将出现在（无域）组中，如果您想调试它，则需要添加一个调试器;< /code> 代码中的行，执行该行（通常在源文件执行开始时），然后在任意位置添加断点。

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

回复收藏 0 原文

念﹏祤嫣 2025-01-08 02:24:15

当尝试在 IE 中跟踪此类情况时，我打开开发工具 (F12)，然后使用控制台中的以下行找到放置断点的位置：

debugger;myFunction();

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

When trying to track this sort of thing down in IE, I open the dev tools (F12) and then find where to place the breakpoint by using the following line in the console: