Using Firebug
by Geethalakshmi[ Edit ] 2010-09-16 21:27:55
Using Firebug
Firefox has a fabulous extension for debugging JavaScript code called Firebug. It offers an object inspector, a debugger with breakpoints and stack views, and a JavaScript console. It can also monitor Ajax requests. Moreover, the extension provides a set of JavaScript functions and objects to simplify debugging. You may explore them in detail at Firebug's documentation page. Here are some that I find most useful:
$ and $$
Those familiar with Prototype will immediately recognize these two functions.
$() takes a string parameter and returns the DOM element whose id is the passed string.
$('nav') // returns the element whose id is #nav.
$$() returns an array of DOM elements that satisfy the passed CSS selector.
$$('div li.menu') // returns an array of li elements that are
// located inside a div and has the .menu class
console.log(format, obj1, ...)
The console object provides methods for displaying log messages in the console. It's more flexible than calling alert. The console.log() method is similar to C's printf. It takes a formatting string and optional additional parameters, and outputs the formatted string to the console:
var i = 1;
console.log('i value is %d', i);
// prints:
// i value is 3
console.trace()
This method prints a stack trace where it's called. It doesn't have any parameters.
inspect(obj)
This function takes one parameter. It switches to the inspection tab and inspects the passed object.
