Debugging Java Script

December 18, 2002 Timothy Prickett Morgan

Hey, David:

I was playing around with JavaScript after reading your article, “Protecting HTML Page Elements with JavaScript and CSS.” Using your code as a base, I changed one of my pages to do something similar and managed to key the function name incorrectly in the onchange attribute. I spent quite a while looking for the error and didn’t find it until I went to advanced options in Internet Explorer and checked the Display a notification about every script error checkbox.

If I should ever repeat that mistake, how would I locate JavaScript errors?

While testing, I also saw something very strange. In some cases, I was able to key a single character into the first protected field after disabling that field. As far as I could tell, that only occurred with Windows Explorer 5.5.

— Jeff

There are several techniques you can use to locate JavaScript errors. Turning on script error notification, which you already found is the first step. You can also use the alert function in JavaScript to print out debugging messages. I use this technique to track the execution of scripts and display element values. The following example shows how to use the alert function:

<script language="JavaScript" type="text/javascript">
  function shipToChange() {
    if (document.getElementById("shipTo").checked == true) {
      alert(document.getElementById("shipTo").value);
      ...

This code is taken from my tip that was published in the article you referenced in your question . The call to the alert function causes a pop-up message to appear every time you check the shipTo checkbox.

For more difficult problems, I use the script debugger that plugs into Internet Explorer. The script debugger is available from the Microsoft Windows Script Debugger Web page.

After you install the script debugger, script errors will start the script debugger. The script debugger allows you to step through scripts and view script variables. Overall, it is a very useful debugging tool, but in some cases it can cause Internet Explorer to crash.

I was able to duplicate the problem–entering a single character in a disabled field-that you experienced. Changing the script to use the onblur event rather than the onchange event will fix the problem. The revised code looks like this example:

<td><input type="checkbox" name="shipTo" onblur="shipToChange();"></td>

JavaScript is fickle, and there are changes with every release. For that reason, it is always a good idea to test your scripts against any browser your users are using.

Using alert and the script debugger can make that testing go more smoothly.

— David

Sponsored By ADVANCED SYSTEMS CONCEPTS

Business Analytics – Practical – – Cost Effective – – Easy to Deploy – SEQUEL FYI User Quote: “I love SEQUEL FYI because it lets me look at the data any way I need to see it, instantly. This is the easiest tool to manage complex product relationships that I have ever seen.” SEQUEL FYI offers outstanding OLAP business intelligence functionality for a fraction of the cost of comparable solutions. Read More > View Streaming Video