HTML and CSS Reference
In-Depth Information
Debugging Tools and Techniques
There are several techniques you can employ to avoid making programming mistakes
and to quickly locate the mistakes you do make. One is to write
modular code
, which is
code that breaks up a program's different tasks into smaller, more manageable chunks.
A common strategy when creating modular code is to use functions that perform a few
simple tasks. The different functions can then be combined and used in a variety of ways.
If you encounter a logical error in which the incorrect results are displayed by the
browser, you can monitor the changing values of your variables using an alert dialog box.
An
alert dialog box
is a dialog box generated by JavaScript that displays a text message
with an OK button. Clicking the OK button closes the dialog box, allowing the browser to
resume running the JavaScript code. The command to create an alert dialog box is
alert(
text
);
where
text
is the text string that you want displayed in the dialog box. You can also use
a variable name in place of a text string. For example, the command
alert(emLink);
displays the current value of the
emLink
variable. Figure 10-31 shows the appearance of
this dialog box for the first entry in the library staff directory. Alert dialog boxes are useful
in determining what is happening to your variable values while a program is running.
Figure 10-31
Alert dialog box
Browsers also offer various tools for debugging JavaScript programs. In Internet Explorer
you can open the Developer Tools window by pressing the F12 key. From this window you
can run a script debugger to locate and describe any load-time or run-time errors in your
code, as shown in Figure 10-32.
Figure 10-32
internet explorer Developer tools window
location
of
JavaScript error
error messages
