Debugging ASP.NET AJAX

Debugging javascript

Debugging an ASP.NET AJAX application presents its own issues. It is not the classic debugging process, because here, our code is hosted within a browser (in other words, the code is interpreted by another process). So first, we must configure our browser to enable script debugging. This is not a big thing to accomplish, just open Internet Explorer, select tools, Internet Options, and then the Advanced tab. There, you should seek for a checkbox names Disable Script Debugging (Internet Explorer). Clear it, and script debugging is enabled. Clear the other one with the same name and you can debug client script in other browser, too.

There is a little problem yet. You will notice it when you start browsing whatever site you would like. A pop-up window will constantly shows up, and informs you about the found script errors on a given page. This behavior cannot be turned off, so you should only enable script debugging, when you are debugging, otherwise you can debug the whole Internet.

With client-side script debugging enabled, you can set breakpoints in javascript code, read the values of your variables at runtime, etc. If you take a look at your page when doing client-side script debugging, you will see that you are working with the rendered HTML page, so you won’t see any <asp:something> tags, but rendered HTML code. Because HTML is stateless, there would be no point in modifying the variable values when debugging. This is a necessary constraint in client-side script debugging, so be aware of it.

Attach to script

Attaching to a running script is easy. Just use Visual Studio’s (note that Express editions cannot attach to processes) Attach to Process, and select the script you’d like to attach to. You can narrow the available processes considerably if you look only for Script processes (in the Category column).

AJAX Debugging

There are a number of reasons why debugging AJAX-enabled applications is problematic. I think everybody can imagine them, so let’s just focus on the solution. There are a couple of ways to help on ourselves, for example:

  • Enable debugging in the web.config
  • Use tracing on the server
  • Use Sys.Debug for debugging and tracing
  • Enable debugging in the browser
  • Attach to the browser process with Visual Studio
  • Use external tools to examine HTTP traffic, such as Fiddler

Simply setting the compilation debug attribute to true in the web.config forces ASP.NET to use the debug version of its AJAX library.

Sys.Debug

The most important way to talk about here is the Sys.Debug javascript namespace. With it, you can implement debugging and tracing behavior in client-side scripts. Let’s start with tracing! You can show client-side trace information two ways. The easy way is to use Visual Studio’s (being attached to the script process) Output window to view trace information. The slightly harder way is to define a textarea with the id of TraceConsole. Some browser (Firefox, Opera, Safari) include debugging console, in which trace information will appear.

So we’ve set up our tracing console, now we need some tracing information!

Sys.Debug methods
assert(condition, message, displayCaller) Checks for the specified condition. If it’s false, displays the message, and prompts to a break in the debugger.
clearTrace() Clears all trace information from TraceConsole.
traceDump(object, name) Dumps an object to the debugger console, and TraceConsole.
fail(message) Displays a message in the debugger console, and then breaks.
trace(text) Inserts the text into the debugger console and TraceConsole.

Above are the methods of Sys.Debug which allows you to output client-side script debugging and tracing information to a debugger, or the so called TraceConsole.

Advertisements

Tags: , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: