1 / 30

Tutorial 7 Debugging JavaScript Section A - Basic Debugging Techniques

Tutorial 7 Debugging JavaScript Section A - Basic Debugging Techniques. Tutorial 7A Topics. Section A - Basic Debugging Techniques About debugging concepts How to interpret error messages How to trace errors with the alert() method How to trace errors with the write() and writeln() methods

oshin
Download Presentation

Tutorial 7 Debugging JavaScript Section A - Basic Debugging Techniques

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 7 Debugging JavaScriptSection A - Basic Debugging Techniques JavaScript Tutorial 7 - Debugging JavaScript

  2. Tutorial 7A Topics • Section A - Basic Debugging Techniques • About debugging concepts • How to interpret error messages • How to trace errors with the alert() method • How to trace errors with the write() and writeln() methods • How to use comments to locate bugs • About additional debugging techniques JavaScript Tutorial 7 - Debugging JavaScript

  3. Basic Debugging Techniques • Understanding Debugging • Debugging • Act of tracing and resolving errors in a program • Three types of errors • Syntax • Run-time • Logic JavaScript Tutorial 7 - Debugging JavaScript

  4. Basic Debugging Techniques • Understanding Debugging • Syntax errors • Occur when code is used that the interpreter doesn’t recognize • Examples: • Invalid or incorrect statements • Missing symbols (e.g., curly brace) • Incorrect spelling or mistypes • Using different case when referencing variables JavaScript Tutorial 7 - Debugging JavaScript

  5. Basic Debugging Techniques • Understanding Debugging • Run-time errors • Occur when interpreter encounters code it can’t handle • Examples: • Call to function that hasn’t been defined • Referencing a variable that hasn’t been declared • Division by zero JavaScript Tutorial 7 - Debugging JavaScript

  6. Basic Debugging Techniques • Understanding Debugging • Logic errors • Problems in the design of the program that prevent it from running as anticipated • Examples: • Performing one operation when another is intended • e.g., multiplying instead of dividing • Infinite loops JavaScript Tutorial 7 - Debugging JavaScript

  7. Basic Debugging Techniques • Error Messages • Error messages are generated by the JavaScript interpreter when it encounters a syntax or run-time error • Unfortunately  not with a logic error… • Information displayed in error messages: • Line number in document where error occurred • Referenced from first line of document • Description of the error JavaScript Tutorial 7 - Debugging JavaScript

  8. Basic Debugging Techniques • Error Messages • Example: function missingClosingBrace() { var message = “Function missing brace.”; alert(message); JavaScript Tutorial 7 - Debugging JavaScript

  9. JavaScript Tutorial 7 - Debugging JavaScript

  10. JavaScript Tutorial 7 - Debugging JavaScript

  11. Basic Debugging Techniques • Error Messages • In IE versions higher than 4: • Must turn on error notification • Tools menu  Options  Advanced • In Browsing category: • Select “Display a notification about every script error” JavaScript Tutorial 7 - Debugging JavaScript

  12. Basic Debugging Techniques • Error Messages • In Netscape versions that support JavaScript 1.3 and higher: • Must turn on error notification • Tools and Tasks menu  JavaScript Console JavaScript Tutorial 7 - Debugging JavaScript

  13. Basic Debugging Techniques • Error Messages • Messages don’t always identify the actual problem • They should be used as a starting point for debugging • Don’t assume that the problem is only with the line number shown in the error message JavaScript Tutorial 7 - Debugging JavaScript

  14. Basic Debugging Techniques • Error Messages • Web browsers do not strictly enforce JavaScript syntax • Programs may run even though they contain bugs • Bugs may not be recognized consistently across different browsers JavaScript Tutorial 7 - Debugging JavaScript

  15. Basic Debugging Techniques • Error Messages • How to mitigate bugs in your programs • Always use good syntax • Be disciplined in your programming technique • Thoroughly test your program in all major browsers JavaScript Tutorial 7 - Debugging JavaScript

  16. Basic Debugging Techniques • Tracing Errors with the alert() Method • If unable to locate a bug using error messages • Must trace the code • Tracing • The examination of individual statements in an executing program JavaScript Tutorial 7 - Debugging JavaScript

  17. Basic Debugging Techniques • Tracing Errors with the alert() Method • alert() method • provides one of the most useful ways to trace a program • Process: • Place an alert() method at the point in the program where you think the problem is located • Move it as necessary through the code until the problem is identified or • Place several throughout the program at one time JavaScript Tutorial 7 - Debugging JavaScript

  18. JavaScript Tutorial 7 - Debugging JavaScript

  19. JavaScript Tutorial 7 - Debugging JavaScript

  20. JavaScript Tutorial 7 - Debugging JavaScript

  21. JavaScript Tutorial 7 - Debugging JavaScript

  22. JavaScript Tutorial 7 - Debugging JavaScript

  23. Basic Debugging Techniques • Tracing Errors with the write() and writeln Methods • Examine multiple values • Alternative to single value using alert() method • Create a list by opening a new window and using write() and writeln() methods to print values to it JavaScript Tutorial 7 - Debugging JavaScript

  24. Basic Debugging Techniques • Using Comments to Locate Bugs • Comment out lines that may be causing problems • Single statements • Groups of statements • Combine debugging techniques for more comprehensive approach JavaScript Tutorial 7 - Debugging JavaScript

  25. JavaScript Tutorial 7 - Debugging JavaScript

  26. JavaScript Tutorial 7 - Debugging JavaScript

  27. Basic Debugging Techniques • Additional Debugging Techniques • Checking HTML Tags • If JavaScript bug cannot be found using the techniques mentioned here: • Check HTML code for errors • Missing open/close brackets • Missing open/close tags • HTML bugs generally aren’t announced JavaScript Tutorial 7 - Debugging JavaScript

  28. Basic Debugging Techniques • Additional Debugging Techniques • Analyzing your logic • If bug isn’t a syntax or run-time error: • Check logic • Analyze each statement on a case-by-case basis • Use tracing to ensure values of variables at specific points in the program JavaScript Tutorial 7 - Debugging JavaScript

  29. Basic Debugging Techniques • Additional Debugging Techniques • Testing statements with JavaScript URLs • JavaScript URL • Used for testing and executing JavaScript statements without an HTML document or JavaScript source file • Syntax: • javascript:statement(s) • Enter into the browser Location or Address box JavaScript Tutorial 7 - Debugging JavaScript

  30. Basic Debugging Techniques • Additional Debugging Techniques • Reloading an HTML document • Web browsers can often fail to reload a document when directed to do so • Sometimes, you must, • Reload or refresh • Re-open page • Shutdown and reopen browser • Clear cache JavaScript Tutorial 7 - Debugging JavaScript

More Related