Debugging Javascript

References:

JavaScript Comprehensive, 2nd ed. Don Gosselin, Thomson Learning, 2002. .

JavaScript, The Definitive Guide, 4th ed., David Flanagan, O'Reilly, 2002. Pages 18-19. .

A web site that has debugging information is http://www.javaworld.com/javaworld/jw-07-1996/jw-07-javascript.html

The most frustrating problem that students run into with any programming language is finding errors in their programs. Most languages, including javaScript, have very carefully defined ways of doing things and any small mistake will cause the program to fail. An analogy would be a word processing program like Microsoft Word. Think how hard it would be if Word refused to print out your paper if there was any grammatical error. If you forgot a period, used a wrong tense, didn't indent correctly, or made any other mistake, you wouldn't be able to print. This is what programming is like.

There are actually two categories of common errors in computer programming, syntax errors and logic errors. Syntax errors are mistakes in grammar. These include spelling errors, punctuation errors, and other mechanical errors. Logic errors are mistakes in the way that you solved the problem. To go back to the Word analogy, a syntax error would be something like a misspelling or forgetting a period at the end of a sentence. A logic error would be making a false statement in the paper. The statement would be formed correctly and would read fine. It would just be false.

Many programming languages are compiled which means that you have to run a special program to translate your program into a form that the computer can understand. This has advantages and disadvantages, but a strength of this approach is that the compiler will point out your syntax errors to you. JavaScript is an interpreted language which means that it does not have to be translated into a machine language. Instead, an interpreter (which most browsers contain) will read your javaScript program and execute it directly.

The disadvantage to interpreters is that the interpreter won't look at your entire program at once and point out all the errors for you like a compiler will. Instead, it will look at your program one line at a time. If a line contains an error, it will stop. This can be much harder to debug.

In this class we will be building many javaScript programs and you will, as a consequence, be debugging many program. Debugging is a skill, but it can be very difficult in interpreted languages like javaScript. In the remainder of this web page I'll talk a little bit about how you can track down errors in your javaScript programs.

Debugging JavaScript

The following steps provide one method for finding errors and debugging javaScript programs. As you become more skilled in javaScript programming, you'll develop your own techniques.

First make sure that your browser is configured to show scripting errors. This feature is often turned off by default, but is crucial for debugging scripts. Once this feature is turned on, the browser will report a scripting error in some fashion. For example, in IE a small yellow "yield sign" will appear in the left side of the status bar at the bottom of the browser. If you double click on this sign, a dialog box will appear listing the line number where the first error occurs in your script. Now you know where an error occurred in your script.

Now open up a text editor that has line numbers. There are lots of shareware text editors that will display line numbers. WordPad will tell you which line you're on (in a small box at the bottom of the page). Other text editors like Win32, MFE, etc. will display line numbers along the left side of the page. These make it very easy to identify the offending line.

Once you've identified the offending line, examine it very closely. Often there is a subtle error that you can't see. For example, perhaps you misspelled a word by imposing two letters. Or you forgot a semicolon at the end of the line. There are (as you will find out) millions of ways to make mistakes.

If you can't find the mistake in the line, try cutting a similar line that does work from somewhere earlier in the script. First run the new line like it is. Once you've verified that the line works, try modifying it slightly to do what you want. Then test it again. Continue to modify and test the line or lines until you get what you want. This incremental development technique is very common in computer science and can be applied to whole programs.

For example, one common method of writing a program is to start with a program that does something similar. Incrementally change lines in the old program, testing after every change. It is crucial to test after every small change because this isolates possible errors and makes them easier to identify and fix.

Sometimes errors are either very subtle or are not syntax errors, but logic errors. No browser will catch a logic error. The browser will always run the program exactly the way that it's written but, unfortunately, the way the program is written may not give the result you desire. In this case you have to step through the program. You need to examine your program one line at a time.

One way to do this is to get a print-out of your program and pretend that you're the computer. Go through the program line by line and execute each line in your mind. Draw boxes on a piece of paper for variables and change the values in the boxes as the lines of code change them. Though seemingly crude, this manual technique is often the best way to find logic errors in your program.

Many programming languages have special programs called debuggers that will automate this tracing process. These programs allow you to run your program and step through it one line at a time. At each line, you can examine the values in variables. Browsers don't have this ability, unfortunately, so you will have to mimic this process by explicitly printing out values at various lines using statements line document.writeln(varName). Put these write statements at the beginning of functions, in if statements, inside loops. Write out the values of any variables that change (including loop variables). The more values that you write out, the more information you'll have about the program.

Don't just write out variable information. Be sure to indicate where the line was in the program. For example, printing "inside the first while loop, x has value 5" tells you exactly where you're executing. This is especially important when a variable's value changes at many different places in the code.

In summary, to debug a program, you have to think like a computer. You have to learn to recognize very minor syntax errors and learn how to think sequentially. Debugging a program is never easy and can be the most frustrating experience of your life. But as you become more proficient, many of these skills will become second nature and you too will become a "code wizard".

Return to John Barr's Home Page

Last updated on September 15, 2002 by John Barr