WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

JavaScript Programming: Debugging

JavaScript Programming: Debugging

by Heidi Brumbaugh

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
. . . . . . . . . . . ^

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

HTML5 Development Center

Recent Articles