如何调试通过AJAX（特别是jQuery）加载的Javascript

小编典典

如何调试通过AJAX（特别是jQuery）加载的Javascript

ajax

最近，我通过更复杂的项目更改了编码样式，以“按需”加载页面（及其嵌入式脚本）。但是，很难像加载时那样调试这些脚本：

jQuery.get('/myModularPage', function(html){ /* insert the loaded page into the DOM */ });

要么

$('#some-container').load('/myOtherPage');

这些脚本可以完美运行，但是，如果要调试，如何在这些动态加载的页面和脚本中设置断点？

阅读 240

2020-07-26

共1个答案

小编典典

更新

现在，接受的表单带有#（标签）而不是@（符号）

语法进行了更改，以避免与IE条件编译语句和其他一些问题发生冲突（感谢Oleksandr Pshenychnyy和Varunkumar
Nagarajan指出了这一点）

//#sourceURL=/path/to/file

这实际上可以是任何可帮助您识别代码块的字符串。

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>

我尚未发现的事情：

内联脚本的每个脚本块都必须这样做吗？
它一定是脚本块的最后一行吗？（本文建议对此的答案是“ 是” ）

2020-07-26