Wednesday, January 25, 2012

Logging Information to the Firebug JavaScript Console

Logging Information to the Firebug JavaScript Console

Firebug is the ultimate Web Developer debugging tool. Firebug gives you control over the page's XHTML, JavaScript, CSS, AJAX requests, and more. It's important not to simply take in what Firebug tells you though -- you can log information to your Firebug console from within your page's JavaScript. Here are a few of the helpful methods you can use:

console.log()

copyconsole.log('Application is starting.');

The console.log() method logs a message to the console without providing a line number. Simple but useful.

console.debug()

copyconsole.debug('Gets to this point without error.');

The console.debug() method logs a message to Firebug console just like log(), but debug() provides a line number reference.

console.info()

copyconsole.info('DOM is ready, now executing Moo event.');

The console.info() method logs a message to the Firebug console with a blue "information" icon. Line number reference is included.

console.warn()

copyconsole.warn('Form field [title] has no value.');

console.warn() sets a warning within the console. The warning provides a yellow background color to easily spot warnings within the console.

console.error()

copyconsole.error('The [title] element is undefined.  Bad news.');

The console.error() method places a custom error message within the console with a pink background. Easy to spot.

Each of the above methods accept an "object", or array of objects, and works much like a print-f.

With Objects

copyconsole.log("The %d item has a value of: %d", fifth, myvalue);

This probably looks familiar to a PHP programmer.

Make the most of your Firebug -- send your own message to the console!

No comments: