Tuesday, September 12, 2006

Debugging Javascript with Visual Studio or other tools

Yes, you've read right. You can debug Javascript with Visual Studio. Here is a blog entry that blew my mind when I've read it: JavaScript Debugging.

Basically, what needs to be done is first go to Internet Explorer Options and disable Disable Script Debugging (Internet Explorer) (No, I didn't mistype, there is a checkbox that needs disabling and it's called Disable...) in the Advanced section. Be careful not to disable the other script debugging box, only the Internet Explorer one. Then, when an error occurs, the system asks you what debugger to use. You can choose Visual Studio 2003 or 2005 from the list (provided you have them installed :) ), trace, put breakpoints, etc.

There is also the javascript debugger keyword, which fires a debugging window at the specific location, so it's like a breakpoint.

Googling the net I've found that there are both free and commercial Javascript debuggers. There is even a free one provided by Microsoft: Script Debugger for Windows. One, unfortunately shareware, product that I saw recommended on the forums is 1st JavaScript Editor.

The only disadvantage to this, that I've seen, is that any javascript error will result in opening the debuggers window, without the ability to check "ignore errors on this page" or anything like that. It could be annoying while browsing. Yet I am surprised that I've heard of this method of Javascript debugging only now.


If it seems the list of debuggers does not appear anymore (or never did), go to Visual Studio Tools -> Options -> Debugging -> Just-In-Time and check the "Script" checkbox.

If it seems Visual Studio doesn't correctly find the right Javascript line to debug when entering debug mode, start the web site without debugging and then choose Microsoft Script Debugger. It gets the current line right, but has a difficult to use interface (Hint: use the Command Window). Of course, you have to download and install it first :).