JavaScript, Fourth Edition

1. JavaScript, Fourth Edition Chapter 8 Debugging and Error Handling

2. JavaScript, Fourth Edition 2 Objectives Study debugging concepts Learn how to trace error messages Learn how to use comments to locate bugs Trace errors with debugging tools Study exception and error handling Study additional debugging techniques

3. JavaScript, Fourth Edition 3 Understanding Debugging Syntax errors Occur when the interpreter fails to recognize code Can be caused by incorrect use of JavaScript code Run-time errors Occur when the JavaScript interpreter encounters a problem while a program is executing Not necessarily JavaScript language errors Occur when the interpreter encounters code that it cannot execute

4. Understanding Debugging (continued) Logic errors Flaw in a program’s design that prevents the program from running as anticipated “Logic” refers to the execution of program statements and procedures In the correct order to produce the desired results

5. JavaScript, Fourth Edition 5 Error Messages First line of defense in locating bugs Displayed in error message dialog boxes Line number in the document where error occurred Description of the error All error messages generated by a Web browser are run-time errors Run-time errors can be caused by syntax errors but not by logic errors

6. Error Messages (continued)

7. Error Messages (continued)

8. Error Messages (continued) You can rely on error messages only to find the general location of an error in a program And not as the exact indicator of an error Browsers do not strictly enforce JavaScript syntax Mitigate bugs in JavaScript programs Always use good syntax Thoroughly test with every browser type and version Example: Moving Estimator Use error messages to help locate bugs

9. Tracing Errors with the window.alert() Method Tracing Examining statements in an executing program window.alert() method One of the most useful ways to trace JavaScript code Place it at different points of your program Use it to display the contents of a variable, an array, or the value returned from a function Place multiple window.alert() methods in your code to check values as the code executes

10. Tracing Errors with the window.alert() Method (continued) Drawback You must close each dialog box for your code to continue executing Use them selectively at key points Example Use alert dialog boxes to locate a bug in the Moving Estimator program

11. Tracing Errors with the write() and writeln() Methods Trace a bug by analyzing a list of values Open a new browser window Use the write() and writeln() methods to print values to this separate window Driver program A simplified, temporary program for testing functions and other code JavaScript program that contains only the code you are testing

12. Tracing Errors with the write() and writeln() Methods (continued)

13. Using Comments to Locate Bugs Another method of locating bugs “Comment out” problematic lines Helps isolate the statement that is causing the error When you first receive an error message Start by commenting out only the statement specified by the line number in the error message

14. Combining Debugging Techniques You can combine debugging techniques To aid in your search for errors Example Use comments to locate bugs in the Moving Estimator program

15. Tracing Errors with Debugging Tools JavaScript Debugger Mozilla’s debugging tool Can be used to debug JavaScript code in Mozilla-based Web browsers, including Firefox Script Debugger Microsoft’s debugging tool Can be used with Internet Explorer to debug JavaScript code Can also debug VBScript, Java applets, JavaBeans, and ActiveX components

16. Tracing Errors with Debugging Tools (continued) Examining your code manually Usually the first step to take with a logic error Debugging tools Several tools that help trace each line of code Create a much more efficient method of finding and resolving logic errors

17. Understanding the JavaScript Debugger and Script Debugger Windows Using JavaScript Debugger Open the document you want to debug in Firefox Select JavaScript Debugger from the Tools menu To open a particular file, double-click it in Loaded Scripts view File opens in Source Code view (read-only file viewer)

19. Understanding the JavaScript Debugger and Script Debugger Windows (continued) Using Script Debugger Open the document to debug in Internet Explorer Use Script Debugger submenu on the View menu Commands: Open and Break at Next Statement Code elements are distinguished by syntax color coding Example Open the Moving Estimator program in JavaScript Debugger and Script Debugger

21. Setting Breakpoints Break mode Temporary suspension of program execution To monitor values and trace program execution Breakpoint Statement where execution enters break mode Once a program is paused at a breakpoint Use the debug tools to trace program execution

22. Setting Breakpoints (continued) Entering break mode in JavaScript Debugger Hard breakpoints Can be set for executable statements within a local function And notify JavaScript Debugger to enter break mode before the statement executes Future breakpoints Can be set for any type of statement and notify JavaScript Debugger to enter break mode as soon as possible before the statement executes

