在 Chrome 开发者工具 22 中看不到动态加载的代码答案

【问题标题】：Can't see dynamically loaded code in Chrome Developer Tools 22在 Chrome 开发者工具 22 中看不到动态加载的代码
【发布时间】：2018-05-16 01:56:29
【问题描述】：

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

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

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

debugger;

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

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

谢谢，抢

【问题讨论】：

【解决方案1】：

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

//@ sourceURL=foo.js

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

【讨论】：

幸运的是我遇到了同样的问题。但是，我从 Yahoo CDN 加载这些文件（它们是模块依赖项）。在 Firebug (1.12.0) 中的 Firefox (23.0.1) 中，这些文件在脚本选项卡中可见。在 Chrome (29.0.1547.62 m) 中，它们只能在资源和网络选项卡中访问。我需要在那里设置断点，我不能......
我建议您使用为此目的实现的库来加载它。例如使用 require.js。或者您可以通过类似 require.js 中使用的方法加载它们。
YUI（我正在使用）有它自己的加载模块的方式。它类似于 require.js。最后，您将获得动态创建的
有点陌生。当您在其 net 选项卡中使用诸如 firebug 之类的检查器对其进行检查时，它会如何显示。它是归类为 XHR 还是 JS。 YUI 应该使用
它在 Firefox 中工作，它应该是 JS ......但是它没有出现在 Chrome 的 Sources 选项卡中。当然，我使用的是 HTML5，但这与它无关……它是一个异步加载的脚本标签。没什么特别的。尽管如此，还是感谢您的意见 :) 这可能是一个 YUI 问题（这不足为奇 :P）。不要打扰...

【解决方案2】：

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

//@ sourceURL=foo.js

工作解决方案

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

//# sourceURL=foo.js

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

->本地主机 -- 来源/src

->（无域） -- foo.js

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

debugger;

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

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

希望这会有所帮助。

【讨论】：

这两个选项在 CR-45 和 OSX-Y 中都对我有用 ---> //@ sourceURL=foo.js 和 //# sourceURL=foo.js 具有相同的预期结果。谢谢（也许使用# 会更好。）
帮助很大！将 //# sourceURL=foo.js 放在标记的末尾就可以了！

【解决方案3】：

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

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

Varunkumar Nagarajan

【讨论】：

【解决方案4】：

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

我重新启动服务器并在新标签页中打开我的应用和tada！..

【讨论】：

【解决方案5】：

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

【讨论】：