Section 18.2. Debugging

18.2. Debugging

Break, Debug, Deduce, Fix, Inspect, Repair, Step, Test

Figure 18-3. Debugging

18.2.1. Developer Story

Devi is scratching her head, wondering why a particular 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, which allows 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.

18.2.2. Problem

How can you diagnose errors and strange behavior?

18.2.3. Solution

Diagnose problems with a JavaScript debugger. JavaScript Debugging used to be as sophisticated as adding a few alert messages, but it has come a long way. A tool such as the Venkman debugger (http://www.mozilla.org/projects/venkman/), 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, and error and exception triggers. Also, an interactive session lets you type code for immediate execution as well as basic profiling support.

To Debug or Not to Debug?

That is the question many developers have asked over the years, with many deciding that there are often more productive things to do. The main problem with Debugging is that you have to invest time setting up breaklists and watches and thinking up strategies for diagnosis, yet 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 watchesas Venkman lets you dothey 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 yourself and your team.

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

18.2.4. Tool Support

18.2.4.1. Venkman

Venkman (http://www.mozilla.org/projects/venkman/) is an open source Firefox extension with quite sophisticated Debugging support, as discussed in the preceding Solution (Figure 18-4). When you open the debugger, it shows a list of JavaScript files, which you can then open to set breakpoints.

Figure 18-4. Venkman

18.2.4.2. Microsoft Script Debugger

Microsoft makes Microsoft Script Debugger (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/sdbug/Html/sdbug_1.asp) available for no cost. It offers basic Debugging functions, e.g., breakpoints, a basic call stack, step in/out/over, and error triggers (Figure 18-5). While not as feature-rich as Venkman, it's still useful for investigating IE-specific bugs. The IE Blog (http://blogs.msdn.com/ie/archive/2004/10/26/247912.aspx) lists several options for IE Debugging.

Figure 18-5. Microsoft Script Debugger

18.2.4.3. JavaScript HTML Debugger

JavaScript HTML Debugger (http://www.htmldebugger.com/javascript_debugger/javascript_debugger.asp) is a commercial tool from SplineTech. It's a standalone Windows application with functionality similar to Venkman but a greater emphasis on ease-of-learning.