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

JavaScript date string formatting

Svend — Tue, 15 Jul 2008 21:23:20 +0000

Date string formatting is very brutal in JavaScript, which probably has the worst built in library in relation to the distribution this language sees. So a long time ago I whipped up a script file, for doing just this. I always though PHP’s date function looked very nice, so I decided to model my function upon that.

Download: formatDate.js (13kB)

Supported switches and test

I’m not going to duplicate PHP’s documentation. But I will list briefly the supported switches. Basicly, switches should return the same as in PHP, if they don’t, it’s most likely in error, so let me know at .

Supported switches	Unsupported switches	Currently unsupported, but might be included in the future
a, A, B, c, d, D, F, g, G, h, H, i, I (uppercase i), j, l (lowecase L), L, m, M, n, N, O, P, r, s, S, t, U, w, W, y, Y, z, Z	T, e, o

Here’s some examples.

Example	Output
`F j, Y, g:i a`
`m.d.y`
`j, n, Y`
`Ymd`
`h-i-s, j-m-y, it is w Day z`
`%i%t %i%s %t%h%e jS %d%a%y.`
`D M j G:i:s T Y`
`H:m:s %m %i%s% %m%o%n%t%h`
`H:i:s`

And here you can test your own flags if you should wish.

Differences and gotchas

You should note quite quickly that you use % to escape, not backslash (\). PHP gets to treat strings a bit different, and frankly, \\d\\u\\m\\b looks stupid (not to mention the quadruple escape, \\\\, if you want a single backslash in your output).

Another thing to note is that this code operates either directly on a Date object (which always have a time set), or a passed in value, which it interprets as a date. The script doesn’t help you in any way in setting a time. As a developer, you need to be careful when juggling dates on the client side, and also if you create any dates, don’t make assumptions regarding what timezone the runtime thinks it is.

I’ve obsoleted my old page, though it’s still on the site under a different name. It had some more rigerous testing (it’s using the old version of the script so take care), and also some stuff about localization which I don’t really think is that interesting anyway.

Everything old is new again » JavaScript