Firebug, The Future of Javascript debugging with Firefox

FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including an error console, command line, and a variety of fun inspectors. The new Firebug 0.4, which […]

FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including an error console, command line, and a variety of fun inspectors. The new Firebug 0.4, which is still under tests include many interesting features, will make debugging of Javascript applications more fun and easy. The new version will be mainly marked by the advanced javascript debugger, with breakpoints, then there is the new console log API. For example rather than having tons of alerts this is very practical to use :



Welcome to Firebug Console console.log('Welcome to Firebug Console');

What is interesting is that you can even use variable inside the log method similar to printf method

var time = new Date(); // Print out : Today is Sun May 21 2006 ... console.log('Today is %s.', time)

There is more colorful debug message that you can use and give you something like :

console.debug('This is just debugging text!'); console.info('This is some information.'); console.warn('This is a warning.'); console.error('This is an error!');
colorful-log.png

If you want to check the performance of a process you can use the Firebug timer, and this will be useful to have an idea about the execution time and help detecting resources consuming issues more easily.

console.time("date"); var time = new Date() console.log('Today is %s.', time); console.timeEnd("date");

Assertion are also available in the new API for example

console.assert(0) assert-fail.png

For more information refer the links below...