Content with Style

Web Technique

Firebug can make life easier

by Pascal Opitz on June 28 2007, 11:06

Today I was pointed to a couple of handy functionalities in the Firebug plugin by Peter Mescalchin, who’s one of the UI developers I am currently working with.

The highlight here is the console.log() function for debugging. This first of all gets rid of all those alerts that pause the application till we click the button of the alert box.

When we pass a dom node to console.log() instead of a string, we’ll have the dom node in the console, that on rollover highlights it’s position on the page.

Amazing is that this is even possible with an array of nodes, i.e. out of getElementsByTagName() or something similar.
The output will be a nice little list of nodes that on rollover can be identified in the browser window.

Changing console.log() to console.dir() gives an even more detailed view on the object, with properties and so on, vaguely similar to a print_r or vardump in PHP, just that the console lets you collapse the single nodes etc.

Another great feature is the possibility to set breakpoints and debug your javascript application line by line.

For a deeper insight check out the video featuring Joe Hewitt or read the reference for the firebug console API

Thanks for the tip Pete!

Comments

  • Thank you for this great tip. I have been using firebug and console.log for sometime now but console.dir? Wow! I had to go to the dom tab and dig deep. Now I can have my object with all its properties and methods and need only dig there. Amazing!

    Thank you again for this time machine!
    Louis

    by Louis Lapointe on July 6 2007, 07:31 #