google-chrome-devtools - 在 Chrome 开发者工具 22 中看不到动态加载的代码

Question

当我通过 AJAX 动态加载包含 javascript 的 html 片段时，我无法在 Chrome 22.0.1229.94 的开发人员工具窗口的源选项卡中看到该内容。很明显，我去了这里

此页面显示了一个已过期的示例开发人员工具窗口。页面上有一个加载动态脚本的按钮，当您这样做时，它不会显示在源选项卡中。

作为一种解决方法，我发现添加

debugger;

到脚本并重新加载它会导致它在动态加载的代码中暂停，但不幸的是，所有的行号都是灰色的，你不能在调试器中设置任何断点。

我在这里遗漏了什么还是什么？

谢谢，罗伯

score 29 · Accepted Answer

当您使用动态加载的库或 javascript 代码时，您可以使用该短语

//@ sourceURL=foo.js

在您的 javascript 代码的开头，foo.js是将分配给它的名称。调试器将使用该名称显示它。这在 chrome 中是正确的，我认为在 firebug 中也是如此。在这种情况下，您可以在动态加载的 javascript 代码中放置一个断点。

score 12 · Accepted Answer

不知道这在 chrome 中是否有效（这对我现在肯定不起作用，可能在过去）。

//@ sourceURL=foo.js

工作解决方案

为了让您通过 ajax 动态加载的脚本出现在您的 chrome 源工具中，您需要在脚本文件的开始或结束（我更喜欢）位置添加以下行：

//# sourceURL=foo.js

您的名为 foo.js 的脚本将出现在（无域）下拉列表下的源选项卡的左窗格中

-> 本地主机——源/src

->（无域）-- foo.js

或者，您可以在脚本之间的任何位置添加以下行。

debugger;

在 chrome 中，当调试器面板打开时，您可以使用“debugger;”语句在语句处中断。如果调试器面板关闭，Chrome 将简单地忽略这一点。

这将有助于在调试模式下停止您的脚本，您将在源（调试）面板中看到您的脚本，其名称类似于 VM****。

希望这可以帮助。

score 5 · Accepted Answer

您可以使用 //@ sourceURL。Chrome 似乎不支持内联脚本的 //@ sourceURL。但是，它确实适用于 eval 表达式。本文提供了有关命名 eval 块和命名代码中任何匿名函数的更多详细信息。

您可以尝试嵌入脚本标签或 JSONP，而不是使用 eval。

瓦伦库马尔·纳加拉扬

score 0 · Accepted Answer

对我来说，它发生在 nodejs 项目上。

我重新启动服务器并在新选项卡中打开我的应用程序和tada！..

score -5 · Accepted Answer

或者，要解决此问题，您可以通过单击图标在单独的窗口中打开开发人员工具。现在重新加载您的脚本，它将按预期显示在脚本选项卡中。我知道这不是解决方案，而是解决方法。

5 回答 5