A Brief Look at JavaScript - Web Development and Design Foundations with XHTML - page 539

Practice with Debugging

Sometimes your JavaScript code does not “work” the first time you test it. When this
happens you'll need to debug the code—find the errors and correct them.

Let's look at a debugging technique. Edit the JavaScript alert to introduce a typing mis-
take as follows:

aalert("Welcome to my web page!");

Save the file and view it in the browser again. Notice that the alert box does not display
this time. Firefox will point out some errors in JavaScript code, but we need to open the
Error Console to see them.

In Firefox, select the menu items Tools, Error Console. The Error Console window will
open and the error message will display, as shown in Figure 14.9.

Figure 14.9
Firefox Error
Console displaying
error

Notice that the error is displayed, along with the line number where the error was
detected. It's useful to create your documents in a text editor that displays the line num-
bers, but it's not necessary. If you are using Notepad, make use of the Go To feature in
the Edit menu. This will allow you to specify a line number and the insertion point will
be positioned at the beginning of that line.

Edit the alert.html file to correct the error and test it in the browser again. This time the
alert box should display after the first heading, as we saw previously.

FAQ

Will the Error Console display all of the errors in my JavaScript
code?

It will display the syntax errors, which include things like missing brackets and items it does not
recognize. Sometimes the error is above the line indicated, particularly if there is a missing
bracket or quote. The errors displayed indicate that there is something wrong and they serve
as a guide to where the error might be. Start by looking at the line indicated, and if that line
looks correct, look at the lines above it.