I avoided debugging javascript for a long time because 1) I didn’t write a lot of it, and 2) it used to be a pain to do so with Visual Studio. Nowadays it’s pretty easy, though, if you know how to do it.

You’ll notice that if you open up your ASPX page in Visual Studio and try to set a breakpoint in javascript, you’ll usually get a “This is not a valid location for a breakpoint” error. What you need to do is open up the client-side version of the page in Visual Studio and debug that. Here’s how:

• Open Internet Explorer, go to Tools->Internet Options, click the Advanced Tab, and ensure that “Disable script debugging” is unchecked.
• Fire up your web project in Visual Studio and debug it using Debug->Start Debugging (or F5). IE will open up and display your web site.
• In IE, navigate to the page whose javascript you want to debug
• In IE, click the View->Script Debugger->Open menu item. That will open up the current page’s html and javascript in Visual Studio.
• Switch back to Visual Studio. You’ll see the page’s html and javascript. You can now set breakpoints, etc.
• Now you can switch back to IE and do whatever you want in the page. Any breakpoints that you set in the previous step will be hit, and you can inspect variables, etc. just like in normal code-behind debugging.

If the above annoys you, another javascript-debugging option is to instead use Firefox and Firebug, which I posted about briefly a few months back. Firebug is a powerful plugin that not only lets you debug javascript, but explore the DOM and watch AJAX requests. You can download it here.

Both approaches (Visual Studio and FireBug) have their merits. I suggest trying them both out to see which works for you.