1 / 69

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

carrie
Download Presentation

Tutorial 9: Debugging JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tutorial 9: Debugging JavaScript JavaScript - Comprehensive

  2. Section A:Basic Debugging Techniques

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. CalculatePay() Function with a Logic Error

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

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

  12. Final Dialog Box in Corrected VitalInfo.html File

  13. 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

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

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

  16. Tracing Errors with 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

  17. 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

  18. Code Using Comments to Trace Errors

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

  20. 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

  21. 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

  22. 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

  23. 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)

  24. 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

  25. 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

  26. 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

  27. 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

  28. 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

  29. 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

  30. Section B:Advanced Debugging Techniques and Resources

  31. 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

  32. 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

  33. Alert Dialog Box Created with a for…in Statement

  34. 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

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

  36. 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

  37. 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

  38. Netscape JavaScript Debugger • 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

  39. Netscape JavaScript Debugger • 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

  40. JavaScript Debugger Applet Window Before a Document is Opened for Debugging

  41. 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

  42. 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

  43. 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

  44. 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

  45. 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

  46. 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

  47. Breakpoints in the Source View Window

  48. 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

  49. Console Window

  50. Tracing Variables and Expressions • 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

More Related