Originally published on my old Charteris blog

I am back developing and debugging ASP.NET AJAX (Atlas) code again and I am trying to remember previous debugging techniques.

For line-by-line debugging I still use Firebug when debugging Firefox and Visual Studio 2005 to debug IE6 and 7. Don't write off the VS debugging experience, I know I did for a while and I regretted it, it is great. Occasionally it will add an extra breakpoint at some random location when you try and set a breakpoint but it will add the one you wanted too. The key to debugging on VS2005 for me was the Script Explorer window and it is found at Debug|Windows|Script Explorer. This window lists all the running scripts that the currently attached IE process has loaded, it is from this Window and the items in it that I set my breakpoints.

Script Explorer in action

 

Anyway onto the point of this post, as well needing to be able to line-by-line debug an AJAX component you will need to be able to dump out messages as code is running. Firebug comes with the very useful console.log() and console.dir(). console.log takes a string and outputs it to the FireBug console and console.dir() will reflect over a passed in object and give you a display of the object graph of that object. The trouble these methods are Firebug specific, now there is a small script file for IE that can map these functions to stop undefined function exceptions but there is a better way.

ASP.NET AJAX ships an extensive client side library and abstracts away many of the cross-browser "Which DOM API shall I use" concerns and debugging is no exception. The Sys.Debug class provides us with assert and fail functionality but it is the trace methods that I am keen to highlight today.

  • trace - If this is called from script running in a browser that has a console.log function available it will call that else it will look for a TextArea element called
  • traceDump - If this is called from script running in a browser that has a console.dir function available it will call that else it will look for a TextArea element called TraceConsole and dump an non-interactive, immediate ancestor's only object graph
  • clearTrace - This clear the relevant trace output area be that the Firebug console or the TextArea

 

The TextArea with the magic name of TraceConsole is really only used when you don't have access to Firebug which in my case is in IE6 & 7. Therefore I have this script running in my page

if (Sys.Browser.agent==Sys.Browser.InternetExplorer){
                var ieDebugConsole = document.createElement("textarea");
                
                ieDebugConsole.setAttribute("rows", "10");
                ieDebugConsole.setAttribute("cols", "80");
                ieDebugConsole.setAttribute("id", "TraceConsole");
                
               $get("idOfSomeParentElement").appendChild(ieDebugConsole);
}

This will create the TextArea when needed.