可以通过WebKit,FireBug或IE8 Developer Tool等调试器来调试动态加载JavaScript吗？

从我最近的问题,我已经创建了一些用于动态加载局部视图的JavaScript函数.所以,我无法调试任何动态加载JavaScript.因为所有加载的JavaScript都将通过"eval"函数进行评估.

但是,我找到了一些方法来创建新的JavaScript,使用以下脚本动态创建脚本到当前文档的标题.所有加载的脚本都将显示在HTML DOM中(您可以使用任何调试器来查找它).

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

document.getElementsByTagName('head')[0].appendChild(script);

顺便说一下,大多数调试器(IE8 Developer Toolbar,Firebug和Google Chrome)都无法在任何动态脚本中设置断点.因为必须在加载页面后第一次加载可调试脚本.

您是否有动态脚本内容或文件调试的想法？

更新1 - 添加测试源代码

您可以使用以下xhtml文件来尝试调试someVariable值.

从答案来看,我只是在FireBug中测试它.结果应显示如下图像.

alt text http://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxE_GorlwSJDvTql0m0ugSGXPaY-/undebugable-firebug-html.PNG

请查看页面加载后添加的"dynamicLoadingScript"脚本.

alt text http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb-_d1e96Q-14raSDMJOBsdcV9jsi4B5yCUDqm41Wc3h0yk/undebugable-firebug-script.PNG

但是在FireBug的脚本选项卡中找不到它

更新2 - 在动态加载脚本中创建调试断点

alt text http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPAAp_1q0JWAETo4Qoiw/Debugger-VS2010.png

alt text http://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfs​​lSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrCABo7pNVQc1Acl-UXXbHFE/Debugger-GoogleChrome.png

上面两张图都显示插入"调试器"; 某些脚本行中的语句可以在动态加载脚本中触发断点.但是,两个调试器都不会在断点处显示任何代码.因此,这样做是没用的.

谢谢,

1> icecubed..：

---

也可以使用铬.Chrome有一项功能,您可以在其中指定解析器属性,并使动态JS显示为一个文件,然后可以浏览并设置断点.

需要设置的属性是

//# sourceURL=dynamicScript.js

其中dynamicScript.js是应该在脚本文件浏览器中显示的文件的名称.

更多信息在这里

Paul Irish还在他关于Tooling和Webapp Development Stack的精彩演讲中简要介绍了它

---

如果有人遇到MVC3/Razor的问题,请记住逃避@符号,所以像// @@ sourceURL = dynamicscript.js这样的东西,只有fyi,上面的内容也适用于firebug.

---

请注意,新语法是"//#sourceURL = dynamicScript.js"从@更改为#

---

源地图上Chrome开发者工具部分的更新链接是 - https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript

---

对我来说,js文件显示在名为"(无域名)"的组中的源列表中.可能值得一提,因为我一开始就错过了它!

2> Joeri Sebrec..：

---

尝试添加"调试器"; 你动态添加的javascript语句.无论断点设置如何,都应该使它在该行停止.

3> JerryGoyal..：

---

是的,现在可以使用Google Chrome调试动态加载的JavaScript!

无需debugger;为动态加载的JS文件添加额外或任何其他属性.只需按照以下步骤进行调试:

方法1:

我的技术主管刚刚展示了调试动态加载的Javascript方法的超级简单方法.

打开chrome控制台并写入方法名称并按Enter键.
在我的例子中,GetAdvancedSearchConditonRowNew
如果JS方法已经加载,那么它将显示方法的定义.

---

---

单击方法的定义,将打开整个JS文件进行调试:)

---

---

方法2:

举个例子,当我点击一个使用ajax调用的按钮时,我正在加载JS文件 .

network在谷歌浏览器开发工具中打开选项卡

单击一个控件(例如按钮),它会加载一些javascript文件并调用一些javascript函数.

观察网络选项卡并查找该JS函数(在我的例子中RetrieveAllTags?_=1451974716935)

将鼠标悬停在它上面initiater,您将找到动态加载的JS文件(带前缀VM*).

---

---

单击该VM*文件以打开.

在您的文件中放置调试器:D

---

---

4> Molecular Ma..：

---

我为此目的使用谷歌浏览器.

在chrome at scripts选项卡中,您可以启用'暂停所有异常'

然后放在代码行中的某个位置try{throw ''} catch(e){}.Chrome会在到达此行时停止执行.

编辑:修改过的图像,这样我就能更清楚地了解它.

5> Kyle Simpson..：

---

我想你可能需要给eval'd代码一个"名字",如下所示:

http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

如果你这样做,我认为debugger"更新2" 的方法可能会起作用.

6> 小智..：

---

更新:sourceUrl的语法已更改(@由#替换),以避免不受支持的浏览器出错(读取:IE).细节