The Full Wiki

JavaScript/Debugging: Wikis

Advertisements

Note: Many of our articles have direct quotes from sources you can cite, within the Wikipedia article! This article doesn't yet, but we're working on it! See more info or our list of citable articles.

Wikibooks

Up to date as of January 23, 2010
Advertisements

From Wikibooks, the open-content textbooks collection

Previous: Metaprogramming Index Next: DHTML

Contents

JavaScript Debuggers

Firebug

  • Firebug is a powerful extension for Firefox that has many development and debugging tools including JavaScript debugger and profiler.

Venkman JavaScript Debugger

Internet Explorer debugging

JTF: Javascript Unit Testing Farm

  • JTF is a collaborative website that enables you to create test cases that will be tested by all browsers. It's the best way to do TDD and to be sure that your code will work well on all browsers.

jsUnit

built-in debugging tools

  • In Firefox, open "Tools >> Javascript console". This displays errors and warnings for some common typos.
  • In Opera 9.5 and above, open "Tools >> Advanced >> Developer Tools" to open Dragonfly. This has many debugging tools such an error console and DOM veiwer.
  • Some people prefer to send debugging messages to a "debugging console" rather than use the alert() function.[2][3][4]
  • Internet Explorer 8 comes with a firebug-like web development tool that can be accessed by pressing F12. The web development tool has a debugger, DOM viewer, CSS editor, and provides the ability to switch between the IE8 and IE7 rendering engines.

Common Mistakes

  • Carefully read your code for typos.
  • Be sure that every "(" is closed by a ")" and every "{" is closed by a "}".
  • Trailing commas in Array and Object declarations will throw an error in Microsoft Internet Explorer but not in Gecko-based browsers such as Firefox.
    // Object
    var obj = {
      'foo'   : 'bar',
      'color' : 'red', //trailing comma
    };
 
    // Array
    var arr = [
      'foo',
      'bar', //trailing comma
    ];
  • Remember that JavaScript is case sensitive. Look for case related errors.
  • Don't use Reserved Words as variable names, function names or loop labels.
  • Escape quotes in strings with a "\" or the JavaScript interpreter will think a new string is being started, i.e:
alert('He's eating food'); should be
alert('He\'s eating food'); or
alert("He's eating food");
  • When converting strings to numbers using the parseInt function, remember that "08" and "09" (e.g. in datetimes) indicate an octal number, because of the prefix zero. Using parseInt using a radix of 10 prevents wrong conversion. var n = parseInt('09',10);
  • Remember that JavaScript is platform independent, but is not browser independent. Because there are no properly enforced standards, there are functions, properties and even objects that may be available in one browser, but not available in another, e.g. Mozilla / Gecko Arrays have an indexOf() function; Microsoft Internet Explorer does not.

Debugging Methods

Debugging in Javascript doesn't differ very much from debugging in most other programming languages. See the article at Computer programming/debugging.

Following Variables as a Script is Running

The most basic way to inspect variables while running is a simple alert() call. However some development environments allow you to step through your code, inspecting variables as you go. These kind of environments may allow you to change variables while the program is paused.

Browser Bugs

Sometimes the browser is buggy, not your script. This means you must find a workaround.

Browser bug reports

browser-dependent code

Some advanced features of Javascript don't work in some browsers.

Too often our first reaction is: Detect which browser the user is using, then do something the cool way if the user's browser is one of the ones that support it. Otherwise skip it.

Instead of using a "browser detect", a much better approach is to write "object detection" Javascript to detect if the user's browser supports the particular object (method, array or property) we want to use.[5] [6]

To find out if a method, property, or other object exists, and run code if it does, we write code like this:

var el = null;
if (document.getElementById) {
    // modern technique
    el = document.getElementById(id);
} else if (document.all) {
    // older Internet Explorer technique
    el = document.all[id];
} else if (document.layers) {
    // older Netscape web browser technique
    el = document.layers[id];
}

For further reading

Previous: Metaprogramming Index Next: DHTML

Advertisements






Got something to say? Make a comment.
Your name
Your email address
Message