Tools and techniques for debugging Ajax apps

Motivatio

• Issues with building & debugging ASP.NET Ajax Extension sites

• Visual Studio

• Browser tools

• Helper utilities

• Tracing tools

• Modifying requests, analyzing responses

• Writing trace messages

• Assert/Fail

• The big ‘A’ in Ajax makes debugging tricky as deterministic behavior is elusive

• The request/response nature of Ajax applications means tracing data is necessary for debugging. This requires some trace mechanism (not just the browser and IDE)

• Dynamic typing means code is often harder to understand and predict —and the loss of compiler validation complicates things

Why is debugging Ajax apps so hard?

• Asynchrony
• The big ‘A’ in Ajax makes debugging tricky as deterministic behavior is elusive
• Data flow
• The request/response nature of Ajax applications means tracing data is necessary for debugging. This requires some trace mechanism (not just the browser and IDE)
• Dynamic typing
• Dynamic typing means code is often harder to understand and predict —and the loss of compiler validation complicates things

Debugging in Visual Studio 2008

• In the past, debugging JavaScript has been problematic…

• In VS 2008, debugging works as expected —set breakpoints & run!

Viewing downloaded JavaScript in VS 2008

JavaScript debugging in VS 2005

• Support for debugging in Visual Studio 2005 is not as seamless:

1. Enable script debugging in IE
2. Add debuggerkeyword in source to trigger breakpoints
3. Start debugging (F5)

Script exploration in VS 2005

• Visual Studio 2005 also includes a script explorer
• Enable script debugging in IE
• Start debugging (F5)
• Debug menu | Other Windows | Script Explorer
• Double-click to open scripts
• You can set breakpoints & debug as usual
• if command doesn't appear, select Tools | Customize | Debug, then drag Script Explorer command to the menu…

Firefox JavaScript Debugging

• Firefox has built-in support for JavaScript debugging & DOM inspection
• Tools | Error/JavaScript Console
• Tools | DOM Inspector
• Many extensions also available

Firefox JavaScript Console

Firefox DOM Inspector

Firebug script debugger

• Firebug is an extension for Firefox
• Monitors script errors & signals when there is a problem

• Tracking of XMLHttpRequests
• Script debugger with breakpoints
• Inspector / command line
• Source viewer

Fiddler

• HTTP Debugging Proxy
• Monitors all HTTP traffic on a machine through local proxy
• Great way to monitor size of JavaScript downloads…

Web Development Helper

• IE browser extension
• Localhostdiagnostics including ViewStatedisplay, items in cache, application shutdown
• HTTP logging
• DOM inspector
• Rich script error information

ASP.NET Development Helper

Summary

• ASP.NET AJAX Extensions simplify building AJAX-enabled sites
• However, debugging is trickier than traditional POST-back sites
• Asynchronous nature of Ajax
• Dynamic nature of JavaScript
• Visual Studio 2008 offers good support for JavaScript debugging
• Use additional tools for tracing & testing
• Multitude of tools available for IE and Firefox...