Chrome开发者工具22中无法查看动态加载的代码

Question

当我通过AJAX动态加载包含javascript的html片段时，我无法在Chrome 22.0.1229.94的开发者工具窗口中的源选项卡中看到该内容。值得注意的是，我在这里找到了解决方法：

https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#js_dynamic

该页面显示了一个过时的开发者工具窗口示例。页面上有一个按钮来加载动态脚本，但在加载后并没有在源选项卡中显示。

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

debugger;

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

我是否漏掉了什么或者怎么样呢？

谢谢， Rob

- Rob

---

可能是重复的问题：是否可以像 WebKit、FireBug 或 IE8 开发者工具那样，通过某个调试器来调试动态加载的 JavaScript？ - GorvGoyl

Answer 1

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

//@ sourceURL=foo.js

在你的JavaScript代码开头，foo.js是将被分配的名称。调试器将显示它的名称。 在Chrome中是正确的，我认为在Firebug中也是如此。 在这种情况下，您可以在动态加载的JavaScript代码中设置断点。

- Farshid Saberi

---

不幸的是，我遇到了同样的问题。但是我正在从Yahoo CDN加载这些文件（它们是模块依赖项）。在Firefox（23.0.1）中，在Firebug（1.12.0）中，这些文件在Script选项卡中可见。在Chrome（29.0.1547.62 m）中，它们只能在资源和网络选项卡中访问。我需要在那里设置断点，但我无法... - op1ekun

我建议您使用专门为此目的实现的库来加载它，例如使用require.js。或者您可以通过类似于require.js中使用的方法来加载它们。 - Farshid Saberi

YUI（我正在使用的）有自己的模块加载方式。它类似于require.js。最终，您将得到动态创建的<script>标签，并使用您的模块作为依赖项触发回调。但仍然无法正常工作...甚至Paul Irish也感到惊讶;) https://twitter.com/op1ekun/status/374533588823199744 - op1ekun

有点奇怪。当您使用像Firebug这样的检查器在其网络选项卡中检查它时，它会以何种形式出现？它被归类为XHR还是JS？YUI应该使用<script>标签异步加载它作为JavaScript文件，并使用HTML 5 async脚本标记属性。除非您不使用HTML 5。 - Farshid Saberi

它在Firefox中运行，并且JS也按照预期工作... 但是在Chrome的Sources选项卡中没有出现。当然，我正在使用HTML5，但这与此无关... 它是一个被异步加载的脚本标签。没有什么特别的。尽管如此，感谢您的输入 :) 这可能是YUI的问题（这并不奇怪:P）。不要费心... - op1ekun

Answer 2

可能是重复问题： 是否有像 WebKit、FireBug 或 IE8 开发者工具这样的调试器可以调试动态加载的 JavaScript？

不知道这在 Chrome 中是否有效（对我来说现在肯定无效，也许过去曾经有效）。

//@ sourceURL=foo.js

可行的解决方案

如果想让通过ajax动态加载的脚本出现在Chrome浏览器的源代码工具中，你需要在你的脚本文件的开头或结尾处添加以下行：

//# sourceURL=foo.js

你的名为foo.js的脚本将会出现在源标签页左侧的(no domain)下拉菜单中：

->localhost -- source/src

->(no domain) -- foo.js

或者在脚本中的任意位置添加以下行：

debugger;

在 Chrome 中，您可以使用 "debugger;" 语句来在调试面板打开时中断语句。如果调试面板关闭，Chrome 将简单地忽略此语句。

这将有助于将脚本停止在调试模式下，并且您将在源码（调试）面板中看到以 VM**** 名称命名的脚本。

希望这可以帮助您。

- Sanjay

---

在CR-45和OSX-Y中，这两个选项都对我有效：//@ sourceURL=foo.js 和 //# sourceURL=foo.js，并且产生了相同的预期结果。谢谢（也许最好使用文档中记录的#）。 - gmo

太好了！在</script>标签结束前加入//# sourceURL=foo.js解决了问题！ - Pramod Sharma

Answer 3

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

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

Varunkumar Nagarajan

- Varunkumar Nagarajan

Answer 4

对我来说，这发生在Node.js项目中。

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

- moshiah_now

Answer 5

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

- Sudarshan Tanwar

---

我给你的回答点了踩，因为我读了问题和你的回答，但是我找不到这个方法如何解决问题。 - gmo