Copyright ©

Javascript Debugging

previous next


There is a great chance that you would make a mistake while writing your programme. A mistake in a script is referred to as a bug.

The process of finding and fixing bugs is called debugging and is a normal part of the development process. This section covers tools and techniques that can help you with debugging tasks.

Error Messages in IE:

The most basic way to track down errors is by turning on error information in your browser. By default, Internet Explorer shows an error icon in the status bar when an error occurs on the page:

Error Icon

Double-clicking this icon takes you to a dialog box showing information about the specific error that occurred.

Because this icon is easy to overlook, Internet Explorer gives you the option to automatically show the Error dialog box whenever an error occurs.

To enable this option, select Tools --> Internet Options --> Advanced tab. and then finally check the Display a Notification About Every Script Error box option as shown below:

Internet Options

Error Messages in Firefox or Mozilla:

Other browsers like Firefox, Netscape and Mozilla send error messages to a special window called the JavaScript Console or Error Consol. To view the console, select Tools --> Error Consol or Web Development.

Unfortunately, since these browsers give no visual indication when an error occurs, you must keep the Console open and watch for errors as your script executes.

Error Console

Error Notifications:

Error notifications that show up on Console or through Internet Explorer dialog boxes are the result of both syntax and runtime errors. These error notification include the line number at which the error occurred.

If you are using Firefox then you can click on the error available in the error console to go to the exact line in the script having error.

How to debug a Script:

There are various ways to debug your JavaScript:

Use a JavaScript Validator:

One way to check your JavaScript code for strange bugs is to run it through a program that checks it to make sure it is valid.that it follows the official syntax rules of the language. These programs are called validating parsers, or just validators for short, and often come with commercial HTML and JavaScript editors.

The most convenient validator for JavaScript is Douglas Crockford's JavaScript Lint, which is available free online at Douglas Crockford's JavaScript Lint.

Simply visit that web page, paste your JavaScript (Only JavaScript) code into the text area provided, and click the jslint button. This program will parse through your JavaScript code, ensuring that any variable and function definitions follow the correct syntax. It will also check JavaScript statements, such as if and while, to ensure they too follow the correct format

Add Debugging Code to Your Programs:

You can use the alert() or document.write() methods in your program to debug your code. for example, you might write something like :

var debugging = true;
var whichImage = "widget";
if( debugging )
   alert( "Calls swapImage() with argument: " + whichImage );
var swapStatus = swapImage( whichImage );
if( debugging )
   alert( "Exits swapImage() with swapStatus=" + swapStatus );

By examining the content and order of the alert()s as they appear, you can examine the health of your program very easily.

Use a JavaScript Debugger:

A debugger is an application that places all aspects of script execution under the control of the programmer. Debuggers provide fine-grained control over the state of the script through an interface that allows you to examine and set values as well as control the flow of execution.

Once a script has been loaded into a debugger, it can be run one line at a time or instructed to halt at certain breakpoints. Once execution is halted, the programmer can examine the state of the script and its variables in order to determine if something is amiss. You can also watch variables for changes in their values.

The latest version of the Mozilla JavaScript Debugger (code-named Venkman) for both Mozilla and Netscape browsers can be downloaded at

Useful tips for developers:

There are few tips that you can use to reduce the number of errors in your scripts and that can make the debugging process a little easier.

previous next

Copyright ©