54

我最近用更复杂的项目改变了我的编码风格，以“按需”加载页面（及其嵌入式脚本）。但是，在加载这些脚本时很难调试它们，例如：

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

或者

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

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

4

4 回答 4

81

将此添加到您希望它中断的 js 文件中：

debugger;

然后像任何其他调试器一样进入/结束/退出。

适用于动态加载的脚本和页面。据我所知，仅适用于 Chrome。

于 2012-10-29T21:36:16.660 回答
42

更新

接受的表格现在带有#(hashtag) 而不是@(at symbol)

语法已更改以避免与 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>

我还没有发现的东西：

  • 是否必须为内联脚本的每个脚本块执行此操作？
  • 它必须是脚本块的最后一行吗？（这篇文章建议答案是肯定的）
于 2012-10-29T21:24:01.290 回答
10

这个问题看起来现在已经使用新的 pragma解决了：

//# sourceURL=filename

请注意“哈希”#而不是“at”@符号。

通过在源代码中包含该行，对它的引用将显示在调试器中！

于 2014-05-16T17:39:43.477 回答
4

正如您已经提到的，您可以使用//@ sourceURL. Chrome 似乎不支持//@ sourceURL内联脚本。它确实适用于 eval 表达式。这篇关于源映射的 HTML5 文章提供了有关命名 eval 块和命名代码中任何匿名函数的更多详细信息。

您可以尝试嵌入脚本标签或 JSONP，而不是使用 eval。

于 2012-10-30T05:05:55.520 回答