From Ajax Patterns

Evidence: 1/3

Tags: Break Debug Deduce Fix Inspect Repair Step Test

Contents 1 Technical Story 2 Problem 3 Solution 4 Tool Support 4.1 Venkman 4.2 Microsoft Script Debugger 4.3 Javascript HTML Debugger 4.4 Firebug 4.5 ajaxMonitor

Technical Story

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.

Problem

How can you diagnose errors and strange behaviour?

Solution

To debug or not to debug? That is the question the agile community has asked in recent years, with many developers concluding it's rarely worth the effort (e.g. [1]). The main problem with debugging is that you have to invest time setting up breaklists and watches and thinking up strategies for diagnosis, but all of that is thrown away after the problem's solved. The same problem might arise later on, and you'll have to set it all up again. Even if you can save breakpoints and watches - as Venkman lets you do - these things are often too fragile to be useful. Whereas if you can create a unit test to check the same thing, or introduce a log message to monitor state, you'll have created a permanent asset for you and your team.

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 Venkman 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);
  }

Tool Support

Venkman

Venkman is an open-source Firefox extension with fairly sophisticated debugging support, as discussed in the Solution above. When you open the debugger, it shows a list of Javascript files, which you can then open up to set breakpoints.

Microsoft Script Debugger

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. While not as feature-rich as Venkman, it's still quite useful for investigating IE-specific bugs. The IE Blog lists several options for IE debugging.

Javascript HTML Debugger

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.

Firebug

Firebug is also a Firefox extension. Think of it as a much improved Javascript console meets Venkman. It also has the ability to log Ajax requests.

ajaxMonitor

In-page monitoring of Ajax requests/response. No context switching when debugging tough Ajax requests.