2.4 About Debugging

Have you ever tried to draw a picture or do your resume for the first time without a mistake either in the layout, order, type, style, whatever? In any programming language, it's the same story. And JavaScript is no exception. It's especially tricky with JavaScript because you have to consider the HTML as well as the JavaScript code when your page doesn't turn out right. You might get errors on the console or get a totally blank page. Finding errors in a script can get quite frustrating without proper debugging tools. Before we go any further, this is a good time to get acquainted with some of the types of errors you might encounter.

2.4.1 Types of Errors

Load or Compile Time

Load-time errors are the most common errors and are caught by JavaScript as the script is being loaded. These errors will prevent the script from running at all. Load-time errors are generally caused by mistakes in syntax, such as missing parentheses in a function or misspelling a keyword. You may have typed a string of text and forgotten to enclose the string in quotes, or you may have mismatched the quotes, starting with single quotes but ending with double quotes.

Runtime

Runtime errors, as the name suggests, are those errors that occur when the JavaScript program actually starts running. An example of a runtime error would be if you asked the user for a number between 1 and 5 and he gave you a 7, or you put some code between the <head></head> tags and it should have been placed within the <body></body> tags, or you referenced a page that doesn't exist.

Logical

Logical errors are harder to find because they imply that you didn't anticipate an event or that you inadvertently misused an operator, but your syntax was okay. For example, if you are checking to see if two expressions are equal, you should use the == equality operator, not the = assignment operator.

2.4.2 Debugging Tools

The javascript: URL Protocol

For simple debugging or testing code, you can use the URL pseudoprotocol, javascript: followed by any valid JavaScript expression or expressions separated by semicolons. The result of the expression is returned as a string to your browser window, as shown in Example 2.3 and Figures 2.2 and 2.3.

Figure 2.2. Internet Explorer and the javascript: protocol.

graphics/02fig02.jpg

Figure 2.3. Netscape and the javascript: protocol.

graphics/02fig03.jpg

FORMAT

 javascript: expression

Example 2.3

 javascript: 5 + 4

Netscape's JavaScript Console

Netscape 6 and 7 provide the JavaScript Console. You invoke it via the Tasks or Tools/Web Development menu, or by typing javascript: in the location bar of the browser. The JavaScript Console displays the lines containing the errors. Leave the console open and watch your errors build up. You can also type expressions to be evaluated.

Example 2.4

 <html>     <head>     <title>First JavaScript Sample</title> 1   <script language = "JavaScript"> 2  document.writeln("<h2>Welcome to the JavaScript World!</h1>);  3                            //  Bug in line2:  Missing double quote!!  </script>     </head>     <body bgcolor="yellow" text="blue">     <font size="+2">This is just plain old HTML stuff.</font>     </body>     </html>

EXPLANATION

JavaScript code starts here.
In this line, the string starts with a double quote, but doesn't terminate with one. Since the quotes are not matched, JavaScript produces an error. If you go to the location window of the browser and type javascript: the console window will open with a list of program errors and little markers to show you where the potential error took place, as shown in Figures 2.4 “2.8. You can leave the console window open and watch errors as they occur, using the clear button to start with a clean console window.

Figure 2.4. Type javascript: in the navigation bar and the console window will open.

Figure 2.8. Netscape and the javascript: protocol.

Figure 2.5. Netscape ”The JavaScript Console indicates where errors are found.

graphics/02fig05.jpg

Figure 2.6. Netscape ”The JavaScript Console.

graphics/02fig06.jpg

Figure 2.7. Netscape 7 console window.

graphics/02fig07.jpg

For JavaScript debuggers available for download for Netscape, go to http://developer.netscape.com/software/tools/index.html or http://www.mozilla.org/projects/venkman/index.html for the Netscape JavaScript debugger known as Venkman.

Debugging in Explorer

Microsoft's Internet Explorer provides a debugging window as an advanced Internet option (see Figure 2.9). When an error occurs in your JavaScript program, a little triangle appears in the left-hand corner of the browser window. If you double-click the triangle, a debugging window opens explaining the error and the line number where it occurred (see Figure 2.10).

Figure 2.9. To enable debugging in IE, go to Tools > Internet Options > Advanced.

graphics/02fig09.jpg

Figure 2.10. In Internet Explorer, look in left-hand bottom corner for a triangle.

graphics/02fig10.jpg

Also see http://msdn.microsoft.com/scripting/ to find the Microsoft Script Debugger (MSSD), a free debugging tool that works with IE 3.01 and above (see Figure 2.11). You can write and debug your scripts (called JScript by Microsoft) using this debugger.

Figure 2.11. Web site for the Microsoft scripting tools.

graphics/02fig11.jpg