Firebug can make life easier

by Pascal Opitz

published 28 June 2007

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!

Comment

  1. 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
    — Louis Lapointe    6 July, 1:31pm    #

Have your say

If your comment doesn't show up straight away, please don't be offended - we're not censoring, we are just trying to keep out all the viagra and poker ads. Thanks to an explosion of spam all comments are held for manual green-lighting.

name Remember
email
http://
Message <?>

Quick links

Other people's articles that we think you might be interested in: