Question

我已经将更复杂的项目的编码风格改为最近“按需”加载页面（及其嵌入式脚本）。但是，很难像下载那样调试这些脚本：

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

或

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

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

Answer 1

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

debugger;

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

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

Answer 2

<强>更新

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

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

//#sourceURL=/path/to/file

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

JMac的另一个好处是：

对我来说，js文件显示在a中的sources列表中组称为“（无域名）”。因为我错过了，可能值得一提起初！

<强> ORIGINAL

在与this article一起跑步之前，我在上面挣扎了大约一个星期。它确实适用于我的开发环境（我写这篇文章的时候是Chrome 22）。

Firebug还支持开发人员命名的eval（）缓冲区：只需在eval（表达式）的末尾添加一行，如：
//@ 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>

我尚未发现的事情：

是否必须为内联脚本的每个脚本块执行此操作？
它必须是脚本块的最后一行吗？（文章建议答案是是）

Answer 3

此问题看起来现在已经使用new pragma：

进行了解决

//# sourceURL=filename

注意＆＃39;哈希＆＃39; #而不是＆＃39; at＆＃39; @符号。

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

Answer 4

正如您已经提到的，您可以使用//@ sourceURL。对于内联脚本，Chrome似乎不支持//@ sourceURL。它适用于eval表达式。 This HTML5 article on source maps提供了有关在代码中命名eval块和命名任何匿名函数的更多详细信息。

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

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

4 个答案: