Debugging AJAX/Javascript for IE and Firefox with Visual Studio .NET

The title of this article is slightly inaccurate, because it implies that both IE and Firefox AJAX/Javascript debugging can be performed directly within Visual Studio .NET. That is not exactly the case. While it is easy to set up AJAX/Javascript debugging with IE and Visual Studio .NET; and while it is easy to use Firefox as your .NET debugging browser with Visual Studio .NET; if you specifically want to debug Javascript for Firefox while using Visual Studio .NET, you have to add a Firefox Javascript debugger.

Let's describe the scenario in more detail, and then discuss the three major activities to get IE and Firefox debugging working with Visual Studio .NET.

A. Scenario
B. Setting Up Javascript debugging for Internet Explorer (and Visual Studio .NET)
C. Redirecting the default browser in Visual Studio .NET between IE and Firefox.
D. Setting Up separate Javascript debugging for Firefox (using venkman).

*****

A. Scenario
1. You want to do an AJAX call from your Javascript in an html page, to an ASPX page that is sending back simple XML (REST protocol, not SOAP).
2. Therefore, you begin by creating a Visual Studio .NET project and creating an ASPX page that sends out XML. (How? That's outside the scope of this article. For examples, download the sample projects for the book "Ajax in Action" (Manning)).
3. You then create an html page in the same project, and write AJAX-style Javascript to call the ASPX page. (Again, outside the scope of this article. Again, consult the "Ajax in Action" sample code).
4. When you run the project, you can set breakpoints in your .NET code and debug the .NET code as usual.
5. However, what if you have Javascript bugs? How do you set breakpoints and debug these Javascript errors?
6. Also, since different browsers use different versions of Javascript and the DOM, you need to be able to debug Javascript not only in Internet Explorer, but also in Firefox. How do you do this?

B. Setting Up Javascript debugging for Internet Explorer (and Visual Studio .NET)

Debugging your Javascript code from Internet Explorer is extremely simple--the functionality is already there, it is simply disabled by default.

To enable IE Javascript debugging:
1. Launch Internet Explorer.
2. From the Tools menu, click Internet Options...
3. In the Internet Options window, select the Advanced tab, and then uncheck Disable Script Debugging.
4. Now relaunch Visual Studio, and put two breakpoints: one in your Javascript code, one in your .NET code.

When you run the project, both breakpoints can now be reached. However, what if you now want to perform the same debugging with Firefox and Visual Studio .NET?

C. Redirecting the default browser in Visual Studio .NET between IE and Firefox.

To get Visual Studio .NET to launch Firefox as your default browser, instead of IE, you need to do the following:
1. In the Solution Explorer, right-click on your HTML or ASPX page and click Browse With. (You can also access Browse With from the File menu when an HTML or ASPX page is currently loaded in the main window of Visual Studio .NET).
2. In the Browse With dialog box, select Firefox, click Set as Default, and then click Close.
3. Now, set a breakpoint in both your Javascript code and your .NET code.

What happens? Firefox launches as the browser, and the .NET code breakpoint is reached, but the Javascript breakpoint is ignored.

D. Setting up separate Javascript debugging for Firefox (using venkman).

Visual Studio .NET does not recognize the Javascript breakpoints when Firefox is the default browser. However, you can get around this by installing a Firefox extension for a Firefox Javascript debugger. In our case, we'll use venkman.

To install the venkman extension
1. Google "venkman" to locate the installer.
One current location as of the time of this writing is: https://addons.mozilla.org/extensions/moreinfo.php?id=216
2. Make sure you select the version that corresponds to your version of Firefox, then proceed to install the extension.
3. Restart Firefox.

Now you're ready to put it all together: running Firefox as the default browser in Visual Studio .NET, accessing your .NET code breakpoints with Visual Studio .NET, and accessing your Javascript breakpoints with Venkman.

Tying it all together
1. From Visual Studio, set a .NET code breakpoint (but not a Javscript breakpoint).
2. Verify that you have selected Firefox as your default browser.
3. Run the project.
Firefox will launch.
4. In Firefox, from the Tools menu, click Javascript Debugger.
Venkman Javascript debugger launches. The debugger displays a number of subwindows, including Loaded Scripts, Local Variables,Breakpoints, and the Source Code window.
5. In the Loaded Scripts window, double-click the HTML page or ASPX page to load it. (Or, if you wish to set a breakpoint in a related Javascript, double-click the related script instead.)
6. In the Source Code window, right-click on the line of code that you wish to set a breakpoint and click Set Breakpoint.
7. Now, return to Firefox and perform an action (such as a button or link click) to trigger the Javascripts in the page.

The end result? You should now be able to hit both the Javascript breakpoints (in venkman) and the .NET breakpoints (in Visual Studio .NET).