11.1. The Problem

Debugging JavaScript code has traditionally been very difficult. For a long time, browsers had little or no support for JavaScript developers. Early editions of Safari had no JavaScript console and Opera only added a console after version 8. Firefox included a JavaScript console in version 1.0 but had no built-in support for anything other than outputting JavaScript messages. Internet Explorer, as of version 7.0, still has no JavaScript console, relying solely on pop-up error messages when something goes wrong.

With these tools, or lack thereof, most developers resorted to an age-old way of debugging: calling alert() at various spots in the code. This was useful for determining if code execution reached a certain block of code or to figure out the value of a particular variable. Of course, this is not an optimal solution since it interrupts the flow of code. Given the loosely typed nature of JavaScript, the lack of debugging tools stymied the growth of JavaScript solutions. It wasn't until true JavaScript debuggers arose that developers were able to build more extensive applications.

Microsoft introduced the Microsoft Script Debugger, which was a free add-on utility for Internet Explorer. It was a simple program that could intercept JavaScript errors and open up the offending code in a text viewer. Script Debugger also displayed the call stack, but beyond that, had little more to offer. Microsoft did follow this up by allowing Visual Studio to interact with Internet Explorer as a JavaScript debugger along with introducing the Microsoft Script Editor (packaged with Microsoft Office 2003 or later). These two tools had much more useful JavaScript debugging mechanisms, including support for watches and a command line interface to the JavaScript being executed.

An extension called Venkman brought powerful debugging capabilities to Mozilla, and later, to Firefox. Venkman (available at www.mozilla.org/projects/venkman/) began the evolution of standalone JavaScript debuggers for Firefox, supporting many features typically seen in expensive IDEs. Though a bit sluggish, Venkman works seamlessly with Firefox and includes watches and a command line interface.

For these two browsers, JavaScript debugging was much easier, allowing you to step through code line by line. This worked great until Ajax became a popular form of programming. Stepping through code couldn't solve the majority of problems you encounter in Ajax because of the asynchronous nature of the code. Further, code execution can fork based on information received from the server.

Suddenly, the JavaScript debuggers that web developers depended on were no longer useful. Errors occurred because the server returned unexpected information, and with no tools to help, it was back to using alert() statements for Ajax debugging. Traditionally, JavaScript debuggers cared only about what was happening on the client. Now, they had to know two more important pieces of information: the data being sent to the server and the data being received from the server. Ajax development was slowed significantly until a new crop of tools emerged.