Visual Studio 2008 JavaScript Debugging

Visual Studio has always offered an impressive debugging environment. From my first experiences with Visual Basic 3 I was hooked on being able to set break points and step through code.

Microsoft continued to improve the debugging experience and in Visual Studio 2008 they have added JavaScript debugging as a first class citizen.

This is great for modern web developers who are expected to roll out AJAX web sites that make heavy use of JavaScript. Previously debugging JavaScript was a case of pumping out alert boxes in code to display variable values – not an enjoyable way to debug by any stretch of the imagination!

So here is an overview of what to expect when debugging JavaScript with Visual Studio 2008.

Setting break points
Setting break points for debugging JavaScript is done in exactly the same manner as setting break points in your code. Clicking the gutter space at the start of the line you wish to break on will place a red dot and highlight the line. When this code is encountered the execution flow will pause at that spot.



Once a break point is hit the usual stepping functionality is available – step through and step into so you can watch the execution flow closely.

The break points that you set will be persistent and exist when you re-open a project where you previously set break points.

Variable evaluation
Resting over a variable while debugging with provide the normal inspection view allowing developers to dig deeper into variables. In this case we can see how long our JavaScript will take to perform a resize function.



Updating values on the fly
Often when debugging you will want to change a value, just to test how the system handles it. Rather than needing to stop, change and restart you can now update a value on the fly while debugging to test new values. In this case we can update our resize time to 25 seconds.



By clicking the value and typing in the new one we can instantly see this reflected. It couldn’t be easier.

Querying with the intermediate window
The intermediate window is a hidden gem in Visual Studio – it’s been there as long as I can recall but I don’t often see other developers making use of this powerful tool.

While debugging, jump into the intermediate window by clicking on the pane at the bottom of Visual Studio. If you don’t see the intermediate window you can bring it into view by pressing CTRL + ALT + I.

Within the intermediate window you can write queries and code that should be executed within the scope of the currently hit break point. This is great when needing to inspect values that are hard to navigate to, type cast and carry out other tasks.



A word for those who want to start debugging with Visual Studio 2008 right away – make sure that you enable script debugging in Internet Explorer. Without enabling it you will get an error about no symbols being loaded and the the break point will never be hit.



I will be the first to admit that I have never been the biggest fan of writing JavaScript – I’ve always felt the tooling support available was poor and I just plain hated trying to debug my scripts. It is great to see that Visual Studio 2008 adds JavaScript debugging. I’m sure there are many other developers like myself who are considerably more happy and comfortable working with JavaScript now.

Download Visual Studio 2008 90 day trial
For detailed information and to request a free 90-day trial DVD of Visual Studio 2008 Team Suite to be sent out to you, go to the Microsoft Visual Studio webpage.

About the Author

John-Daniel Trask is a co-founder of Mindscape, a product development company based in Wellington New Zealand. He also maintains a popular blog about software development and business.

Other related posts:
The Visual Studio 2008 blog is back
Windows Workflow Enhancements in Visual Studio 2008
A completely non-comprehensive introduction to Visual Studio 2008