Sams Teach Yourself JavaScript in 24 Hours

By Michael Moncur

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • We Want to Hear from You!
  • Reader Services
  • Introduction
  • Part I: Getting Started
  • Hour 1. Understanding JavaScript
  • Hour 2. Creating a Simple Script
  • Hour 3. How JavaScript Programs Work
  • Part II: Learning JavaScript Basics
  • Hour 4. Using Functions and Variables
  • Hour 5. Using Strings and Arrays
  • Hour 6. Testing and Comparing Values
  • Hour 7. Repeating Yourself: Using Loops
  • Hour 8. Using Math and Date Functions
  • Part III: The Document Object Model (DOM)
  • Hour 9. Working with the Document Object Model
  • Hour 10. Responding to Events
  • Hour 11. Using Windows and Frames
  • Hour 12. Getting Data with Forms
  • Hour 13. Using Graphics and Animation
  • Part IV: Moving on to Advanced JavaScript Features
  • Hour 14. Creating Cross-Browser Scripts
  • Hour 15. Creating Custom Objects
  • Hour 16. Working with Sounds and Plug-Ins
  • Hour 17. Debugging JavaScript Applications
    • Avoiding Bugs
    • Basic Debugging Tools
    • Creating Error Handlers
    • Workshop: Debugging a Script
    • Summary
    • Q&A
    • Quiz
    • Exercises
  • Part V: Working with Dynamic HTML (DHTML)
  • Hour 18. Working with Style Sheets
  • Hour 19. Using Dynamic HTML (DHTML)
  • Hour 20. Using Advanced DOM Features
  • Part VI: Putting It All Together
  • Hour 21. Improving a Web Page with JavaScript
  • Hour 22. Creating a JavaScript Game
  • Hour 23. Creating DHTML Applications
  • Hour 24. JavaScript Tips and Tricks
  • Part VII: Appendices
  • Appendix A. Other JavaScript Resources
  • Appendix B. Tools for JavaScript Developers
  • Appendix C. Glossary
  • Appendix D. JavaScript Quick Reference
  • Appendix E. DOM Quick Reference

Basic Debugging Tools

If checking your script for common mistakes and obvious problems doesn't fix things, it's time to start debugging. This is the process of finding errors in a program and eliminating them. Some basic tools for debugging scripts are described in the following sections.

Netscape's JavaScript Console

The first thing you should do if your script doesn't work is check for error messages. In Netscape 4.5 and later, the messages are not displayed by default, but are logged to the JavaScript console.

To access the console, type javascript: in Netscape's Location field or select Tasks, Tools, JavaScript Console from the menu. The console displays the last few error messages that have occurred, as shown in Figure 17.1.

Figure 17.1 The JavaScript console displays recent error messages.

Along with reading the error messages, you can use the console to type a JavaScript command or expression and see its results. This is useful if you need to make sure a line of your script uses the correct syntax.

Displaying Error Messages in Internet Explorer

Microsoft Internet Explorer 4.0 and later do not display JavaScript error messages by default. While this can make browsing poorly-written pages a more pleasant experience, it can be frustrating to JavaScript programmers.

To enable the display of error messages in Internet Explorer, select Internet Options from the Tools menu. Select the Advanced tab. In the list under browsing, deselect the "Disable script debugging" option and enable the "Display a notification about every script error" option.

If you haven't enabled the display of error messages, Internet Explorer still displays an error icon on the status line when an error occurs. You can double-click this icon to display the error message.

Alert Messages and the Status Line

If you're lucky, the error messages in the console will tell you how to fix your script. However, your script may not generate any error messages at all—but still fail to work correctly. In this case, the real debugging process begins.

One useful debugging technique is to add temporary statements to your script to let you know what's going on. For example, you can use an alert message to display the value of a variable. Once you understand what's happening to the variable, you can figure out what's wrong with the script.

You can also display messages on the status line using the window.status property. This technique is especially useful when you are displaying lots of messages and don't want to acknowledge a dialog box for each one.

Using Comments

When all else fails, you can use JavaScript comments to eliminate portions of your script until the error goes away. If you do this carefully, you can pinpoint the place where the error occurred.

You can use // to begin a single-line comment, or /* and */ around a section of any length. Using comments to temporarily turn off statements in a program or script is called commenting out and is a common technique among programmers.

Other Debugging Tools

Although you can use alert messages and a little common sense to quickly find a bug in a simple script, larger scripts can be difficult to debug. Here are a few tools you may find useful as you develop and debug larger JavaScript applications:

• HTML validators can check your HTML documents to see if they meet the HTML standard. The validation process can also help you find errors in your HTML. The W3C has a validator online at http://validator.w3.org/.
• Netscape's JavaScript debugger allows you to set breakpoints, display variable values, and perform other debugging tasks. You can download the debugger at this URL: http://developer.netscape.com/software/jsdebug.html. The debugger does not yet support Netscape 6, but a version is in development: http://www.mozilla.org/projects/venkman/.
• Microsoft Script Debugger is similar, but works with Internet Explorer. It is available from this URL: http://msdn.microsoft.com/library/en-us/sdbug/Html/sdbug_1.asp.
• While text and HTML editors are good basic editing tools, they can also help with debugging by displaying line numbers and using color codes to indicate valid commands.

Share This