Oct 18, 2008

Debugging JavaScript in the Internet Explorer

Most web developers know that it is extremely easy to debug JavaScript in FireFox—there are at least two great JavaScript debuggers (Venkman and FireBug). Developer can easily explore and change variables, set breakpoints, step in and out of any JavaScript function.

This is all good until the script works fine in FireFox but does not work in Microsoft Internet Explorer. Recently I hit an issue like that.

I passed array of objects to the function:

id: 1, title: 'title1', message: 'message 1'
}, {
id: 2, title: 'title2', message: 'message 2'

Inside the function I did a very simple thing:

function foo(config) {
for (var i = 0; i < config.length; i++) {
bar(config[i].id, config[i].title, config[i].message);

That worked fine in FireFox but in Microsoft Internet Explorer I always got a very weird error: "config[i] is not an object" (the text was not exactly that but very close).

This was a mistery to me. Why wouldn't it work? The code is dead simple.

I went through the code in FireBug, all was perfect. But I could not do the same using Internet Explorer. I remembered that a tool named Microsoft Script Debugger existed when I was a student in 1990's but even at that time it was complete rubbish. I spent several hours trying to figure out how to debug JavaScript effectively in the Internet Explorer.

It turned out that Microsoft had several other options: Microsoft Script Editor, which comes with Microsoft Office and Visual InterDev, which comes with Visual Studio. Script Editor was evaluated as "crap not far from script debugger" by some people, so I decided not to waste my time on it. Visual InterDev was not an option either because I am not willing to spend $500 for Visual Studio to get a JavaScript debugging tool.

Fortunately one of my refined searches finally gave me the answer. I found Microsoft Web Developer 2008 Express Edition. This product cannot do just–in–time debugging (i.e. open debugging when Internet Explorer encounters a error) but if web site debugging is started from the Web Developer, all errors are caught and debugging is perfect (Microsoft debugging tools were always the best in the world).

So I got as copy of the product, answered many unrelated questions to get a free key and installed the Web Developer. As usual with Microsoft software it installed almost 2GB of various junk, which I will try to remove one by one later. However the debugging was truly perfect! I made a new web site project and lanuched it. A new instance of the Internet Explorer opened and Web Developer attached to it. Since my project in Web Developer was blank, I was directed to port 5011 and saw directory structure on the disk. I simply typed the address of the problematic web site and debugger immediately prompted me to debug JavaScript error on this site. Simple, isn't it?

I could not figure out why length attribute in the config variable from the code about was 3 in the Internet Explorer. There was nothing wrong with the variable except for its length attribute. I simply made check for existence if config[i].id and site worked fine.

The experience is very interesting for me. Though I did not understand the cause of the problem and did not cure the cause, I got a very good tool to work with: a proper JavaScript debugger for Microsoft Internet Explorer.

I hope my experience will be useful to other TYPO3 developers too.

No comments:

Post a Comment