So you want to debug some Javascript? 

There are two solutions that you can currently use, the first integrates nicely into VS.NET and IE and the second into Firefox.

The IE Solution:

IE and VS.NET both ship with nice javascript debugging support; here is the simple steps to get it to work:

1. Turn off "Disable script debugging".  In IE go to Tools, Options, Avanced Tab and in the "Browsing" section make sure that "Disable script debugging" is NOT checked.  Accept that change.

2. Open up VS.NET into your favorite solution, which of course includes some javascript markup.

3. Run the solution.

4. Once the project is ran, and the IE window is open jump back over to VS.NET. 

5. Under the Debug menu, Windows, choose Running Documents.  This should show a window on the right side with a list of the running documents.  It should show the aspx page any any .js files you have included.  Open up any of the .JS files and set breakpoints in your code. Once the script is executed it should stop at your breakpoints and give you all the current watch funcationality that you have come to expect from VS.NET.

The Firefox solution:

Mozilla has a project named "Venkman" just for debugging.

Here is what I did in order to get this to work:

1. Install the extension from http://www.hacksrus.com/~ginda/venkman/.  Note: In order to get Firefox to actually install this you need to add the "hacksrus.com" to your trusted sites.  I dont trust this guy so what I did was right click the XPI and saved it to my desktop.  From there you can click and drag it into a Firefox window which it will then install it.  Also, remember that an XPI is just a zip file with a bunch of content.  Feel free to rename the .XPI file to a .ZIP and take a peek whats inside.

2. Once you have the extension installed you will need to recycle the browser, do so now.

3. Open up the Javascript debugger.  It can be found under Tools, Javascript debugger.

4. Open up the page you need to debug and set a breakpoint wherever you like.  It also supports things like stepping over, into and out.

Resources:

Debug JavaScript in ASP.NET Apps

Venkman Homepage

Venkman Extension Installer page

Learning the Javascript debugger Venkman (an awesome usage guide)

Venkman FAQ

1 Comment

• Rob Chartier said Thursday, October 6, 2005 12:03:00 PM

  
  Fiddler is another tool which I use to help, here are some links...
  
  
  http://www.fiddlertool.com/Fiddler/version.asp
  
  http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwebgen/html/IE_IntroFiddler.asp
  
  <a target="_new" href="http://www.fiddlertool.com/Fiddler/help/http/HTTPPerf.mht">http://www.fiddlertool.com/Fiddler/help/http/HTTPPerf.mht
  
  http://www.fiddlertool.com/Fiddler/help/