Debugging JavaScript in Dreamweaver
- 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
JavaScript is an excellent programming language for client-side scripting. When there are errors in your JavaScript code, however, they can be difficult to identify and fix. Beginning with Dreamweaver 4—and included in Dreamweaver MX—Macromedia included a very handy tool known as the JavaScript Debugger.
In this article, you'll learn how to use Dreamweaver's JavaScript Debugger to find and fix incorrect JavaScript code in a fictitious company's "contact us" form.
In this article, you'll learn how to do the following:
Part 1: "JavaScript Debugger Basics"
Launch the JavaScript Debugger
Debug syntax errors
Part 2: "Debugging Logic Errors"
Debug logic errors
Set break points
Watch variables while debugging
Step through code to locate logic errors
Part 3: "Limitations of the JavaScript Debugger"
Understand the limitations of the JavaScript Debugger
Part 4: "Balancing Braces"
The "Contact Us" Form
To make this tutorial as interesting as possible, a basic Web form was created to collect the following information about a visitor (see Figure 1):
- Department to reach
- First name
- Last name
- E-mail address
- Comments
)
Figure 1 The "contact us" form.
If you like, you can download the HTML and style sheet files to follow along in your copy of Dreamweaver MX or Dreamweaver 4. Download the following two files and place them in the same subdirectory:
After you've downloaded these two files, open the "contact us" form in Dreamweaver.
The "contact us" form contains a drop-down menu, three single-line text fields and a multiline text box, as shown in Figure 1.