23. Setting Breakpoints (continued) Entering break mode in JavaScript Debugger (continued) Steps Open the document you want to debug Right-click the line in Source Code view where you want to set the breakpoint Select Set Breakpoint or Set Future Breakpoint Return to the Web browser window where the script is running and click the Reload icon or press Ctrl+R Continue command Executes the rest of the program normally or until another breakpoint is encountered

24. Setting Breakpoints (continued) Entering break mode in JavaScript Debugger Stop command Ends a debugging session without executing the rest of the program Example Practice using breakpoints with the Moving Estimator program in Firefox Entering break mode in Script Debugger Steps Open the document in Internet Explorer and select Break at Next Statement

25. Setting Breakpoints (continued)

26. Setting Breakpoints (continued) Entering break mode in Script Debugger (continued) Steps Click the Refresh button or perform some event Document opens in the Script Debugger window at the first executed JavaScript statement Run command Executes the rest of the program normally or until another breakpoint is encountered Stop Debugging command Ends a debugging session without executing the rest of the program

27. Setting Breakpoints (continued) Entering break mode in Script Debugger Example Practice using breakpoints with the Moving Estimator program in Internet Explorer

28. Setting Breakpoints (continued)

29. Stepping Through Your Scripts Step Into command Executes an individual line of code and then pauses until you instruct the debugger to continue Debugger stops at each line within every function of the JavaScript program Step Over command Allows you to skip function calls Program still executes function that you step over Step Out command Executes all remaining code in the current function

30. Stepping Through Your Scripts (continued) Step Out command (continued) Debugger stops at the next statement in the calling function Example Practice tracing program execution using the Step commands

31. Clearing Breakpoints Clearing breakpoints in JavaScript Debugger Right-click a line in Source Code view that contains the breakpoint Select Clear Breakpoint or Clear Future Breakpoint Remove all breakpoints Right-click anywhere in Breakpoints view and select Clear All Breakpoints or Clear All Future Breakpoints When you clear a hard breakpoint, it automatically changes to a future breakpoint

32. Clearing Breakpoints (continued) Clearing breakpoints in Script Debugger Place cursor anywhere in a line that contains the breakpoint Select Toggle Breakpoint from the Debug menu Remove all breakpoints Select Clear All Breakpoints from the Debug menu

33. Tracing Variables and Expressions Tracing variables and expressions in JavaScript Debugger Locals Variables view Displays all local variables within the currently executing function Helps you see how different values in the currently executing function affect program execution Watches view Monitors variables and expressions in break mode

34. Tracing Variables and Expressions (continued) Tracing variables and expressions in JavaScript Debugger (continued) To open Watches view Select Watches from the Show/Hide submenu on the View menu To display the value of a variable or expression Right-click Watches view and select Add Watch Expression

35. Tracing Variables and Expressions (continued)

36. Tracing Variables and Expressions (continued) Tracing Variables and Expressions in Script Debugger Command window Monitors variables and expressions in break mode You can also change variables and expressions in break mode from within this window To display the value of a variable or expression Enter the variable or expression and press Enter To change the value of a variable Type the variable name in the Command window followed by an equal sign and the new value

37. Tracing Variables and Expressions (continued)

38. Tracing Variables and Expressions (continued) Example Use Watches view or the Command window to find a bug in the Moving Estimator program

39. Examining the Call Stack Call stack The order in which procedures, such as functions, methods, or event handlers, execute in a program Each time a program calls a procedure Procedure is added to the top of the call stack In JavaScript Debugger Select Show/Hide on the View menu, and then click Call Stack In Script Debugger Select Call Stack from the View menu

40. Handling Exceptions and Errors Bulletproofing Writing code to anticipate and handle potential problems One bulletproofing technique Validate submitted form data Exception handling Allows programs to handle errors as they occur in the execution of a program Exception Some type of error that occurs in a program

