JavaScript Debugging, Part 1 of 3

Undoubtedly, when writing a new script or trying to tweak a once-working script to suit your needs better, you've run into instances where your attempts have gone up in a fiery ball of flames; maybe you misspelled a variable, were trying to reference an object that didn't yet exist, or were using a reserved word. Whatever the problem, the quickest way to finding out where the problem lies is to see the errors your script produced. Using the information in the error, you can locate it easier and understand better what you need to fix. There are different ways of going about determining the errors depending on the browser you're using. I will attempt to cover all the tricks you'll need to get this working in Netscape Navigator 4.06/4.5+ (The JavaScript Console was introduced with JavaScript 1.3 in Netscape Navigator 4.06 & 4.5) and Internet Explorer 4+ to suit your needs and particular working style.

By default, the JavaScript console/alerts aren't displayed in either of the browsers we're covering, unlike earlier versions of Internet Explorer and Netscape Navigator 4. While this makes for a smoother viewing experience, it will make your development process very frustrating. The only clue you'll have that an error occurred is an error warning in the status bar (see below). However, if you prefer to have the errors automatically displayed, there are four easy ways in Netscape Navigator and two easy ways in Internet Explorer to view JavaScript errors.

Using Netscape 4+

1. Type JavaScript: into the location bar of your browser.



2. Drag the link below to your Personal toolbar. To see any errors, simply click the Display Errors button on your Personal toolbar.
1. Display Errors


3. Edit your preferences so the new JavaScript console automatically opens when an error occurs.
1. Quit Communicator before doing this, otherwise your changes will be lost.
2. Open your Navigator preferences file (prefs.js), normally located in whichever folder your user profile is stored.
3. Add the following line to the file:
   user_pref("javascript.console.open_on_error",true);
4. Save and restart Communicator.


4. Edit your preferences so the traditional JavaScript alert window automatically opens when an error occurs.
1. Quit Communicator before doing this, otherwise your changes will be lost.
2. Open your Navigator preferences file (prefs.js), normally located in whichever folder your user profile is stored.
3. Add the following line to the file:
   user_pref("javascript.classic.error_alerts",true);
4. Save and restart Communicator.

Using Internet Explorer 4+

1. You can double click the status bar to find out what the error was and what line it occurred on if you notice one of the messages below and a warning icon as illustrated above.
1. Done
2. Error on page
3. Done, but with errors on page


2. If you'd prefer to get notification of every error, then turn error notification on.
1. Make sure Display a notification about every script error under the Advanced tab of your Internet Options is checked.
2. Make sure Disable Script Debugging under the Advanced tab of your Internet Options is unchecked.

That's all for this installment, however, in the near future I will be posting two more articles about debugging JavaScript. The next article will cover the different types of JavaScript errors and common coding mistakes. The third article in this series will be an advanced JavaScript debugging article, which will discuss suppressing errors for all users, catching errors, and hidden error reporting.