If you are using ASP.NET Ajax and you are having problems with a web page one quick and dirty way to debug it is to add tracing statements. You do this by using the "Sys.Debug.trace" function. For example:

   1: <script language="javascript" type="text/javascript">
   1:  
   2:     function PositionDiv() {
   3:         Sys.Debug.trace("Entering PositionDiv Function");
   4:         //some other code
   5:         Sys.Debug.trace("Exiting PositionDiv Function");
   6:     }
</script>

In order to see the trace output you need to add a TextArea tag into the page and give it an id of "TraceConsole". This limits the usability of tracing, since once the application is deployed it would mean that the TextArea must be manually added to see the output. However, traces are also written to the Output window of VisualStudio when debugging a web site as well as the FireFox's output console, which is definitely more useful.

One of the nice things about trace is that you can leave the trace calls in your debug scripts, so that if a problem occurs in a production server you can flip to debug scripts and analyze the trace output.

The Sys.Debug class has a lot of other nice methods, for example:

  • assert: If the condition being tested is false, a message box will be used to display a message.
  • fail: Causes the program to stop execution and break into the debugger.
  • traceDump: Output an object's data in a readable format.

Federico Silva Armas
SDET, ASP.NET QA Team