Rob Chartier ~ Contemplation...

.NET, C#, Work, etc.

News






www.flickr.com
This is a Flickr badge showing public photos from Rob & Kat Chartier. Make your own badge here.


Even Quicker Links

Debugging Javascript (Atlas, Ajax)...

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

 

Posted: Oct 06 2005, 11:04 AM by Rob Chartier | with 13 comment(s)

Comments

Rob Chartier said:

Forgot to mention, with IE you can actually hook the script debugger onto any page you want, not just localhost.

Make sure the "Disable script debugging" is not checked as I indicate in the post above.

Launch IE and navigate to the page you need to debug.

Then, in VS.NET go to Tools, Debug Processes.

In the "Available Processes" section you should see "IExplore.exe" with the given "Title" of the page you need to attach too.

Click the "Attach" button.

Uncheck everything, and make sure that "Script" is checked in the "Attach to Process" dialog that pops up and then hit OK and then close the main "Debug Processes" window.

In the "Running Documents" window you should see the list of scripts that the page has, open any and set breakpoints as usual.

-Rob

# October 6, 2005 2:21 PM

Ron Buckton said:

Also, if you have "disable script debugging" unchecked you can type "javascript:debugger;" in the address bar to launch the debugger of your choice (script debugger, VS, etc.) for the script on the specified page.

The "debugger" keyword anywhere in javascript code will fire a "debugger launch" condition that you can attach to.
# October 6, 2005 2:23 PM

Wilco Bauwer said:

Please also take a look at Nikhil Kothari's excellent WebDev Helper: http://www.nikhilk.net/WebDevHelperDebuggingTools.aspx. It integrates with IE and gives you lots of insight into client-side related things, such as styles, script errors, etc.
# October 6, 2005 3:00 PM

Rob Chartier said:


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

http://www.fiddlertool.com/Fiddler/help/http/HTTPPerf.mht">http://www.fiddlertool.com/Fiddler/help/http/HTTPPerf.mht

http://www.fiddlertool.com/Fiddler/help/
# October 6, 2005 3:03 PM

Michael Schwarz said:

Only for your information: if you are installing the Visual Web Express edition JavaScript debugging will be disabled. You cannot enable the JavaScript debugging be settings these checkboxes to the correct value, you have to remove the express edition and re-install VS.NET.
# October 6, 2005 3:47 PM

Michael Schwarz said:

See http://weblogs.asp.net/mschwarz/archive/2005/10/06/426816.aspx, Ajax.NET and Atlas debugging methods.
# October 6, 2005 4:03 PM

Radhakrishna M V said:

The Javascript Console in Firefox (Tools > Javascript Console) is also useful for debugging Javascript.
# July 25, 2006 9:58 AM

Tim Down said:

An alternative to the Microsoft and Firefox debuggers is log4javascript (http://www.timdown.co.uk/log4javascript), which is a log4j-esque logging framework useful for cross-browser debugging since it works in all major, relatively recent browsers (Mozilla, IE5+, Opera 7.5+, Safari 1.2+, Konqueror 3.4+).
# November 4, 2006 11:50 AM

Andrew said:

Tito Web Studio is another tool for debugging and profiling Internet explorer. It can trace any dynamically loaded JavaScript as well as anonymous  functions, which is very important to AJAX style JavaScript.

# March 16, 2007 12:49 PM

Anonymous said:

Ok, I am not getting it to work.  Maybe it's because the JavasScript I'm trying to debug is not in an .aspx but in a control .ascx?  Does that matter?

I attached to the IE process and page name, but of course no debug points can be set in the .ascx.  I assume that if any JavaScript is invoked it just goes right to that spot in VS?

Maybe it's just not calling my JavaScript...will check again.

# August 22, 2007 11:54 AM

TrackBack said:

# February 18, 2008 12:29 PM

Artiom said:

SplineTech JavaScript HTML Debugger is the best standalone (plug-in free) javascript debugger IMO.  Especially irreplaceable for for AJAX debugging.

www.javascript-debugger.com

# March 3, 2008 4:02 AM

ayound said:

JSDT(Javascript Debug Toolkit) is a open source eclipse plugin used to debug javascript cross browser， jsdt can used in IE ,FIREFOX ,SAFARI,CHROME browsers and so on.

code.google.com/.../newFeatures

jsdt.googlecode.com/.../debug.gif

# November 25, 2008 8:49 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)