AjaxPatterns
Break, Debug, Deduce, Fix, Inspect, Repair, Step, Test
Devi's scratching her head, wondering why a visual effect is so jerky; instead of growing gradually, the icon transitions from small to large in just a few, erratic, steps. Code analysis is getting her nowhere, so she fires up her Javascript debugger, allowing her to step through the effect in her own time. After adding the box dimensions to a watchlist, she quickly diagnoses the cause as a number-rounding issue.
Diagnose problems with a Javascript debugger. Javascript debugging used to be as sophisticated as adding a few alert messages, but they've come a long way. A tool like the Venkman debugger, a popular Firefox extension, makes the point. Venkman has all the basic features you'd look for in a debugger of any language: breakpoints, call stacks, step in/out/over, watches, error and exception triggers. There's an interactive session that lets you type code for immediate execution and basic profiling support as well.
For basic error reporting, without a custom debugger, use Firefox's built-in Javascript Console, and on IE, switch off the "Disable Script Debugging" options. You can also define window.onerror to show any errors that arise, as the event handler is notified of the error message, URL, and line number. You could then perform “Logging” or create an alert, e.g.:
window.onerror = function(message, url, lineNum) {
alert("Error: '" + message + "'. At " + url + ", Line " + lineNum);
}
Venkman is an open-source Firefox extension with quite sophisticated debugging support, as discussed in the Solution above (Figure 1.101, “Venkmann”). When you open the debugger, it shows a list of Javascript files, which you can then open up to set breakpoints.
Microsoft makes Microsoft Script Debugger available for no cost. It offers basic debugging functions, e.g. breakpoints, a basic call stack, step in/out/over, error triggers (Figure 1.102, “Microsoft Script Debugger”). While not as feature-rich as Venkman, it's still useful for investigating IE-specific bugs. The IE Blog lists several options for IE debugging.
Javascript HTML Debugger is a commercial tool from SplineTech. It's a standalone Windows application with similar functionality to Venkman, but a greater emphasis on ease-of-learning.
