Debugging Javascript in Visual Studio 2008

In my old ASP Classic days, one of the things I hated most about web programming was writing javascript. Like many people at the time, the easiest thing to do was just to avoid it all together. Why? Well for one thing, in the days of ASP and Interdev, there weren't a lot of tools that helped you write javascript. The Interdev IDE by no means provided you with any type of prompting or "intellisense", and we didn't have all the cool browser tools to help you know where your errors were coming from.

Today, it's a much different story. Because of the technology that is now available to us, you can simply focus on what you'd like your client-side code to do, and by focusing all of your energy at the screen, Visual Studio will simply read your mind and begin to magically formulate all of the necessary functions for you.

Not really...BUT!

We do have some great tools available out there. In particular, there's a feature that came out with Visual Studio 2008 (and above now, woohoo 2010!) that I thought was really cool. I would say most developers probably know about this but if not, prepare to be enlightened. When 2008 came out, one of the things I heard everyone say was that with VS 2008, you can now debug javascript. "Debug javascript?? Can't you just do that with notepad and a bunch of alert statements?" To clarify what I think people meant was that the IDE itself will actually

1) Detect blatant syntax errors (not all, but still pretty good).

2) Allow you to "step-through" javascript code.

I think point 2 is the cooler of the two. One day on one of my previous contracts, a co-worker of mine showed me this amazing thing - debugger. All you have to do is write "debugger" anywhere on your client side code, and Visual Studio will interpret that line as a breakpoint! When you run your application locally, the code will stop at "debugger", and you can proceed by doing your F8's and F10's as you would expect, and use the Watch tool and everything else to read your variable values, etc. Pretty great, huh?

Here's another quick tip to help in your javascript debugging efforts. Mozilla Firefox has a great built in functionality that does a great job of showing you where your javascript is breaking. Simply load up Firefox, type Alt+Shift+J, and you'll see a debugging window pop up with details on exactly where you javascript code has broke. This is also a very useful tool to use when debugging javascript outside of Visual Studio. I found myself using this quite frequently when doing PHP or ASP Classic.

Anyhow, that's all for today folks. I wanted to write something more technical, but my days have been busy. Hope this helps, and take it from me, embrace the power of the debugger!!!