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

Question

当我通过AJAX动态加载包含javascript的html片段时,我无法在Chrome 22.0.1229.94的开发者工具窗口的源选项卡中看到该内容.有点儿,我去了这里

此页面显示了一个过时的示例开发人员工具窗口.页面上有一个按钮用于加载动态脚本,当您执行此操作时,它不会显示在源选项卡中.

作为解决方案,我发现添加

debugger;

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

我在这里错过了什么或什么？

谢谢,罗布

Answer 1

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

//@ sourceURL=foo.js

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

Answer 2

不知道这是否适用于chrome(这绝对不适合我现在,可能在过去).

//@ sourceURL=foo.js

工作方案

对于通过ajax动态加载的脚本出现在chrome源工具中,您需要在脚本文件的开头或结尾(我更喜欢)位置添加以下行:

//# sourceURL=foo.js

名为foo.js的脚本将显示在源选项卡的左窗格中(无域)下拉列表中

- > localhost - source/src

- >(无域名) - foo.js

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

debugger;

在chrome中,您可以使用"debugger;"语句在调试器面板打开时中断语句.如果调试器面板关闭,Chrome将忽略此项.

这将有助于在调试模式下停止脚本,您将在源(调试)面板中看到名称为VM****的脚本.

希望这可以帮助.

Answer 3

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

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

Varunkumar Nagarajan