This chapter is from the book
This chapter is from the book
This chapter is from the book
Debugging
If you are used to doing programming in languages such as C++ and Java, you are probably accustomed to using some type of debugging tool to help you locate and fix problems in your code. Now that JavaScript is finding its place in the coding community, we are finally seeing support of a native and comprehensive third-party scripting and debugging environment that is similar to those found in mature programming languages (such as C++, Visual Basic, and Java).
JavaScript scripting and debugging tools help the developers take advantage of more automated preventive and, to a lesser extent, corrective controls. If you do not have access to JavaScript debugging tools, or the debugging job is very small, a simple JavaScript alert box can work as a debugging tool. In this chapter, you will examine two free JavaScript debugging options that are at your disposal.
Microsoft Script Debugger
The Microsoft Script Debugger (MSSD) is a free downloadable script debugging tool that works as an integrated part of Internet Explorer (version 3.01 and later). MSSD also comes with Windows 2000 and Microsoft's Personal Web Server. You can use MSSD to write and, most importantly, debug your JavaScript (known as JScript with the Microsoft implementation) or Visual Basic Script (VBScript) code. MSSD has the advantage of being able to handle the debugging demands of ActiveX, Java, JScript, and VBScript. (The MSSD can be downloaded from http://msdn.microsoft.com/scripting/.)
Features
The following are the main features of the Microsoft Script Debugger:
Dynamic view of HTML structure
JavaScript, VBScript, and Java can be debugged seamlessly within the same document.
Code is color coded
Ability to set breakpoints
Can step over, through, and out of each line of code
Call stack
Immediate expression window
Tips
The MSSD is easy to use, but there are a few things to know that will have you debugging your code quicker in MSSD.
Starting the Debugger
The only way to start MSSD is to first open Internet Explorer and load the desired HTML source file. Then you can activate MSSD by choosing View, Source.
NOTE
If MSSD isn't installed, viewing the source will open the source file in the Notepad editor.
To start the debugging process, choose Edit, Break at Next Statement from Internet Explorer, or choose Debug, Break at Next Statement from MSSD, and execute the script. This starts the debugger and stops it at the first statement in the current script.
The Break at Next Command
The Break at Next Statement command (which appears on the Script Debugger option of the View menu of Internet Explorer and the Debug menu of MSSD) is similar to a step command, in that the debugger executes the next statement in the script and then breaks, except that you can also use it when you are not currently running the script.
This is an important debugging feature of MSSD because a lot of JavaScript code is commonly declared in the header (or <head> tag) section of an HTML file, and this command is the only way to debug that code. This is because the code in the header of the file has already been executed by the time the HTML file is loaded. Also, any breakpoints set after the HTML file has been loaded are lost if you reload the page.
Evaluating Expressions
An expression can be evaluated with the aid of MSSD's immediate window and the following two methods:
Debug.write(string)—This method writes a specified string, which is often the value of a variable, to the immediate window with no intervening spaces or characters between each string.
Debug.writeln([string])—This method is identical to the preceding method, except that a newline character is inserted after each string. Also, the string argument is optional. If it's omitted, only a newline character is written to the immediate window.
A Final Word on the Microsoft Script Debugger
The Microsoft Script Debugger provides a very helpful environment for you to kick-start your JavaScript debugging and testing. The tools provided in MSSD are similar to tools usually found in full-blown programming language environments such as Visual Basic and C++. Also, MSSD's interface, setup, and installation are all very user friendly and intuitive.
However, MSSD has some limitations in that you need to switch frequently between Internet Explorer and MSSD to conduct debugging, and that you can't print source code. If you want more functionality than what MSSD offers, you might want to consider Microsoft's Visual InterDev 6.0. This product offers all the script-debugging features listed here, plus a full-blown Web developing environment.
At the least, MSSD is certainly a good tool to have in your arsenal, and it's a great value to boot because it's free. However, it can't take the place of writing solid code and systematically testing your code.
The alert() Method
If you have coded in any language for any length of time, you know that one of the simplest and quickest ways to debug functionality problems is to display the content of important variables at various stages of your program's execution. By doing so, you can determine if your code is executing as you intended. This technique is especially useful when you cannot get your hands on a full-featured JavaScript debugger, or you are short on time and don't want to fire up a JavaScript debugger to solve a simple functionality problem. JavaScript has a handy method called alert() that lends itself well to stopping the execution of your script to see a value of a variable. With a little thought and proper placement of this method, you can quickly track down functionality problems in scripts.
Listing 3.9 contains some JavaScript code that is supposed to set the color and type of a car. One look at the result, as seen in Figure 3.2, and you can see something went wrong. The script was supposed to set the vehicle type to "car" with the setType() function and the vehicle color to "red" with the setColor() function. If these two functions had worked properly, a string would be written to the screen; otherwise, an alert message would be displayed to let you know that one of the assignment operations failed. No alert message was displayed, but the variable representing the vehicle's color was never set to "red".
){kind=link}
Listing 3.9 Problem Code
<html>
<script type="text/javascript" language="JavaScript">
//Create two global variables used to describe the vehicles
var vehicleColor;
var vehicleType;
//Set the type of vehicle
function setType()
{
return(vehicleType="car");
}
//Set the color of the vehicle
function setColor()
{
return(vehicleColor="red");
}
//If the vehicle type and color were not properly set alert the user.
if(setType() || setColor())
{
document.write("The " + vehicleType + " is " + vehicleColor);
}
else
alert("The vehicle type and color could not be set");
</script>
</html>
Figure 3.2 There is a problem associated with setting the color of the car.
In Listing 3.10, alert() methods are used to debug the code. An alert() method is placed in each of the variable-setting functions to determine if each function is being executed. More alert() methods are placed before and after the if statement to show how the conditional evaluates.
Listing 3.10 Debugging Using the alert() Method
<html>
<script type="text/javascript" language="JavaScript">
//Create two global variables used to describe the vehicles
var vehicleColor;
var vehicleType;
//Set the type of vehicle
function setType()
{
alert("Inside the setType function."); //Debug statement
return(vehicleType="car");
}
//Set the color of the vehicle
function setColor()
{
alert("Inside the setColor function."); //Debug statement
return(vehicleColor="red");
}
//Debug statement
alert("Before if statement: type="+vehicleType+" color="+vehicleColor);
//If the vehicle type and color were not properly set alert the user.
if(setType() || setColor())
{
//Debug statement
alert("After if statement: type="+vehicleType+" color="+vehicleColor);
document.write("The " + vehicleType + " is " + vehicleColor);
}
else
alert("The vehicle type and color could not be set");
</script>
</html>
When Listing 3.10 is executed, the first alert box displayed shows that both variables are undefined before the execution of the if statement. The next alert box shows that the setType() function was executed. The final alert box shows the vehicle type set to "car", but the color is still undefined after the if statement, as you can see in Figure 3.3. What happened to the setColor() function? The alert() method in the setColor() function was never executed, which lets us know that the setColor() function was never called from within the if statement.
){kind=link}
Figure 3.3 Debugging using the alert() method.
If the first argument in a logical OR operation evaluates to true, the second argument is never evaluated. Because the setType() function returned true, the setColor() function was never executed. The problem is easily corrected by simply changing the logical OR operator to a logical AND operator.
CAUTION
After your code checks out, don't forget to remove the alert() methods that you added for debugging or else your program will display these alerts to those who use your scripts.
Moving On
In this chapter, you were introduced to some programming techniques that will make your JavaScript programs more powerful and more resilient through the use of JavaScript pattern matching, event handling, exception handling, and debugging. Part II, "Programming in JavaScript," provides a look at the environments in which JavaScript can be interpreted and into the actual use of the language.