如何debugging通过AJAX加载的Javascript（特别是jQuery）
我已经改变了我的编码风格，更复杂的项目，以最近“按需”加载页面（和他们的embedded式脚本）。 但是，像这样加载时，很难debugging这些脚本：
jQuery.get('/myModularPage', function(html){ /* insert the loaded page into the DOM */ }); 要么
$('#some-container').load('/myOtherPage');
这些脚本运行完美，但如果我正在debugging，我怎样才能在这些dynamic加载的页面和脚本中设置断点？
把它添加到你想要破解的js文件中：
debugger;
然后像任何其他debugging器一样进/出/出。
适用于dynamic加载的脚本和页面。 据我所知，只能在Chrome中运行。
UPDATE
现在接受的forms是# （hashtag）而不是@ （在符号）
语法改为避免与IE条件编译语句和其他一些问题的冲突（感谢Oleksandr Pshenychnyy和Varunkumar Nagarajan指出这一点）
//#sourceURL=/path/to/file
这实际上可以是任何可以帮助您识别代码块的string。
JMac的另一个好处是：
对我来说，js文件被显示在一个名为“（无域）”的组中的源列表中。 可能值得一提，因为我一开始就错过了！
原版的
在跑过这篇文章之前，我一直在争取上述的一个星期。 它确实适合我的开发环境（我写这篇文章的时候是Chrome 22）。
Firebug也支持开发人员命名的eval（）缓冲区：只需添加一行到你的eval（expression式）的末尾，如：
//@ sourceURL=foo.js
例如，给这个简单的html文件：
<!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>
我还没有发现的东西：
- 内嵌脚本的每个脚本块都必须完成吗？
- 它是否必须是脚本块的最后一行？ （文章会build议这个答案是肯定的 ）
这个问题看起来像现在一般使用新的附注来解决：
//# sourceURL=filename
注意'hash' #而不是'at' @符号。
通过在源代码中包含该行，对其的引用将显示在debugging器中！
正如你已经提到的，你可以使用//@ sourceURL 。 Chrome似乎并不支持内联脚本的//@ sourceURL 。 它在evalexpression式上工作。 源地图上的这篇HTML5文章给出了关于命名eval块的更多细节，以及代码中任何匿名函数的命名。
而不是使用eval，你可以尝试embedded一个脚本标签或JSONP可能。
