如何调试通过 AJAX（特别是 jQuery）加载的 Javascript
Posted
技术标签:
【中文标题】如何调试通过 AJAX（特别是 jQuery）加载的 Javascript【英文标题】：How do I debug Javascript which was loaded via AJAX (specifically jQuery) 【发布时间】：2012-10-19 06:08:38 【问题描述】：我最近改变了我的编码风格，使用更复杂的项目来“按需”加载页面（及其嵌入式脚本）。但是，很难像加载这些脚本时那样调试它们：
jQuery.get('/myModularPage', function(html) /* insert the loaded page into the DOM */ );
或
$('#some-container').load('/myOtherPage');
这些脚本运行完美，但如果我在调试，如何在这些动态加载的页面和脚本中设置断点？
【问题讨论】：
【参考方案1】：将此添加到您想要中断的 js 文件中：
debugger;
然后像任何其他调试器一样进入/结束/退出。
适用于动态加载的脚本和页面。据我所知，仅适用于 Chrome。
【讨论】：
这绝对是一种有效的方法。但是，一旦有了断点调试的能力，回到使用debugger 语句就像倒退了一步。不过我很感谢您的意见，它肯定适用于不支持 //@ sourceURL: 语法的浏览器（包括 IE、FF 和 Safari……我从未在 Opera 中使用或测试过）
太棒了。像魅力一样工作。
真是太棒了！谢谢！
muaah！ :D 这将永远帮助我。
适用于 Firefox 55.0.3 (x64)【参考方案2】：
更新
现在接受的表单带有#（井号标签）而不是@（符号）
为了避免与 IE 条件编译语句的冲突和一些其他问题（感谢 Oleksandr Pshenychnyy 和 Varunkumar Nagarajan 指出这一点），语法已更改
//#sourceURL=/path/to/file
这实际上可以是任何可以帮助您识别代码块的字符串。
JMac 的另一个优点：
对我来说，js 文件显示在源列表中 组称为“（无域）”。可能值得一提，因为我错过了 一开始！
原创
在遇到this article 之前，我在上述问题上苦苦挣扎了大约一周。它确实非常适合我的开发环境（我写这篇文章时是 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>
我还没有发现的东西：
内联脚本的每个脚本块都必须这样做吗？ 它必须是脚本块的最后一行吗？ （这篇文章建议的答案是是）【讨论】：
非常有用！你救了我这么多小时！！在我的情况下，我正在加载我的应用程序中的所有脚本，通过 ajax 获取数据并将带有 appendChild 的 responseText 注入脚本标记，在注入之前附加 //sourceURL= 保持代码可调试。我认为 jquery 应该做类似的事情，所以我相信这也可以在 jquery 中自动化。 我一直在寻找这样的东西。如果 Chrome 会自动为您执行此操作，那就太好了，即使它没有与之关联的用户友好名称。 通行证相对于什么？ 这篇文章有点过时了。 @Varunkumar Nagarajan 发表的文章说 //@ 语法后来更改为 //# 以避免与 IE 条件编译语句冲突和其他一些问题。请考虑更新您的答案以免混淆未来的观众，因为您的帖子确实是一个很好的答案。 @OleksandrPshenychnyy：已更新。感谢您 ping 我进行编辑【参考方案3】：这个问题看起来现在已经使用new pragma 解决了：
//# sourceURL=filename
注意“哈希”# 而不是“at”@ 符号。
通过在源代码中包含该行，对它的引用将显示在调试器中！
【讨论】：
这也适用于 HTML 页面内嵌的 javascript。 对我来说，js 文件显示在名为“（无域）”的组内的源列表中。可能值得一提，因为我一开始就错过了！【参考方案4】：正如您已经提到的，您可以使用//@ sourceURL。 Chrome 似乎不支持 //@ sourceURL 用于内联脚本。它确实适用于 eval 表达式。 This HTML5 article on source maps 提供了有关命名 eval 块和代码中任何匿名函数命名的更多详细信息。
您可以尝试嵌入脚本标签或 JSONP，而不是使用 eval。
【讨论】：
以上是关于如何调试通过 AJAX（特别是 jQuery）加载的 Javascript的主要内容，如果未能解决你的问题，请参考以下文章
关于wordpress后台首页加载ajax.googleapis特别慢的解决办法
jQuery Mobile 如何通过ajax方式动态加载页面？
通过 Jquery Ajax 函数加载后不渲染 KnockoutJS 元素