Sams Teach Yourself JavaScript in 24 Hours

Basic Debugging Tools

If checking your script for common mistakes and obvious problems doesn't fix things, it's time to start debugging. This is the process of finding errors in a program and eliminating them. Some basic tools for debugging scripts are described in the following sections.

Firefox's JavaScript Console

The first thing you should do if your script doesn't work is check for error messages. In Firefox and other Mozilla-based browsers, the messages are not displayed by default, but are logged to the JavaScript console.

To access the console, type javascript: in the browser's Location field or select Tools, JavaScript Console from the menu. The console displays the last few error messages that have occurred, as shown in Figure 16.1.

Figure 16.1. The JavaScript console displays recent error messages.

[View full size image]

Along with reading the error messages, you can use the console to type a JavaScript command or expression and see its results. This is useful if you need to make sure a line of your script uses the correct syntax.

Displaying Error Messages in Internet Explorer

Microsoft Internet Explorer 4.0 and later do not display JavaScript error messages by default. This can make browsing poorly written pages a more pleasant experience, but it can be frustrating to JavaScript programmers.

To enable the display of error messages in Internet Explorer, select Internet Options from the Tools menu. Select the Advanced tab. In the list under Browsing, deselect the Disable Script Debugging option and enable the Display a Notification About Every Script Error option.

If you haven't enabled the display of error messages, Internet Explorer still displays an error icon on the status line when an error occurs. You can double-click this icon to display the error message.

Alert Messages

If you're lucky, the error messages in the console will tell you how to fix your script. However, your script might not generate any error messages at allbut still fail to work correctly. In this case, the real debugging process begins.

One useful debugging technique is to add temporary statements to your script to let you know what's going on. For example, you can use an alert statement to display the value of a variable. After you understand what's happening to the variable, you can figure out what's wrong with the script.

Using Comments

When all else fails, you can use JavaScript comments to eliminate portions of your script until the error goes away. If you do this carefully, you can pinpoint the place where the error occurred.

You can use // to begin a single-line comment, or /* and */ around a section of any length. Using comments to temporarily turn off statements in a program or a script is called commenting out and is a common technique among programmers.

Other Debugging Tools

Although you can use alert messages and a little common sense to quickly find a bug in a simple script, larger scripts can be difficult to debug. Here are a few tools you might find useful as you develop and debug larger JavaScript applications:

• HTML validators can check your HTML documents to see if they meet the HTML standard. The validation process can also help you find errors in your HTML. The W3C has a validator online at http://validator.w3.org/.

• Mozilla's JavaScript debugger enables you to set breakpoints, display variable values, and perform other debugging tasks. You can download the debugger at http://www.mozilla.org/projects/venkman/.

• Microsoft Script Debugger is similar, but works with Internet Explorer. It is available at http://msdn.microsoft.com/library/en-us/sdbug/Html/sdbug_1.asp.

• Although text and HTML editors are good basic editing tools, they can also help with debugging by displaying line numbers and using color codes to indicate valid commands.