Tutorial 9: Debugging JavaScript

Tutorial 9: Debugging JavaScript

JavaScript - Comprehensive

Section A:

Basic Debugging Techniques

Objectives

• In this section, the students will learn:

• About debugging concepts

• How to interpret error messages

• How to trace errors with the alert() method

• How to trace errors with the write() and writeIn() methods

• How to use comments to locate bugs

• About additional debugging techniques

Understanding Debugging

• Three types of errors can occur in a program:

– Syntax errors

– Logic errors

– Run-time errors

• Syntax errors occur when you enter code that the interpreter does not recognize

Understanding Debugging

• Syntax errors in JavaScript include invalid statements or statements that are entered incorrectly

• If the JavaScript interpreter encounters a problem while a program is executing, that problem is called a run-time error

• Logic errors are problems in the design of a program that prevent it from running as anticipated

Error Messages

• The first line of defense in locating bugs in JavaScript programs are the error messages you receive when the JavaScript interpreter encounters a syntax or run-time error

• Two important pieces of information displayed in error message dialog boxes by both Navigator and Internet Explorer are:

– The line number in the document where the error occurred

– A description of the error

Error Messages

• Regardless of which browser you use, error messages should only be used to find the general location of an error in a program and not as the exact indicator of an error

• To use error messages to help locate bugs in a JavaScript program follow the directions on page 453 of the textbook

Tracing Errors with the alert() Method

• Tracing is the examination of individual statements in an executing program

• The alert() method provides one of the most useful ways to trace JavaScript code

• One drawback to using multiple alert() methods to trace values is that you must close each dialog box for your code to continue executing

• To use alert dialog boxes to help locate bugs in a JavaScript program refer to the instructions on page 457 of the textbook

CalculatePay() Function with a Logic Error

CalculatePay() Function with an alert() Method to Trace Program Execution

CalculatePay() Function with Multiple alert() Methods to Trace Program Execution

Final Dialog Box in Corrected VitalInfo.html File

Tracing Errors with the write() and writeIn() Methods

• There may be situations in which you want to trace a bug in your program by analyzing a list of values, rather than by trying to interpret the values displayed in alert dialog boxes on a case-by-case basis

• You can create such a list by opening a new browser window and printing values, using the write() and writeIn() methods




• To use write() methods and a separate browser window to help locate bugs in a JavaScript program follow the directions shown on pages 459 and 460 of the textbook

Using Comments to Locate Bugs

• Another method of locating bugs in a JavaScript program is to comment out lines that you think may be causing the problem

• You can comment out individual lines that may be causing the error, or comment out all lines except the lines that you know work

• You can combine debugging techniques to aid in your search for errors

Code Using Comments to Trace Errors

CalculatePay() Function with Comments and an alert() Method to Trace Program Execution

Using Comments to Locate Bugs

• To use comments to help locate bugs in a JavaScript program refer to the procedures on page 463 of the textbook

Checking HTML Tags

• There will be occasions when you cannot locate the source of a bug, no matter how long you search

• Sometimes it is not a problem with your JavaScript code at all, but a problem with your HTML tags

• To find and correct HTML errors that are preventing a JavaScript program from running use the directions on page 465 of the textbook

Analyzing Your Logic

• At times, errors in your JavaScript code

will be logic problems that are difficult to

spot using tracing techniques

• When you suspect that your code contains

logic errors, you must analyze each

statement on a case-by-case basis

Testing Statements with JavaScript URLs

• If you find that the error in your code is the result of a single statement, you can test the statement using a JavaScript URL without rerunning the entire program

• A JavaScript URL is used for testing and executing JavaScript statements without an HTML document or JavaScript source file

• The syntax for a JavaScript URL is javascript:statement (s)

Testing Statements with JavaScript URLs

• JavaScript URLs are particularly useful if

you are trying to construct the correct

syntax for a mathematical expression

• Although you can modify the formula’s

structure directly within a JavaScript

program, you can also use a JavaScript

URL to test the calculation

Reloading an HTML Document

• When you edit the JavaScript code in an HTML document, it is usually sufficient to save the document and click the Reload or Refresh button in your browser to test your changes

• With complex scripts, a Web browser cannot always completely clear its memory of the remnants of an old bug, even though you have fixed the code

• It is sometimes necessary to completely reopen the document, using the Open or Open Page command on your browser’s File menu

Section A: Summary

• Syntax errors occur when you enter code that the interpreter does not recognize

• If the JavaScript interpreter encounters a problem while a program is executing, that problem is called a run-time error

• Run-time errors differ from syntax errors in that they do not necessarily represent JavaScript language errors

• Logic errors are problems in the design of a program that prevent it from running as anticipated

Section A: Summary

• The first line of defense in locating bugs in JavaScript programs are the error messages you receive when the JavaScript interpreter encounters a syntax or run-time error

• Error messages should only be used to find the general location of an error in a program, not as the exact indicator of an error

• Tracing is the examination of individual statements in an executing program

