- The "Contact Us" Form
- Part 1: JavaScript Debugger Basics
- Part 2: Debugging Logic Errors
- Part 3: Limitations of the JavaScript Debugger
- Part 4: Balancing Braces
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Part 1: JavaScript Debugger Basics
Start by opening the "contact us" form in Dreamweaver.
Click the Preview/Debug in Browser icon. Then click Debug In iexplore (or whatever your browser is, next to Debug In), as shown in Figure 2.
)
Figure 2 Launching the JavaScript Debugger.
When the Debugger launches, it begins by checking for syntax errors, which you'll learn about now.
This "contact us" form has a syntax error. When a syntax error is found, a JavaScript Syntax Error window appears, as shown in Figure 3.
)
Figure 3 The JavaScript Syntax Error window.
The top portion of the JavaScript Syntax Error window lists a summary of the syntax error found: the filename, the line number, the type of error, and a brief description. If you're familiar with JavaScript, the description "unterminated string literal" may be helpful.
If you're just learning how to program, however, the detailed description at the bottom of the JavaScript Syntax Error window can be very helpful. There, Dreamweaver explains in plain English that Error 1024, "unterminated string literal," means that you have a pair of quotes that don't match.
Toward the bottom-right portion of the JavaScript Syntax Error window, click the Go to Line button. Dreamweaver conveniently focuses on the portion of code where the syntax error occurs and highlights it, as shown in Figure 4.
)
Figure 4 Clicking the Go to Line button.
As Figure 4 shows, line 25 has a string (the word none) surrounded by a double quote and a single quote. For this string literal to be correct in JavaScript, it must be surrounded by either double quotes or single quotes, but not one of each.
Change the single quote to a double quote so that line 25 looks like this:
if (dept == "none") {
You've just debugged and fixed a syntax error. Pretty easy, don't you think? Now let's look at debugging something that's a bit more difficult to identify: logic errors.