JavaScript Programming: Debugging
Learning JavaScript can be liberating, even fun. Scripting gives
you the power to make your pages more dynamic and interesting.
Best of all, its flexibility lets you add your own touches to
personalize your page. If you've been following along in this
series and--I hope--experimenting and testing out your own ideas
about what might or might not work, you have more than likely
already encountered your first error message.
You know what I'm
talking about. You plan the perfect script for hours, check and
double-check the documentation, enter the code in carefully bracketed
<SCRIPT> tags, recheck your brilliant logic, save out the
HTML file and load it into your browser, prepare to be dazzled,
and...your ungrateful browser comes back:
Netscape - (Alert) JavaScript Error:
script.html
,
line 40
syntax error
else
. . . . . . . . . . . ^
If you've programmed in C, Basic, or another scripting language,
you're likely to sigh and dig in. Here we go again. If you're
new to programming, however, these error messages can be frustrating
and discouraging. This article gives you an overview of the
debugging process and some tips that will serve you well here,
as well as elsewhere in your programming life.
What is a Bug?
A bug is an instruction in a program that is causing an undesirable
result. There are two main types of bugs: Syntax and logic errors.
Syntax errors happen when you say something the computer doesn't
understand, causing program interpretation to stop. Logic errors
are when the program works, but doesn't do what you thought you
meant.
A syntax error is asking for a "scwerdriver".
A logic error is asking for a flathead screwdriver, then trying
to use it on a Philips screw.
Most other programming languages have a debugging environment
that helps you zero in on errors. If you're programming JavaScript
from a text editor and checking the results in a browser, however,
debugging is difficult. The browsers are designed to be upwards
compatible, so they may simply ignore instructions they don't
understand. When they do report errors, the messages don't always
tell you what you need to know to solve the problem.
You can follow along with the bugs.html file, which
gives examples of many of the problems I talk about here.
When the browser gives you a syntax error, note the line number
of the error. When you dig back into the script to see what's
wrong, however, check for problems above and around that line
for the problem as well. An error above the line, especially a
missing ), >, or } could be causing the browser to misinterpret
what happens next.
On a related note, be aware of "cascading" errors. This
means that one error, such as an incorrectly defined function,
can cause errors further down the line, for example, when you
try to call the function. Correct the first error, then try to
run the program again. Subsequent errors may be gone.
Here are some more tips on avoiding--and troubleshooting--programming
errors.
- Be careful about using reserved words--words that are part
of JavaScript itself--as variable or function names.
- Make sure your double and single quotation marks are matched
correctly, especially in long expressions.
- When you're writing code that generates HTML or JavaScript,
it can be especially easy to make a mistake. Examine your output
directly by running the code to create a new document, then clicking
on View Page Source in the browser to see what actually got generated.
- Take small steps. Test your program each time you make a small
addition or modification. Back up working versions of a script,
so that if difficult errors creep in you can easily go back a
step.
- If the browser doesn't seem to be responding to your changes,
make sure your files are in sync. Did you save a backup to a different
folder, then make changes and forget to save the new version out
to the original name? I hate it when that happens.
- Check and double-check your spelling. The browser will notice
if you misspell a keyword, but not if you misspell one of your
own variable names. JavaScript allows implicitly declared variables,
which means it will treat the second word as a new variable.
- Also, use consistent style for variable names, and remember
that JavaScript is case sensitive. If you always begin variables
with lower case letters, you're less likely to slip up and use
upper case instead.
- Finally, add debugging statements. These are statements that
tell you what is happening inside the program, what the variables
are at different times, and so on. They can be invaluably helpful.
Note which lines are debugging statements so you can find and
remove them easily when the program works.
See Also
|
