SolutionBot

Javascript Debugging Part I (Visual Studio + IE)

Debugging is something that all mortal programmers must do. Any programmer who claims that his code is perfect the first time he writes it is #1 Lying #2 A legendary immortal Greek god of Programming. I for one am not a legendary immortal Greek god of Programming so I need methods to debug the code that I write. In this article, I’ll be talking about methods of debugging Javascript in Visual Studio and Internet Explorer. Part II will be debugging Javascript in Eclipse and Firefox.

Bugs

There are two types of bugs.

1. Errors: These are the mean little guys that cause popups that tell you that there’s a problem in your code.
2. Unexpected Output: These guys are even harder because you don’t get any popups, the output that you receive is just wrong.

So what do we do about javascript bugs?

alert(variable);

AAGH!, there are much better ways to debug your code!

Prerequisites

The first thing you will need is Visual Studio. If you currently do not have a version of Visual Studio you can download Visual Studio Web Developer Express addition from here for free (?? free?? Microsoft??). Next you will need to set up your Internet Explorer to enable script debugging (its turned off by default) by going to ‘Tools -> Internet Options -> Advanced’ and un-check the ‘Disable Script Debugging’ check boxes.

Debugging

So now we’re good to go. So lets give it a test run. Here’s a snippet of code we can play around with. Notice the ‘debugger;’ keyword.

 
<script type="text/javascript">
 
function test()
{
	debugger;
	var i = 0;
	var string1 = "foo bar baz";
	var string2 = "";
	for (i=0; i<string1.length; i++)
	{
		string2 += string1.substr(i, 1);
	}
 
	alert(string2);
}
</script>
<input onclick="test()" value="test" type="button" />

The ‘debugger;’ keyword isn’t a javascript keyword, but rather a proprietary IE command that tells IE to ask Visual Studio to handle Javascript execution.

When we open the page up in IE and click the ‘test’ button IE stops at the ‘debugger;’ and asks what instance of Visual Studio we would like to use to debug the javascript code. Typically we will select the already opened instance of Visual Studio. When we do this, the javascript execution data is sent to Visual Studio and we notice a yellow arrow pointing to the current position of our code execution. We can step through the code by pressing F10.

Something to notice is when we hover over variables, a tool tip pops up and shows the value of the variable. If we want to get information from a function we can highlight the function then right click on it and click ‘QuickWatch’. We can then see the value and change variables or even switch to different functions and see what they would evaluate to in the current scope of the executed code.

Another feature is the Watch window at the bottom of the screen. The Watch window is a handy tool we can use to watch how a variable is changing as we execute our code. Simply highlight the variable or expression, right click and click ‘AddWatch’ and it will add that variable or expression to the Watch window.

Conclusion

There are plenty of other things I havn’t touched on such as putting your ‘debugger;’ statement in an ‘if’ statement, but this should get you started. Javascript debugging can save you a ton of time and is much more elegant than constantly using ‘alert’ functions.

Thursday, July 3rd, 2008 at 4:10 pm and is filed under Browser Development, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.