Simple Debugging Techniques for JavaScript

You are going to run frequently into JavaScript code that doesn't work. In fact, MOST code fails to operate correctly the first time you test it, for one reason or another.

If you are testing your code in Netscape Communicator, there is something called the JavaScript console which will give you information about what the mistakes in your JavaScript code actually are. Netscape 6 browsers have the JavaScript console available directly from the Communicator menu. Netscape 4.x browsers require that you replace the URL in the location bar of your browser with the following code, then press the return/enter key:

javascript:

The JavaScript console will give you some information about your JavaScript errors, some of it helpful, some of it obscure. Clear the console after EVERY visit; that will make it clearer to you how many errors you actually have on your next visit, since otherwise the console will just build up a history of ALL of your errors.

It is outside the scope of this introductory lesson to go into very much detail regarding debugging techniques. Here is a list of some of the most common errors that students make:

Spelling: JavaScript is CASE-SENSITIVE. Check your spellings!

Incorrectly-placed Carriage Returns: Students often place carriage returns in the middle of parentheses for methods or functions, which usually doesn't work.

Spaces: Names may have NO SPACES in them. Some arguments may also not have spaces in them, depending on the method in question. Don't forget to follow the naming conventions that I outlined in the earlier modules!

Missing Quote Marks: One quote mark missing, and your JavaScript program will fail. The same holds true for missing parentheses or curly-braces, etc. I get caught by this myself surprisingly often.

There is one easy technique that you can use to debug code when something doesn't work: add a call to the alert() method into a sequence of lines of code. Test your code, and see if the alert dialog box you inserted shows up or not. Remove that alert(), and put another one someplace else. Keep testing with the alert() method in various locations until you pinpoint the precise point in the code where everything breaks down.

Debugging code is almost an art form, and requires a good deal of experience. Years ago, I wrote an entire class about debugging code. The few techniques I've outlined here, however, should help you to get started.

The biggest secret to debugging code is NOT to let yourself get frustrated. Mistakes and bugs in code are NORMAL, and you should ALWAYS expect them. If code works right the first time, it's usually a fluke and a cause for celebration; I dance around the house, patting myself on the back, on the rare occasions when that happens!

Methodical coding procedures are also of paramount importance. Once you've gotten a grasp of what good coding form is all about, you will need to develop certain habits, producing code in a very regular and regimented fashion. Again, I can't go into details here, but I've given you a lot of hints throughout this entire online course, both in HTML, in CSS, and in JavaScript, which can be applied to ANY coding that you do.

Good luck!

Main Menu