IE Javascript Debugging With Visual Studio Express: A Visual Guide

JavaScript
1

Javascript Debugging With Visual Studio Express: A Visual Guide

Introduction

First off, please forgive the “Visual” puns, that wasn’t really intended… The Visual Studio Express Editions are free trimmed down versions of the standard Visual Studio Series products. This guide focuses on Web Developer Express edition. This method of debugging, while rather hackish, still proves to be an excellent way to debug your scripts for IE. Overall I find this the easiest approach to Javascript debugging for IE.

Before Starting

There are a couple of conditions that need to be met before this all can work. First off you need Visual Studio Web Developer Express, which is version 2008 of this writing. To download Web Developer Express, visit the following site:

Web Developer Express (hereon referred to as WDE) will open whatever browser is set as default to debug sites. That said, you will need IE to be the default browser for your development session.

You’ll need to ensure that script debugging is enabled in IE, by going to Tools->Internet Options, Advanced tab, and de-selecting the Disable Debugging checkboxes:

You’ll need to restart IE after this. Finally, here is the code that will be used to trigger a javascript error:

<html>
<head>
<title>Array Test</title>
<script>
function displayItems()
{
        var list_items = document.getElementsByTagName('li');
        for ( var i = 0; i <= list_items.length; i++)
        {
                var current_item = list_items[i];
                alert(current_item.nodeName + ' ' + current_item.innerHTML);
        }
}

window.onload = displayItems;
</script>
</head>
<body>
<ul>
        <li>Testing 1</li>
        <li>Testing 2</li>
        <li>Testing 3</li>
</ul>
</body>
</html>

The issue in the code is an off by one error with the counter variable, which will cause certain values to be null. Now then, time to get started.

Preparing Debugging

Normally with WDE, you’re expected to have a full ASP site to work with. In the case of javascript debugging, that’s not really needed. So we’re going to to create a blank website, then do a couple of tricks to get our debugging done. First, create a new website:

Then select an Empty Site, and tell it to exist on the local file system, as this won’t need any uploading to ftp or posting to HTTP servers with frontpage extensions:

This leaves us with a brand new empty site. Now comes the trick part.

Starting Debugging

We’re going to start a debugging session. From the debug menu we want Start Debugging:

The first time that debugging is done, WDE looks for a file, Web.config to check for debugging settings in there. As our site is blank, it will offer to create a Web.config file with debug settings:

Go ahead and confirm. Now a new browser window will popup. If the browser is not IE, you’ll need to stop debugging from the debug menu and set IE as the default browser. If you don’t, IE scripting won’t be debugged. Right now your browser will be pointing to the local ASP Development server. All that needs to be done here is point to our page we want debugged, http://www.site.com/js_test.html for example.

When IE throws an error, WDE will pick it up and bring focus, giving you an error:

Pressing Break will give you access to the main screen:

There you have it, the line in question is highlighted, so you know exactly where IE is choking at.

Conclusion

That’s it for this rather basic guide. Hopefully it will help those of you trying to figure out why IE doesn’t like your javascript. If nothing else, this will at least give an idea of what code to post to get your issue resolved.