Section A: Summary

• The alert() method provides one of the most useful ways to trace JavaScript code

• Using multiple alert() methods to trace an error is sometimes more efficient than moving a single alert() method

• You can create a list of values assigned to a variable by opening a new browser window and printing the values using the write() and writeIn() methods

• Comments are often used to help locate bugs in a JavaScript program

Section A: Summary

• You can comment out individual lines that may be causing the error or comment out all lines except the lines that you know work

• If you cannot locate a bug by using error messages, tracing, or comments, then perform line-by-line analysis of your HTML code

• A JavaScript URL is used for testing and executing JavaScript statements without an HTML document or JavaScript source file

• It is sometimes necessary to completely reopen an HTML document or restart your browser for changes to JavaScript code to take effect

Section B:

Advanced Debugging Techniques and

Resources

Objectives

• In this section, students will learn:

• How to use a for…in statement to check object properties

• How to use watch points in Navigator

• How to use the Netscape JavaScript Debugger

• How to use the Microsoft Script Debugger

• About JavaScript language bugs and debugging resources

Using a for…in Statement to Check Object Properties

• Sometimes program errors are caused by using the wrong object properties, or by assigning the wrong value to an object property

• You can use a for…in loop to determine if values are being assigned to the correct properties in an object

• This technique is useful when you have an object with many properties, and you cannot trace the cause of incorrect values being assigned to properties

Alert Dialog Box Created with a for…in Statement

Watch Points in Navigator

• Another technique for monitoring object properties is to use watch points

• A watch point is a specific object property that you monitor for changes during program execution

• Navigator includes two methods, watch ( ) and unwatch( ), that are used for setting and removing watch points for a particular object

• The watch() method sets a watch point for an object’s property

Car_Color Property of the myCar Object Being Monitored with a watch() Method

Watch Points in Navigator

• The unwatch() method cancels a previously declared watch

• The syntax for the unwatch() method is object.unwatch(“property”);

• To use watch points to monitor a changing variable in Navigator, refer to the procedures on pages 475 and 476 of the textbook

Netscape JavaScript Debugger

• Many high-level programming languages such as Visual C++ have debugging capabilities built directly into their development environment

• JavaScript programming language does not have a development environment other than your text editor or HTML editor

• The only true debugging tools you have in JavaScript are the error messages generated by a browser


• The Netscape Javascript Debugger provides several tools that can help you trace each line of code, creating a much more efficient method of finding and resolving logic errors

• Before you can use the JavaScript Debugger, you must download and install it from http://developer.netscape.com/software/tools/ index.html?content=/software/jsdebug.html

• The JavaScript Debugger is an applet that starts automatically during the download process


• To start the debugger in subsequent Navigator sessions, you must open the Jsdebugger.html file from the \JSDebug folder, which is installed in the Netscape folder on your computer

JavaScript Debugger Applet Window Before a Document is Opened for Debugging

Source View

• The Control menu in the JavaScript debugger contains several commands for entering and working in break mode

• Break mode temporarily suspends, or pauses, program execution so that you can monitor values and trace program execution

• A Source View window is a separate debugging window for each HTML page opened in the JavaScript Debugger

• You can have multiple Source View windows open at the same time

Source View

• Once you open a document in the JavaScript Debugger, colors and icons appear in the left margin to indicate various elements of the JavaScript program

• To open an HTML document in Source View for debugging, use the directions on page 481 of the textbook

Step Commands

• The Step Into command executes an individual line of code and then pauses until you instruct the debugger to continue

• The Step Over command allows you to skip function calls

• The Step Out command executes all remaining code in the current function

Step Commands

• When a program enters break mode, program execution is not stopped—it is only suspended

• To resume program execution after entering break mode, select Run from the Control menu

• To practice tracing program execution using the step commands, follow the instructions on page 482 of the textbook

Breakpoints

• Another method of tracing program execution in the JavaScript Debugger involves inserting breakpoints into code

• A breakpoint is a statement in the code at which program execution enters break mode

• Once a program is paused at a breakpoint, you can use the Step Into, Step Over, and Step Out commands to trace program execution, or you can use the Run or Abort commands to complete program execution and run to the next breakpoint

Breakpoints

• Multiple breakpoints provide a convenient way to pause program execution at key positions in your code at which you think there may be a bug

• To practice using breakpoints, refer to the directions shown on pages 483 and 484 of the textbook

• Also, refer to the procedures for removing breakpoints shown on page 484 of the textbook

Breakpoints in the Source View Window

Tracing Variables and Expressions

• As you trace program execution using step commands and breakpoints, you may also need to trace how variables and expressions change during the course of program execution

• You can monitor properties of objects in the JavaScript Debugger by using the Inspector window

• During a debugging session, you can clear the values and results in the Console window by selecting Clear Console from the Edit menu

Console Window


• The Watches window is used for monitoring specific variables and expressions

