Troubleshooting JavaScript

Superb troubleshooting skills are a must for scripters. This is especially true with JavaScript as scripting engines can be unbelievably unforgiving. They demand that syntax be absolutely perfect.

While we can talk about and study proper syntax until we turn blue, you won't be able to execute a script if you don't have good troubleshooting skills. Why?  Because we are human. We make mistakes. Period. Very minor syntax mistakes such as forgetting a period, using a double quote instead of a single quote or misspelling words are all examples of mistakes that will cost you a properly executing script. Since JavaScript is case sensitive, the chance of making a mistake even with a simple statement is quite good. Get used to it, you will make these mistakes.

If you find yourself tempted to throw in the towel after the 106th attempt at a perfectly executing script, don't. Notice the word "skill." Developing a skill requires time and energy. With persistent practice, you WILL learn!

Luckily, you have the benefit of learning from not only my mistakes, but also the mistakes I saw students make. I've tried to include warnings for the most common blunders in the lessons, as well as a troubleshooting checklist to get you started.

Troubleshooting Checklist
  1. Use Firefox's JavaScript Console (Shift + Control + J)
  2. Use the View Source Chart Firefox extension (A MUST-HAVE!)
  3. See this list of 10 most popular Web development Firefox Add-ons
  4. Use the alert() Method
  5. Use the excellent debugging tool, JSLint
  6. Use the typeof Operator
  7. Take A Break

Use the Firefox Browser's JavaScript Console

Shift + Control + J to bring up the console. Be sure to select the "All" option to view all messages, warnings, and errors. Clear the console after each viewing to be sure you're seeing updated logs each time it is launched.

Use View Source Chart

I've written a Firefox add-on called View Source Chart, a DOM inspection tool. If your scripts generate HTML, or you have a very complex site - especially one that is pieced together from server-side, this add-on will save you a lot of debugging time! In fact, some sites are so complex, I do not know how a developer could possibly debug without it.

The the alert() Method

Just as you use DOM inspection tools to display generated HTML, you can use an alert box. To try it, type "javascript:alert(dyNavig)" (without quotes) into the location field of this page. This will display the HTML for this page's navigation. There are many ways to use the alert method for troubleshooting, which you will see throughout this tutorial.

Typeof Operator

The typeof operator is useful for determining the type of data you are working with. If you read the Introduction to JavaScript, you know why that is important.

Take A Break

I can't tell you how many times this has helped me. Sometimes walking away and clearing your head makes all the difference when you get stuck. Try it!

 


View Source | Home |