Debug JavaScript in Visual Studio 2005

I’ve been using Visual Studio 2005 for almost 2½ years since the beta 1 release. In all that time, I’ve used Firefox and Firebug for all JavaScript debugging. I’ve tried setting breakpoints in JavaScript in Visual Studio before, but I never got it working so I left it for Firebug. Then the other day, our new developer at Traceworks told me that Visual Studio could be used for debugging and that it is possible to set breakpoints in the JavaScript files.

This of course illustrates that I’m slow – 2½ years slow to be exact. For those of you, who are as slow as me, keep reading and I’ll tell you how to debug JavaScripts in Visual Studio.

Set up Internet Explorer

Internet Explorer has disabled the possibility to debug scripts by default, so the first thing to do is to enable it. In the top menu, go to Tools -> Internet Options -> Advanced. Here you need to remove the checkboxes in Disable script debugging. This is needed for Internet Explorer to tell Visual Studio about the JavaScript running in the browser.

Start debugging

In included .js files you are now able to set break points as you normally would in C# or VB.NET. The execution stops at the break point and you are able to see the values of the variables and to move forward by hitting F10 and F11 like normal. The experience is exactly the same as debugging C# code.

For inline JavaScript you cannot set break points, but Microsoft did provide us with an alternative. If you add the word debugging wherever you want in the script code, the execution will stop at the word and you can debug exactly the same way as setting a break point.

For this to work, you must run Visual Studio in debug mode. That’s it, extremely powerful and easy to do. The only thing I don’t like about this is that I didn’t know about it before now. C’est la vie.