The Mozilla Web browser provides the best free tools for debugging JavaScript code loaded into the browser. In fact, unless you are using a development environment such as ASP that includes a debugger, Mozilla is indespensible! This article provides an overview and links to detailed information and tutorials.

Table of Contents

1. What are the Options?
2. JavaScript Console Overview
3. Venkman Overview
4. Getting Venkman
5. Other Tools

What are the Options?

For some reason that completely escapes me, considering that JavaScript is so popular, finding a simple straightforward JavaScript debugger is an elusive goal. Microsoft offers a script debugger, but it only works with Microsoft's Web browser Internet Explorer and their Web server IIS. I, however, use the Apache Web server and want to set in all browsers. There is hope though, because Mozilla offers some JavaScript debugging tools. Though far from what I truly expect, Mozilla's tools are useful and do a good enough job, but only work in Mozilla browsers. Still, they do not require that use Microsoft's server.

Mozilla-based browsers have two JavaScript debugging tools available. Mozilla-based browsers include Mozilla, of course, and Camino, Firefox and Netscape. The first tool is the JavaScript Console, which is the one I use the most. It's easy to use and gives detailed basic information sufficient for finding most errors. The second tool is Venkman, a free JavaScript debugger.

JavaScript Console Overview

The JavaScript Console, which I what I use most of the time, in Mozilla-based browsers is a great tool for finding JavaScript errors in a Web page.

To start the console, click Tools»JavaScript Console.

Here we can see that I have an error Error: ewString is not defined. The console also gives me the name of the source file and the line number where the error occurred. Furthermore, if I click the link, the console opens the source file and jumps to the line, highlighting it for me as well.

The console is self explanatory and there is nothing more to say about it, except that you should clear the console before you start debugging, because it could have logged errors from other web sites you have visited, which have nothing to do with your pages and could be confusing. After clearing the console, reload your page to see if there are any errors in your code.

Although the console is extremely helpful, it is limited. There is no true debugging support such as breakpoints, watches, or code stepping. For all that, you need to use Venkman.

Venkman Overview

The Venkman JavaScript debugger is more powerful than the JavaScript Console, discussed in the previous section. Venkman is a tool that runs within Mozilla. To install it, see the next section Getting Venkman.

Venkman offers normal debugging features such as stepping through code and watching variables. I found using Venkman a bit awkward, but it does seem promising. Most of the time, the JavaScript Console in Mozilla was good enough. I do encourage you to try Venkman, though, especially since it appears to be the only JavaScript debugger available.

Click to Enlarge

Getting Venkman

Venkman is free and is easy to install. The installation is a little different from what you may be used to, because the installation uses Mozilla's XPI installer. Please note that you may already have Venkman installed. To verify whether Venkman is installed, and to install it if necessary, follow these instructions.

Is Venkman Already Installed?

Venkman may or may not be installed in your Mozilla-based browser. To verify whether Venkman is installed:

1. In your Web browser, click the Tools menu.
2. If the Tools menu has a Web Development item that contains JavaScript Debugger, then Venkman is installed.

Configure Browser to Install Venkman

To install Venkman, you will need to make sure your browser is configured properly, in order to install Venkman from the installation Web site.

1. In Firefox, go to Tools»Options. The Options window will open.
2. Click Web Features.
3. Click the Allowed Sites button for Allow web sites to install software. The Allowed Sites window will open.
4. Enter "http://www.hacksrus.com/~ginda/venkman/" and click the Allow button.
5. Click the OK button to close the Allowed Sites window.
6. Click the OK button to close the Options window.

Installing and Using Venkman

• Venkman Development Web site
• Learning the JavaScript Debugger Venkman

Other Tools

Although the Mozilla JavaScript Console and Venkman debugger work for me, you may benefit from these other tools.

• Microsoft Script Debugger
• Tito Web Studio JavaScript Debugger