• The easiest method of adding a variable or expression to the Watches window is to highlight the variable or expression when you are in break mode, then select Copy to Watch from the Edit menu

• To practice tracing variables perform the procedures shown on page 487 of the textbook

Watches Window

The Call Stack Window

• When you are working with a JavaScript program that contains multiple functions, the computer must remember the order in which functions are executed

• The call stack refers to the order in which procedures, such as functions, methods, or event handlers, execute in a program

• The ability to view the contents of a call stack is very useful when tracing logic errors in large programs with multiple functions

• To observe the contents of the Call Stack window use the steps on page 488 of the textbook

Microsoft Script Debugger

• Microsoft’s Script Debugger is surprisingly similar to Netscape’s JavaScript Debugger

• One major difference between the two programs is that Script Debugger allows you to debug VBScript, Java applets, Java beans, and ActiveX components in addition to JavaScript programs

• In comparison, JavaScript Debugger debugs only JavaScript and Java programs

• You can download Script Debugger from the Microsoft Windows Script Technologies Web site at http://msdn.microsoft.com/scripting/default.htm

The Script Debugger Window

• You do not need to open a separate HTML document to start Script Debugger, as you do with JavaScript Debugger

• Instead, you open the document you want to debug in Internet Explorer and use the Script Debugger submenu on the View menu

• The Script Debugger submenu contains two commands:– Open

– Break at Next Statement

The Script Debugger Window

• You can open the HTML document in the Script Debugger window and select Break at Next Statement from the Script Debugger’s Debug menu

• Then, switch back to Internet Explorer and click the Refresh button, or a form button that executes JavaScript code

• To open an HTML document in Source View for debugging, use the steps on page 491 of the textbook

An HTML Document in Break Mode in the Script Debugger Window

Step Commands

• The Step Into, Step Over, and Step Out commands in Script Debugger are identical to these same commands in JavaScript debugger

• They are used for continuing program execution once you enter break mode

• In Script Debugger, these commands are located on the Debug menu

• To practice tracing program execution using the step commands, follow the instructions shown on pages 491 and 492 of the textbook

Breakpoints

• Working with breakpoints in Script Debugger is very similar to working with breakpoints in JavaScript Debugger

• The breakpoint commands are located on the Debug menu, and there are some differences in opening a document for debugging

• To practice using breakpoints, refer to the procedures on pages 492 and 493 of the textbook

• Also, follow the procedures to remove breakpoints, shown on page 493 of the textbook

Breakpoints in the Script Debugger Window


• A major difference between Script Debugger and JavaScript Debugger is that Script Debugger does not contain the equivalent of a Watches window, to monitor how a variable or expression changes during the course of program execution

• The Command window allows you to change the value of Object properties during a debugging session

Viewing and Changing Values in the Command Window

The Call Stack Window

• The Call Stack window in Script Debugger performs the same function as the Call Stack window in JavaScript Debugger

• It provides the ability to view the contents of a call stack when debugging a program

• To practice tracing variables follow the directions listed on page 496 of the textbook

JavaScript Language Bugs and Debugging Resources

• If you have tried everything you can think of to fix a bug in your program, consider the possibility that you may be encountering one of the known bugs in the JavaScript language itself

• To see a list of known JavaScript bugs, visit Netscape’s JavaScript Known Bugs page at http://developer.netscape.com/support/bugs/known/index.html

Internet Debugging Resources

Section B: Summary

• You can use a for…in loop to determine if values are being assigned to the correct properties in an object

• Navigator includes two methods, watch() and unwatch(), that are used for setting and unsetting watch points for a particular object

• A watch point is a specific property that you monitor for changes during program execution

• The watch() method sets a watch point for an object’s property

Section B: Summary

• The unwatch() method cancels a previously declared watch

• JavaScript Debugger in Netscape’s tool for debugging JavaScript

• Script Debugger is Microsoft’s tool for debugging scripting languages, including JavaScript and VBScript

• Break mode temporarily suspends, or pauses, program execution so that you can monitor values and trace program execution

Section B: Summary

• The Step Into command executes an individual line of code, then pauses until you instruct the debugger to continue

• The Step Over command allows you to skip function calls

• The Step Out command executes all remaining code in the current function

• A breakpoint is a statement in the code at which program execution enters break mode

Section B: Summary

• Tracing program execution allows you to identify the exact location where a value changes, to pinpoint the cause of logic problems

• During a debugging session in JavaScript Debugger, you can monitor variables and expressions in break mode with the Console window, the Watches window, and the Evaluate command

• The order in which a procedure, such as a function, a method, or an event handler, executes in a program is the call stack

Section B: Summary

• During a debugging session in Script Debugger, you can monitor variables and expressions in break mode with the Command window

• JavaScript Debugger and Script Debugger both monitor the call stack using a Call Stack window

• If you have tried everything you can think of to fix a bug in your program, consider the possibility that you may be encountering one of the known bugs in the JavaScript language itself

Documents

Tutorial 9: Debugging JavaScript