This is the lighter side of we love... opinions, news, fun stuff, our friends and partners. Enjoy, comment and spread the love...

« back to blog

Fun with Firebugs console.log

Many of you will be using firebug and console.log regularly to dump data from your javascript apps – mainly for quick and easy debugging. There are actually many more powerful logging functions built into console.log to help organise this data.

Logging object hyperlinks

You can pass any kind of object to console.log and it will be displayed as a hyperlink. Clicking these links will inspect the object in whatever tab is most appropriate. console.log and its related functions can do a lot more than just write text to the console.

String formatting

console.log can format strings in the great tradition of print. For example, you can write console.log("%s is %d years old.", "Bob", 42).

Color coding

In addition to console.log, there are several other functions you can call to print messages with a colourful visual and semantic distinction. These include console.debug, console.info (blue), console.warn (yellow), and console.error (red). – give them a try!

Nested grouping

Sometimes a flat list of messages can be difficult to read, so Firebug gives you a solution for indenting in the console. Just call console.group("a title") to start a new indentation block, and then console.groupEnd() to close the block. You can create as many levels of indentation as you please.

Object inspection

How many times have you hand-written code to dump all of the properties of an object, or all of the elements in an HTML fragment? With Firebug, you’ll never write that code again.

Calling console.dir(object) will log an interactive listing of an object’s properties, like a miniature version of the DOM tab. Calling console.dirxml(element) on any HTML or XML element will print a lovely XML outline, like a miniature version of the HTML tab.

Hope these help!

No Comments »

Leave a Reply