BLS*_*lly 49 ajax jquery firebug xmlhttprequest google-chrome-devtools
我已经将更复杂的项目的编码风格改为最近"按需"加载页面(及其嵌入式脚本).但是,在加载它们时,很难调试这些脚本,如:
jQuery.get('/myModularPage', function(html){ /* insert the loaded page into the DOM */ });
要么
$('#some-container').load('/myOtherPage');
这些脚本运行完美,但如果我正在调试,如何在这些动态加载的页面和脚本中设置断点？
小智 74
将此添加到您希望它中断的js文件中:
debugger;
然后像任何其他调试器一样进入/退出/退出.
适用于动态加载的脚本和页面.据我所知,仅适用于Chrome.
BLS*_*lly 40
UPDATE
接受的表单现在带有#(#标签)而不是@(符号)
语法被更改为避免与IE条件编译语句和其他一些问题发生冲突(感谢Oleksandr Pshenychnyy和Varunkumar Nagarajan指出这一点)
//#sourceURL=/path/to/file
这可以是任何帮助您识别代码块的字符串.
JMac的另一个好处是:
对我来说,js文件显示在名为"(无域名)"的组中的源列表中.可能值得一提,因为我一开始就错过了它!
原版的
在讨论本文之前,我对上述内容进行了大约一周的努力.它确实适用于我的开发环境(我写这篇文章时是Chrome 22).
Firebug还支持开发人员命名的eval()缓冲区:只需在eval(表达式)的末尾添加一行,如:
Run Code Online (Sandbox Code Playgroud)//@ 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>
我还没有发现的事情:
这个问题看起来像现在一般使用新的pragma解决了:
//# sourceURL=filename
注意'hash' #而不是'at' @符号.
通过在源代码中包含该行,对它的引用将显示在调试器中!
| 归档时间： |
|
| 查看次数： |
17515 次 |
| 最近记录： |