Friday, May 20, 2011

Debugging dynamic scripts in IE 9 developer tools

Hi everyone.

I've decided to mix here English & Russian posts to go internationally. Why else have I? Because when googling smth I primarily use English, hence I may omit some useful (or at least required) information in Russian or any other language I speak. Moreover people don't always supply tags for their posts, it complicates googling heavily.

This time I wanna share some info regarding how you can debug dynamic scripts (obtained with eval()) in IE9 in their well-known developer tools. Perhaps, many of you already know how it can be done, but the usability of this feature confused me a bit (comparing with Chrome or FF's Firebug where this stuff is pretty explicit).

E.g. in Chrome all the scripts (static & dynamic) are displayed in one place:

In Firebug you can specify to have all of them in our place too:

You can see that I've selected to display all the scripts from the dropdown (left to the script name) above.

Let's look at IE9's developer tools.

Yep, some scripts are available, but there are only few of them here (I suppose just static ones)... My very first assumption (as an end-user of this product) was that they simply don't show them to us at all! Wrong!

To see the rest of the beast you should actually start debugging, hence press "Start debugging" button. Be sure you debug only one page per process (otherwise it won't attach to the process). Here we are:

Tons of files marked as eval code & a number in circle brackets... All our dynamic script, inline js, event js & all this stuff goes here. Luckily!

Looking at this "beautiful" naming one may ask the question: "Where the hell is the source code of my particular js-file?" E.g., I'm using dojo-framework & many of my included scripts are loaded dynamically via eval() or using some similar functionality.

Luckily Microsoft is not leaving us helpless in this situation, but again not a piece of intuitiveness (from my point of view). Look at this input box (with the text "Search Script...") on the right:

You should pass the quest & get to know it performs text-searching not only in currently opened javascript-file, but also in all these dynamically loaded files. Finally, voilĂ !

So, the conclusion...
1) Google Chrome. Shows all the loaded javascript excellently (though IMHO currently it's not the most convenient browser to debug in - but that's another topic & is my personal thought). It even showed the paths to all those js-files that were loaded dynamically, even Firebug failed to do this.
2) Firebug. It's good enough as always, but sometimes pieces of script (desired to have names like in Chrome) have meaningless names.
3) IE9 developer tools. Also can satisfy your debugging needs but usability level suxx heavily.