Knowledge Base

Knowledge Base Topics


Debugging 101

I. Simple Debugging

alert() is your friend.
The easiest way to tell if a section of code is being executed, or if variables contain the values you think they should, is to drop alerts in to your code.Any Object in a browser can be alerted, and will always yield something; Javascript calls the Object’s toString() method to get the display value and thiscan be used as a quick way to narrow down where a problem may lie. For instance, if the following line of code was causing an ‘Object expected’ error:
document.form1.element1.someFunction();
… and you weren’t sure what portion was causing it, you could narrow it down using:

alert(document.form1);
alert(document.form1.element1);
alert(document.form1.element1.someFunction);

… if any of those lines yields ‘undefined’, you know where to start looking.

Alert can also be used to output more than one value at a time. For example, if you had x, y, w and h variables and you wanted to see all of them at once, you can do so by placing them into an inline Array like so:
alert([x, y, w, h]);
The browser will then popup one alert box containing all four values, separated by commas. (it uses the toString() method of the Array)

II. Advanced Debugging

Each browser has at least one debugger available for it. Here’s how to obtain them:

Microsoft Internet Explorer: download the Microsoft Script Debugger. It will tell you exactly which line is causing a problem. In order for it to work properly you’ll need to enable error notification in IE. Go to Tools>Options>Advanced and uncheck Disable script debugging and check Display a notification about every script error. You may need to reboot your computer for the changes to take effect. Microsoft also offers a Developer Toolbar.

Mozilla/Firefox has several tools available including the Javascript console and Javascript inspector. These can be found in your browser menu under Tools>Web Development.


Common coding mistakes

I. Using bad names/IDs

  • Avoid using name for anything besides form elements (form, imput, select, button, etc…), use ID to reference anything else (div, table, tr, td, etc…).
    Don’t name your form “form”, or your submit “submit”

  • Don’t use function names as the the names of elements either

  • Don’t assign the same ID to more than one element, ID is supposed to be unique.

  • A name isn’t an ID, and an ID isn’t a name, even though they both may appear the same.

  • If you use php, don’t name your form elements as an array. “radio[]” is NOT a valid name.

II. Calling elements before they are loaded

If you call an element before it is loaded (e.g. ) it will cause an error to be thrown. Save code like that for the onload trigger is/has been fired instead.

III. Javascript is case sensitive

Use Array() and not array(), Image() and not image(), and if you declare var fooNany then foonany won’t reference it.The same goes for event handlers, it is onclick = function () {alert("you clicked!");} and not onClick = function.....

IV. Invalid MIME Types

The correct mime type for javascript is text/javascript. This MIME type must also be written in lower-case in order to work properly.

You can do away with the language attribute unless you plan on supporting older (4.0) versions of popular browsers.

Making your code cross browser compatible

I. Follow the standards

If you follow the standards set out in JavaScript 1.5, as well as those of ECMAScript 3, then you’re less likely to have cross-browser issues.

II. Don’t use browser specific code when there is no need

Avoid the following:

document.all – use document.getElementById() instead

formName.elementName – use document.formName.elementName instead