41. Throwing Exceptions You execute code that may contain an exception in a try statement throw statement Indicates that an error occurred within a try block Example try { var email = formObject.value; var emailCheck = /^[_\w-]+(\.[_\w-]+)*@[\w-]+(\ .[\w-]+)*(\.[\D]{2,3})$/; if (emailCheck.test(email) == false) throw "One or more of the e-mail addresses you entered does not appear to be valid."; }

42. Catching Exceptions Use a catch statement To handle, or “catch” the error Example catch(emailError) { window.alert(emailError) return false; }

43. Executing Final Exception Handling Tasks finally statement Executes regardless of whether its associated try block throws an exception Used to perform some type of cleanup Or any necessary tasks after code is evaluated with a try statement Example Modify the Moving Estimator program so it uses exception handling to prevent users from entering any values except numbers in the form’s text boxes

44. Executing Final Exception Handling Tasks (continued) An Event object represents every event in JavaScript When calling an event handler function You can pass an argument named event An object that contains information about the event that occurred Use the onkeypress event with the Event object Object generated contains the Unicode character that represents the pressed key

45. Implementing Custom Error Handling Primary purpose of exception handling To test specific types of code Catching errors with the onerror event onerror event Executes whenever an error occurs on a Web page You must call the onerror event handler as a property of the Window object Assign to the onerror event handler the name of a function that you want to handle JavaScript errors To prevent a Web browser from executing its own error handling functionality, you return a value of true

46. Implementing Custom Error Handling (continued) Writing custom error handling functions JavaScript interpreter automatically passes three arguments to the custom error handling function Error message, URL, and line number Use these values in custom error handling function By adding parameters to the function definition Use parameters in your function to show a user the location of any JavaScript errors that may occur

47. Implementing Custom Error Handling (continued)

48. Additional Debugging Techniques

49. Checking XHTML Elements If you cannot locate a bug using any of the methods described in this chapter Perform a line-by-line analysis of your XHTML code Be sure that all necessary opening and closing tags are included Use the W3C Markup Validation Service to validate your Web page

50. JavaScript, Fourth Edition 50 Analyzing Logic Some errors in JavaScript code stem from logic problems Can be difficult to spot using tracing techniques Analyze each statement on a case-by-case basis

51. Testing Statements with JavaScript URLs JavaScript URL For testing and executing JavaScript statements Without an XHTML document or JavaScript source file Useful if you are trying to construct the correct syntax for a mathematical expression You enter a JavaScript URL into your Web browser’s address box Just like a normal URL You can include multiple statements in a JavaScript URL if a semicolon separates them

52. Reloading a Web Page Usually you can click the Reload or Refresh button in your browser to test code changes Web browser cannot always completely clear its memory of the remnants of an old bug Force the reload of a Web page by holding Shift key and clicking the browser’s Reload or Refresh button At times, even reopening the file does not completely clear the browser memory You must close the browser window completely May need to delete frequently visited Web pages

53. Using a for...in Statement to Check Object Properties Sometimes program errors are caused by using the wrong object properties Or by assigning 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

54. Identifying JavaScript Language and Browser Bugs You may encounter a bug in JavaScript language Or in a specific Web browser Try the following in Firefox window.status("Student Healthcare Services"); status("Student Healthcare Services"); defaultStatus("Student Healthcare Services"); No comprehensive or official list of JavaScript language bugs

55. JavaScript, Fourth Edition 55 Summary Three types of errors can occur in a program: syntax errors, run-time errors, and logic errors The first line of defense in locating bugs in JavaScript programs are the error messages Tracing is the examination of individual statements in an executing program When using write() and writeln() methods to trace bugs, it is helpful to use a driver program JavaScript Debugger and Script Debugger tools

56. JavaScript, Fourth Edition 56 Summary (continued) Break mode is the temporary suspension of execution to monitor values and trace execution Breakpoint is a statement in the code at which program execution enters break mode Step Into, Step Over, and Step Out commands JavaScript Debugger includes two views: Local Variables and Watches Call stack is the order in which procedures execute

57. Summary (continued) Writing code that anticipates and handles potential problems is often called bulletproofing Exception handling try, throw, catch, and finally statements JavaScript includes an onerror event that executes whenever an error occurs on a Web page Additional methods and techniques for locating and correcting errors in your JavaScript programs Include checking XHTML elements, analyze logic, and test statements with JavaScript URLs