Troubleshooting JavaScript

Superb troubleshooting skills are a must as a programmer. This is especially true with JavaScript as scripting engines can be unbelievably unforgiving. They demand that syntax be absolutely perfect - and if it's not, they'll be sure to let the whole world know you made a mistake by popping up error boxes all over your site (IE). And that's when they're in a good mood - on a bad day they may decide to freeze or crash the browser.

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'll start to "get it."

Luckily, you have the benefit of learning from not only my mistakes, but also the mistakes I saw students make over and over. 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
  2. Use the View Source Chart Firefox extension (A MUST-HAVE!)
  3. Turn on IE's Script Debugging
  4. Use the View Rendered Source add-on for Internet Explorer.
  5. Use JSUnit
  6. Use the alert() Method
  7. Double and Triple Check Syntax
  8. Use the typeof Operator
  9. Look At Similar Scripts to Check For a Logic Error
  10. Take A Break
  11. Enlist a 2nd Set of Eyes

Use the Firefox Browser's JavaScript Console

Type, "javascript:" (without the quotes) into the location field of your Firefox browser. Out will pop the JavaScript console. Better yet, create a bookmark on your toolbar with the location being, "javascript:". 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 the next time you launch it.

Use the Firefox extension, "View Source Chart" by Me.

I've written a Firefox extension called View Source Chart which not only displays the rendered source (script output within the context of static source), it "charts" that source. Charting adds a layer of organization and interface to source code which no other development tool has ever done. By color coding the containership of HTML, the user is able to see exactly how many elements contain the current element, and what type of container (td, p, div, etc.) those elements are. All without having to visually navigate up through messy code. Yippee!

Turn on IE's Script Debugging

While sometimes cryptic, I have found this error notification to be helpful in that it does point you in the general direction of a problem. To have IE alert you to a script error, go to Tools > Internet Options and select the Advanced tab. Under the Browsing heading is an option which says, "Display a notification about every script error". If that option is checked, uncheck it. You will be surprised at the number of sites - including the "biggies" - whose scripts generate errors.
Aside: I recently discovered the culprit behind the sudden barrage of script errors I've been seeing while surfing the web. See the article on the Google Toolbar and Popup Window Script Errors for more information.

"View Rendered Source for IE" Program by Bill Friedrich

A shortcut to viewing generated HTML for iE is accomplished with the "View Rendered Source For IE" Program written by Bill Friedrich. This nifty little program for IE allows the source to be viewed similar to the way NN 4.x displays it. On IE6 for WinXP, the View Rendered Source option appears on my right click context menu. It displays both the JavaScript and the HTML it generates for all but one of my scripts (not sure why - I'd prefer only the HTML). It seems to ignore some of the line breaks I placed in my scripts, the result being the HTML is displayed on one line. In spite of these problems, I find it to be a very useful tool and easier to use than an alert call.

JSUnit

At last, good JavaScript debuggers! Download JSUnit and read up on its documentation. Another great debugger is the Firefox extension, FireBug.

The the alert() Method

JavaScript if often used to generate the HTML of a page. The JavaScript generated navigation menu at the top of this lesson is a good example. If you look at this page's source, you do not see the navigation HTML - only a bit of JavaScript. Obviously, being able to see the result of your scripts is quite helpful when troubleshooting problems.

Just as the View Rendered Source programs mentioned above allow you to view generated HTML by viewing the page's source, you can use an alert box to display the generated HTML. To try it, grab the source for this page. and find "document.write(dyNavig)". Place "alert(dyNavig)" (without quotes) on the line before the "document.write(dyNavig)" statement. When you load the page after saving the changes, you will see the script-generated HTML navigation that is about to be written to the page in an alert.

The alert method is also useful for testing the value of a variable or literal at different times during execution. That'll make more sense when we get to the loop lesson!

Check Syntax

Once I wrestled with an error for 3 days before I realized I had typed a lowercase "i" when it should have been an uppercase "i". Need I say more? No, but I will. Always check the grammar of your objects, properties and methods! Even editors can be trouble makers. Homesite does a weird thing with an unsaved page - when browsing a page containing alerts (for debugging of course), if you press the return key one too many times, carriage returns are inserted into the source. Who'd have thought?

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. Use of the typeof operator is covered in depth in the "Special Operators" tutorial.

Self Explanatory Troubleshooting Tips

  1. Look At Similar Scripts to Check For a Logic Error
  2. Take A Break
  3. Enlist a 2nd Set of Eyes

>>Introduction To JavaScript
>>troubleshooting JavaScript



Home | Contact