“Part of the inhumanity of the computer is that, once it is competently programmed and working smoothly, it is completely honest.” — Isaac Asimov

Thursday, January 25, 2007

Debugging JavaScript in Visual Studio.NET

I've often been frustrated by the difficulty of testing client-side script in my .NET Web applications. So, being the Google-savvy user that I am, I set out to find a solution and stumbled across Walt Ritscher's post, which I will shamelessly quote here, because I like to have this kind of information handy:

Enable client-side script debugging in Internet Explorer

Open Microsoft Internet Explorer.

On the Tools menu, click Internet Options.

On the Advanced tab, locate the Browsing section, and uncheck the Disable script debugging check box, and then click OK.

Close Internet Explorer.

In your JavasSript function add the keyword debugger . This causes VS.NET to switch to debug mode when it runs that line.

Run your ASP.Net application in debug mode.

I've enthusiastically tested this little tidbit, and determined that it works exactly as he describes. Thanks, Walt! This tip is a life-saver.

However, I ran into an interesting problem: when I place the debugger keyword inside an .aspx file, Visual Studio .NET loads the wrong page into the debugger. Instead of stepping through script code, I'm stepping through HTML. It's quite peculiar. If I remove the debugger keyword from inline-script (that is, script that occurs between <SCRIPT> and </SCRIPT> tags in the page itself) and put it inside an included script file, everything works fine.

Apparently, Visual Studio is having some difficulty with this sort of thing. The solution, of course, is to write a simple JavaScript include file that invokes the debugger, and include it whenever I want to invoke it. It's a simple (and yet inconvenient) workaround. It also complicates my build process, since it's one more file I have to make sure I remove from the shipped product.

But, I am able to debug script, and that's a godsend in and of itself. Just being able to step through JavaScript code, and watch the variables in the local window is more than enough to make up for the hassles of an include file and an additional line in my build script.