如何帮助调试器看到我的javascript，或者如何最好地重构我的脚本以使它对调试器友好?

I have an ASP.NET MVC project that uses some simple AJAX functionality through jQuery's $.get method like so:

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

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

The amount of content is relatively low here -- usually a single div with a short blurb of text. Sometimes, however, I am also injecting some javascript into the page. At some point when I dynamically include script into content that was itself dynamically added to the page, the script still runs, but it ceases to be available to the debugger. In VS2008, any breakpoints are ignored, and when I use the "debugger" statement, I get a messagebox saying that "no source code is available at this location." This fails both for the VS2008 debugger and the Firebug debugger in Firefox. I have tried both including the script inline in my dynamic content and also referencing a separate js file from this dynamic content -- both ways seemed to result in script that's unavailable to the debugger.

这里的内容相对较少——通常只有一个div，里面只有简短的文字简介。然而，有时我也向页面注入一些javascript。在某些时候，当我将脚本动态地包含到内容中(该内容本身被动态地添加到页面中)时，脚本仍然运行，但是调试器不能使用它。在VS2008中，任何断点都被忽略，当我使用“调试器”语句时，我得到一个消息框，说“在这个位置没有源代码可用”。这对于VS2008调试器和Firefox中的Firebug调试器都是失败的。我尝试过在动态内容中包括内联的脚本，也尝试过从这个动态内容中引用一个独立的js文件——这两种方法都可能导致调试器无法使用的脚本。

So, my question is twofold:

我的问题有两个:

Is there any way to help the debugger recognize the existence of this script?
有什么方法可以帮助调试器识别这个脚本的存在吗?
If not, what's the best way to include scripts that are used infrequently and in dynamically generated content in a way that is accessible to the debuggers?
如果没有，最好的方法是将那些不经常使用的脚本和动态生成的内容包含在调试器中。

5 个解决方案

#1

I can not comment yet, but I can maybe help answer. As qwerty said, firefox console can be the way to go. I'd recommend going full bar and getting firebug. It hasn't ever missed code in my 3 years using it.

我还不能评论，但我可以帮忙回答。正如qwerty所说，firefox控制台是一个不错的选择。我建议去全酒吧，然后去找firebug。在我使用它的3年里，它从来没有漏掉过代码。

You could also change the way the injected javascript is added and see if that effects the debugger you're using. (I take it you're using Microsoft's IDE?). In any case, I find the best way to inject javascript for IE is to put it as an appendChild in the head. In the case that isn't viable, the eval function (I hate using it as much as you do) can be used. Here is my AJAX IE fixer code I use. I use it for safari too since it has similar behavior. If you need that too just change the browser condition check (document.all for IE, Safari is navigator.userAgent.toLowerCase() == 'safari';).

您还可以更改注入的javascript的添加方式，看看是否会影响您正在使用的调试器。(我认为你使用的是微软的IDE?)无论如何，我发现为IE注入javascript的最佳方式是将其作为appendChild放在头部。在不可行的情况下，可以使用eval函数(我讨厌像您这样使用它)。这是我使用的AJAX IE fixer代码。我也在safari中使用它，因为它有类似的行为。如果您也需要，请更改浏览器条件检查(文档)。对于IE, 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);
        }
    }
}

I've never used jquery, I preferred prototype then dojo but... I take it that it would look something like this:

我从未使用过jquery，我更喜欢prototype而不是dojo，但是……我认为它应该是这样的:

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

The one problem is, eval debug errors may not be caught since it creates another instance of the interpreter. But it is worth trying.. and otherwise. Use a different debugger :D

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

#2

This might be a long shot, but I don't have access to IE right now to test. Try naming the anonymous function, e.g.:

这可能是一个很长的机会，但是我现在没有IE来测试。尝试命名匿名函数，例如:

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

I'm surprised firebug is not catching the 'debugger' statement. I've never had any problems no matter how complicated the JS including method was

我很惊讶firebug没有捕捉到“调试器”语句。无论JS包含方法有多复杂，我从来没有遇到过任何问题

#3

If this is javascript embedded within dynmically generated HTML, I can see where that might be a problem since the debugger would not see it in the initial load. I am surprised that you could put it into a seperate .js file and the debugger still failed to see the function.

如果这是嵌入在动态生成的HTML中的javascript，我可以看到哪里会出现问题，因为调试器不会在初始加载中看到它。我很惊讶您可以将它放到一个分离的.js文件中，而调试器仍然无法看到这个函数。

It seems you could define a function in a seperate static file, nominally "get_and_show" (or whatever, possibly nested in a namespace of sorts) with a parameter of myUrl, and then call the function from the HTML. Why won't that trip the breakpoint (did you try something like this -- the question is unclear as to whether the reference to the .js in the dynamic HTML was just a func call, or the actual script/load reference as well)? Be sure to first load the external script file from a "hard coded" reference in the HTML file? (view source on roboprogs.com/index.html -- loads .js files, then runs a text insertion func)

似乎可以使用myUrl参数在分离的静态文件中定义一个函数，名义上是“get_and_show”(或者其他，可能嵌套在排序的名称空间中)，然后从HTML调用这个函数。为什么这个断点不会出错(您尝试过类似的东西吗?问题是，对动态HTML中的.js的引用是func调用，还是实际的脚本/加载引用)?确保首先从HTML文件中的“硬编码”引用加载外部脚本文件?(查看roboprogs.com/index.html的源代码——加载.js文件，然后运行一个文本插入函数)

#4

We use firebug for debug javascript, profile requests, throw logs, etc. You can download from http://getfirebug.com/

我们使用firebug来调试javascript、配置文件请求、抛出日志等等。

If firebug don't show your javascript source, post some url to test your example case.

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

I hope I've been of any help!

我希望我对你有所帮助!

#5

If you add // @ sourceURL=foo.js to the end of the script that you're injecting then it should show up in the list of scripts in firebug and webkit inspector.

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

jQuery could be patched to do this automatically, but the ticket was rejected.

jQuery可以自动进行修补，但票据被拒绝。

这里有一个相关的问题:是否可以通过WebKit、FireBug或IE8开发工具等调试器调试动态加载JavaScript ?

#1

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