How to help the debugger see my javascript, or how to best refactor my script to help make it debugger-friendly?

Question

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

$.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.

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?

Answer 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.

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';).

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:

$.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

Answer 2

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.

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)

Answer 3

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.:

$.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

Answer 4

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

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

I hope I've been of any help!