Javascript Debugging Tools for AJAX Developers

Now that lots of developers are using "AJAX" (Remote Scripting -- ATLAS, Anthem.Net, MagicAjax, etc.) it becomes more necessary than ever to be able to debug client script in the page, and especially, dynamically injected client script, which is not visible with just "View Source". Here are some suggestions for same.

One of the best tools I have found for looking at client script in a Web page is a little trick with a Favorite (or bookmark).  If you add a new Internet Explorer Favorite or Firefox bookmark with this code in it:

javascript:document.write("<xmp>"+document.documentElement.innerHTML+ "</xmp>");

-- then you can click on this favorite in any page and it will show you the "true" source of the page, including any dynamically rendered client script at the time. HTML DOM afficionados will recognize the <XMP> (example) tag which simply tells the browser, "show this all the way it is, don't try to interpret it".

My favorite has a nice colorful  "key" icon that makes it easy to find in the list of Favorites and it is named, appropriately, "DEBUGJS".

Other tools that will prove to be useful are the Fiddler HTTP Debugging Tool. Fiddler is a very sophisticated debugging and tracing tool that you can bring up from within Internet Explorer. It logs all HTTP traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP Traffic, set breakpoints, and "fiddle" with incoming or outgoing data. Fiddler is designed to be much simpler than using NetMon or Achilles, and includes a simple but powerful JScript.NET event-based scripting subsystem.  You can find out more about what's happening with a web site or web page with Fiddler in five minutes than you can with other tools in an hour or more.

If you need to look at HTTPS headers, then you want RPASpy.


For IE developers, the Internet Explorer Developer Toolbar offers the ability to:

-- Explore and modify the document object model (DOM) of a Web page.
-- Locate and select specific elements on a Web page through a variety of techniques.
-- Selectively disable Internet Explorer settings.
-- View HTML object class names, ID's, and details such as link paths, tab index values, and access keys.
-- Outline tables, table cells, images, or selected tags.
-- Validate HTML, CSS, WAI, and RSS Web feed links.
-- Display image dimensions, file sizes, path information, and alternate (ALT) text.
-- Immediately resize the browser window to a new resolution.
-- Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
-- Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.
-- Display a fully featured design ruler to help accurately align and measure objects on your pages.

Finally, if you want to break into the Visual Studio debugger to debug client script, you need to uncheck the two "Disable Script Debugging"  checkboxes in IE's Tools/Internet Options/Advanced section.

At this point you should be able to set Visual Studio breakpoints in a client script block and get full deibugger support. You can also add the javascript "debugger;"  statement in your client script to break into the debugger. The ability to look around the DOM data structures with the Watch window in Visual Studio 2005 is great!

And, last but not least, don't forget that when the debugger is running in Visual Studio 2005, you can view the Script Explorer window!

Hi,

Do you have any idea to set and access the cookies across multiple domains using javascript?

I am using jquery.js.

Thanks,

Nagaraj

Do you have any idea on Google account cookie is being used by youtube?

Is there anything to do with server side code.

Hi Peter,

I'm trying to debug a .js file with microsoft script debugger tool. I get the pop up for asking "Do you want to debug?" with options yes and no. When i clicked yes, it dont give me the source of the page and hence i cant debug the .js

I've verifed that Disable Script Debugging options in the Advanced of Tools of IE are unchecked.

I also reinstalled the microsoft debugger. But it didnt solve the problem i'm facing.

Please advice.