Javascript ghost debugging

Svend — Wed, 22 Jul 2009 00:46:35 +0000

Recently, I tried to use jQuery, as a way of dynamically loading all the scripts that a certain page requires. Instead of utilizing script tags in the header section, using a simple $.getScript("script.js"); loads the same code, what’s more, this code is loaded asynchronously, which helps improve loading performance. The only problem is that loading scripts this way, makes them unavailable for debugging.

Debugging dynamically included script files presents some special challenges on it’s own. The primary being that that the web is basicly not a structured enviroment, like a folder on disk, and references to files and/or code is can be very intermittent.

Some methods for loading remote code

Here’s just some of the many ways that code may be included dynamically in a page (these are just rough outlines, buyer beware.) Be especially wary that this code is specifically for loading scripts, if you want to load JSON, you’ll need a different approach, just spilling your guts in the global scope is quite messy.

Using XMLHttpRequest to load the script, and then insert via DOM methods into the page itself.

var req = new XMLHttpRequest();
req.open('GET', 'delayed.js', true)
req.onreadystatechange = function(e) {
    var head= document.getElementsByTagName('body')[0];
    var delayed = document.createElement('script');
    var txt = document.createTextNode(req.responseText);
    delayed.appendChild(txt);
    head.appendChild(delayed);
}
req.send();

Using XMLHttpRequest to load the script, and then use eval to execute the code in the global scope.

var req = new XMLHttpRequest();
req.open('GET', 'delayed.js', true)
req.onreadystatechange = function(e) {
    eval(req.responseText);
}
req.send();

Dynamically create a script tag with DOM methods, and then point it’s src attribute to the script you wish download.

var head= document.getElementsByTagName('head')[0];
var delayed = document.createElement('script');
delayed.onreadystatechange = function() {
    if (delayed.readyState == "loaded" ||
        delayed.readyState == "complete") delay();
}
delayed.src = "delayed.js";
head.appendChild(delayed);

This code also details how you can get a callback for when the actual script has loaded, so you’re not “missing” out on the callback functionality of XMLHttpRequest.

jQuery basicly executes the first approach. The little twist is that just after the script has been added to the browser, it removes the tag again, so it’s not “littering” the document DOM with these script tags the author himself didn’t insert. This can be seen in the jQuery script at around line 646, where you find the globalEval function (assuming the development version, not the minified versions.)

The problem with anonymous code

This is all dandy, the problem simply is that no debuggers expose the anonymous code which enters the global scope in this fashion.

Firebug showing a webpage with both a static and a dynamically loaded script (the script was loaded with jQuery, but with a modified jQuery so that it leaves the node in the DOM). Everything looks fine.

Firebug’s script tab shows a different view, namely the one where the dynamically loaded script block is gone, and thus not available for debugging.

If you try to load the following script, with this piece of jQuery, $.getScript("delay.js", function() { delay(); });, will lead the debugger to exclaim that the method name is “anonymous”!

function delay() {
    alert("hello from delayed.js");
    console.trace();
}

Loading code for proper debugging

As you can see, the way that jQuery (and many other libs) chooses to load their scripts is a rather high-tech one, and the solution is as simple as not using XMLHttpRequest. By utilizing the third method of remotely loading scripts, allows you to morely accurately debug the scripts.

Take the following page and two script files for instance:

load 1

function load1() {
    alert("hello from load1");
}

function load2() {
    alert("hello from load2");
}

If we look at IE8’s Developer Tools JS debugger, you’ll notice that on page load, the scripts drop-down does not contain neither load1.js or load2.js.

IE8’s Developer Tools on initial loading of a simple HTML page.

If we try to click the links however, the scripts we load will appear in the dropdown, and allow easy debugging.

IE8’s Developer Tools after having clicked the load link, the loaded script is now available for easy debugging (this works just as well in Firebug btw.)

Debuggers

Debuggers are still lacking behind in this area, compared to debuggers operating in more stable enviroments. There’s no denying that the web presents unique challenges, but the fact remains that the code is available for execution, but is not exposed for debugging. So while JS debuggers has moved forward since the days of Venkman, I think there’s still ways to improve (and this need will become more pronounced as the dynamic nature of the web increases with time).

Everything old is new again » debugger

Javascript ghost debugging

Some methods for loading remote code

The problem with anonymous code

Loading code for proper debugging

Debuggers