Locate errors in your JavaScript code

by Baseline Inc. | Oct 01, 2003 7:00:00 AM

Takeaway: When you debug JavaScript, you don't have the luxury of the powerful tools available in other development environments. Fortunately, you can fall back on some alternative techniques to locate problems in your code.

Debugging requires investigative skills, as you try to locate problems that may be embedded deep in a system. Development environments like Visual Studio and JBuilder include powerful debuggers that make the process easier, but locating a JavaScript debugger is more difficult. Aside from an add-in for Visual Studio .NET, there's not much out there. Fortunately, other debugging techniques are available to JavaScript developers.

The browser market
Today's popular browsers often include a debugger. For example, both Microsoft and Netscape contain options for using a JavaScript debugger. Figure A shows a JavaScript error encountered in Internet Explorer. The popup window allows you to choose to debug the script. If you choose Yes, the system uses the tools installed on the machine to do the debugging. In this case, I have Visual Studio .NET installed, so I can use it to debug the script. Figure B shows the test script opened in Visual Studio .NET. In addition, Microsoft offers a scaled-down version called the Script Debugger via a free download.

Figure A

Internet Explorer JavaScript error

Figure B

Debugging script in Visual Studio .NET

Although Netscape's demise may have received a lot of publicity, their browser legacy continues to live on. It survives in one form known as Mozilla, which I use extensively. Mozilla includes a JavaScript debugger available via a Tools dropdown menu. Figure C shows the selection, and Figure D shows the JavaScript debugger opened.

Figure C

Accessing Mozilla debugger

Figure D

Mozilla JavaScript debugger

Using these debuggers can be nice, but they are not always available. Also, the Mozilla browser is an evolving open source project, so stability can be an issue. Fortunately, the alert window offers a helpful way to debug JavaScript. First, let's examine what type of JavaScript problems you may encounter.

Hone your JavaScript skills
Check out these Builder.com articles to learn more about JavaScript and Web development:

JavaScript errors
Basically, you may encounter three types of JavaScript errors: runtime, logic, and syntax:

Syntax errors are the most basic problems that occur when the developer mistypes the code, forgets a brace, and so forth. These errors are killers, because the JavaScript interpreter cannot load the code. They're encountered when the page loads.
Logic errors prevent the code from executing as planned. There is nothing wrong with the code (no syntax problems), but the developer has made a mistake in the program logic. These are often the most difficult to trace, because the code is okay.
Runtime errors are encountered when the actual script is executed. This may happen when the page loads or may be triggered by a page event or via a button. The runtime error in Figure A occurred because the code attempted to access a variable that did not exist.

These errors occur at different times in the page life cycle, so a brief review of how JavaScript is loaded in the browser may help.

Running JavaScript
The browser contains a JavaScript interpreter for executing the code. Upon loading a Web page, the interpreter examines all JavaScript code to ensure that there are no syntax errors. Once it passes this step, code is executed (as required), and runtime or logic errors may appear. Runtime or syntax errors will display error messages, which often contain the line number where the error occurred. You can use this number to track down the error when editing the page or script source. This provides a convenient method for working with syntax and runtime errors, but tracing logic errors requires more diligence.

Follow the logic
I've never met a developer who thinks his or her code is flawless (at least not on the first run). We've all had to spend precious time tracking down logic errors in our code. When debugging JavaScript, the alert message box becomes your best friend. It is contained in the Window object, and it has the following syntax:
window.alert(message);

The Window portion is optional, and the lone message parameter is a string value representing the message displayed in it. The following example is displayed in Figure E.
alert("Builder.com Rules!");

Figure E

Example alert usage

You can use the alert window to examine the inner workings at any point in your code. You can display variables to see if they are populated as expected or maybe to determine whether an object exists. You can also place various alerts in the code to determine the progression through a script. The alert stops code execution until the OK button is clicked, so it somewhat resembles a breakpoint in a modern development environment.

Once you locate the error, you can begin the process of fixing it. It is advisable to correct one error at a time to avoid confusion. I've often seen many perceived errors fixed at the same time, only to see other errors occur. Be prudent when you're correcting errors to avoid creating more work.

12 comment(s)