我该如何调试JavaScript这是通过AJAX（特别是jQuery的）装 [英] How do I debug Javascript which was loaded via AJAX (specifically jQuery)
问题描述
我已经改变了我的编码风格，更复杂的项目，以按需加载页面（及其嵌入的脚本）最近。然而，这是难以这些脚本调试因为当加载像：
jQuery.get（'/ myModularPage'，功能（HTML）{/ *将页面加载到DOM * /}）;
或
$（'＃一些容器）的负载（'/ myOtherPage）。
这些脚本运行完美，但如果我调试，我怎么能设置在这些动态加载网页和脚本断点？
更新
在接受的形式，现在是一个＃（包括hashtag），而不是 @ （at符号）
语法改为以避免与IE条件编译语句冲突和其他一些问题（以奥列克Pshenychnyy和Varunkumar Nagarajan感谢您指出了这一点）
//＃sourceURL = /路径/到/文件
这真的可以是任何字符串，可以帮助你确定code块。
从联合分析小组另外一个好点的：
对于我来说，被显示在一个内源列表中的js文件 组名为（没有域）。可能是值得一提，因为我错过了 在第一次！
原始的
我与上述跨越的这篇文章。它确实对我的开发环境（铬22，因为我写这篇文章）很好地工作。
萤火虫还支持开发者命名的eval（）缓冲区：只是一个行添加到您的eval（如pression）之类的末尾：
// @ sourceURL = foo.js
例如，考虑这个简单的html文件：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT;身体GT;
＆LT; P＆gt;我的网页的含量小于/ P＆GT;
＆LT; DIV ID =计数器＆GT;＆LT; / DIV＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
//如果这个页面被加载到通过AJAX的DOM
//以下code不能进行调试
//（甚至在浏览DEV-工具）
对于（I = 0; I＆小于10; I + = 1）{
的document.getElementById（'反'）的innerText =我。
}
//但是如果我添加下面的一行
//它会魔术般地出现在开发工具（或萤火虫）
// @ sourceURL = /路径/要/我/ ajaxed /页
＆LT; / SCRIPT＆GT;
＆LT;身体GT;
＆LT; / HTML＆GT;
我还没有发现
东西：
- 这是否必须为每一个脚本块内联脚本做了什么？
- 是否必须是脚本块的最后一行？ （本文建议的答案，这是是）
I have changed my coding style with more complex projects to loading pages (And their embedded scripts) "on demand" recently. However, it is difficult to debug those scripts as when they are loaded like:
jQuery.get('/myModularPage', function(html){ /* insert the loaded page into the DOM */ });
or
$('#some-container').load('/myOtherPage');
These scripts run perfectly, but if I'm debugging, how can I set breakpoints in these dynamically loaded pages and scripts?
UPDATE
The accepted form is now with a # (hashtag) rather than @ (at symbol)
The syntax was changed to to avoid conflicts with IE conditional compilation statements and some other issues (thanks to Oleksandr Pshenychnyy and Varunkumar Nagarajan for pointing this out)
//#sourceURL=/path/to/file
This can really be any string that helps you identify the block of code.
An additional good point from JMac:
For me, the js file was being displayed in the sources list within a group called "(no domain)". Might be worth mentioning as I missed it at first!
ORIGINAL
I struggled with the above for about a week before running across this article. It really does work perfectly for my development environment (Chrome 22 as I write this).
Firebug also supports developer-named eval() buffers: just add a line to the end of your eval(expression) like:
//@ sourceURL=foo.js
For example, given this simple html document:
<!DOCTYPE html>
<html>
<body>
<p>My page's content</p>
<div id="counter"></div>
<script type="text/javascript">
//if this page is loaded into the DOM via ajax
//the following code can't be debugged
//(or even browsed in dev-tools)
for(i=0;i<10;i+=1) {
document.getElementById('counter').innerText = i;
}
//but if I add the line below
//it will "magically" show up in Dev Tools (or Firebug)
//@ sourceURL=/path/to/my/ajaxed/page
</script>
<body>
</html>
Things I haven't yet discovered:
- Does this have to be done for every script block for inline scripts?
- Does it have to be the last line of the script block? (The article would suggest the answer to this is yes)
这篇关于我该如何调试JavaScript这是通过AJAX（特别是jQuery的）装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
