Debugging Javascript on a Live site - Fun and Games

I was discussing debugging of Javascript on one of the ASP.NET Ajax forums recently and thought I'd share how I go about it, as you'd be surprised how many people are unaware of this capability.

Note: This only discusses getting the debugging process going, not other debugging techniques such as using tools like Fiddler and others...

Scenario:

A site is experiencing a Javascript error (ie. some alert box in Internet Explorer) and you need to fix it, or some other script related issue.

The site is live.

Approach:

I want to load the site up in Visual Studio 2005 and use its script debugging capabilities to try and nut out the issue.

Pre Requisites:

In internet explorer, you must have the following options/settings unchecked:

You can uncheck both the DIsable Script Debugging options from the Tools --> Internet Options menu selection, then select the Advanced Tab.

Method:

Load up Visual Studio 2005, create a new Web site. Edit the properties page of the site (right click on the website project in the solution explorer window, and select properties.

Select the 'Start Options' in the left pan, and choose the 'Start URL' option in the right pane.

Enter the URL of the site and/or page you wish to debug.

Start a debugging session by hitting F5 or pressing the play button.

When the browser is open, select the Debug' --> Windows --> Script Explorer option in Visual Studio.

You will then see a window that lists out all the scripts that have been loaded by this page, including the page itself. This window will also include any scripts loaded via a WebResource call.

Now here is the tricky bit (well ok, more tricky....). If you double click on one of the entries in the window, you should see the relevant script in the content editor window. You can then place breakpoints, inspect variables and almost all the debugging goodness that goes with server side debugging. Visual Studio does have some quirks though, in that sometimes double clicking on an entry does not reveal the script. You often need to double click on another entry (usually the page is best), then double click on that entry again, or double click on some other entry, then back on the entry you originally wanted. Basically, you need to do the "double click dance". I told you its tricky, but unfortunately VS.Net does not always play well. The rewards are worth it though. Once your script is displayed, you can use all the debugging features that you are used to, making it much easier to find those errors. Although, sometimes the timing of script loading can get even more tricky.

Happy debugging....