如何帮助调试器查看我的 javascript，或者如何最好地重构我的脚本以使其对调试器友好？答案

【问题标题】：How to help the debugger see my javascript, or how to best refactor my script to help make it debugger-friendly?如何帮助调试器查看我的 javascript，或者如何最好地重构我的脚本以使其对调试器友好？
【发布时间】：2009-10-27 21:22:54
【问题描述】：

我有一个 ASP.NET MVC 项目，它通过 jQuery 的 $.get 方法使用一些简单的 AJAX 功能，如下所示：

$.get(myUrl, null, function(result) {
    $('#myselector').html(result);
});

这里的内容量相对较少——通常是一个带有简短文本的 div。但是，有时我也会在页面中注入一些 javascript。在某些时候，当我将脚本动态包含到本身动态添加到页面的内容中时，脚本仍然运行，但它不再可供调试器使用。在 VS2008 中，任何断点都会被忽略，当我使用“调试器”语句时，我会收到一个消息框，提示“此位置没有可用的源代码”。这对于 VS2008 调试器和 Firefox 中的 Firebug 调试器都失败了。我已经尝试在我的动态内容中包含内联脚本，也尝试从这个动态内容中引用一个单独的 js 文件——这两种方式似乎都会导致调试器无法使用脚本。

所以，我的问题是双重的：

有什么方法可以帮助调试器识别这个脚本的存在吗？
如果不是，以调试器可访问的方式将不经常使用的脚本和动态生成的内容中包含的最佳方法是什么？

【问题讨论】：

你试过火狐的控制台插件吗？它可能会帮助您捕获一些错误。 addons.mozilla.org/en-US/firefox/addon/1815
让我们知道这是否有用，或者甚至更好地奖励答案，试图清理我的答案不是那么有用:)
你只使用firefox还是firefox+firebug？我知道今天的 firebug 能够在 eval() 中调试代码，所以也许它对你的情况也有帮助

标签： javascript jquery debugging

【解决方案1】：

我还不能发表评论，但我也许可以帮助回答。正如 qwerty 所说，Firefox 控制台可能是要走的路。我建议去完整的酒吧并获得萤火虫。在我使用它的 3 年中，它从未丢失过代码。

您还可以更改添加注入的 javascript 的方式，看看这是否会影响您正在使用的调试器。（我认为您使用的是 Microsoft 的 IDE？）。无论如何，我发现为 IE 注入 javascript 的最佳方法是将其作为 appendChild 放在头部。在不可行的情况下，可以使用 eval 函数（我讨厌像你一样使用它）。这是我使用的 AJAX IE 修复程序代码。我也将它用于野生动物园，因为它具有类似的行为。如果您也需要，只需更改浏览器条件检查（IE 为 document.all，Safari 为 navigator.userAgent.toLowerCase() == 'safari';）。

function execajaxscripts(obj){
    if(document.all){
        var scripts = obj.getElementsByTagName('script');
        for(var i=0; i<scripts.length; i++){
            eval(scripts[i].innerHTML);
        }
    }
}

我从未使用过 jquery，我更喜欢原型然后是 dojo，但是...我认为它看起来像这样：

$.get(myUrl, null, function(result) {
    $('#myselector').html(result);
    execajaxscripts(result);
});

一个问题是，eval 调试错误可能不会被捕获，因为它会创建解释器的另一个实例。但值得一试.. 否则。使用不同的调试器：D

【讨论】：

【解决方案2】：

这可能是一个很长的尝试，但我现在无法访问 IE 进行测试。尝试命名匿名函数，例如：

$.get(myUrl, null, function anon_temp1(result) {
    $('#myselector').html(result);
});

我很惊讶萤火虫没有捕捉到“调试器”语句。不管包含方法的 JS 多么复杂，我从来没有遇到过任何问题

【讨论】：

【解决方案3】：

如果这是嵌入在动态生成的 HTML 中的 javascript，我可以看到可能存在问题的地方，因为调试器在初始加载时看不到它。我很惊讶你可以把它放到一个单独的 .js 文件中，而调试器仍然看不到这个函数。

您似乎可以在一个单独的静态文件中定义一个函数，名义上是“get_and_show”（或其他任何东西，可能嵌套在某种命名空间中），参数为 myUrl，然后从 HTML 调用该函数。为什么不会触发断点（您是否尝试过这样的事情 - 问题尚不清楚动态 HTML 中对 .js 的引用是否只是一个 func 调用，还是实际的脚本/加载引用） ?确保首先从 HTML 文件中的“硬编码”引用加载外部脚本文件？（在 roboprogs.com/index.html 上查看源代码——加载 .js 文件，然后运行文本插入函数）

【讨论】：

【解决方案4】：

我们使用 firebug 来调试 javascript、配置文件请求、抛出日志等。可以从http://getfirebug.com/下载

如果 firebug 没有显示您的 javascript 源代码，请发布一些 url 来测试您的示例案例。

希望对你有所帮助！

【讨论】：

【解决方案5】：

如果您将 // @ sourceURL=foo.js 添加到您要注入的脚本的末尾，那么它应该会显示在 firebug 和 webkit 检查器的脚本列表中。

可以对 jQuery 进行修补以自动执行此操作，但 the ticket 被拒绝。

【讨论】：