Explore the DOM with Firebug

A very useful Firefox extension that makes it both easy and fun to explore the DOM is Joe Hewitt’s FireBug. Firebug logs JavaScript, CSS, and XML errors to a console. You can configure which errors to log, so if you don’t want CSS errors in the Firebug console, just turn them off.

Want to explore the DOM of the document you are viewing? Just open the Firebug Inspector and the DOM is right there. Click the “Inspect” button and you can use your keyboard to navigate through the DOM. Anything you select in the inspector is highlighted on the rendered page.

When your scripting doesn’t work properly and you can’t figure out why, use Firebug’s lightweight JavaScript debugger to set breakpoints and examine your scripts as they execute.

Firebug does more than just inspect. It will also let you edit the values of existing attributes, which can be very useful when debugging. If you want to use another approach than “alert debugging” when working with JavaScript, you can use JavaScript to write text and objects to the FireBug console.

There’s more to FireBug than what I have described here, so try it out for yourself.

Posted on May 29, 2006 in Browsers, JavaScript, Quicklinks

Comments

  1. May 29, 2006 by Ara Pehlivanian

    FireBug is so useful I sometimes wonder how I managed before it came along. Working on websites without FireBug is like trying to repair a car with a butter knife.

  2. May 29, 2006 by Justin Palmer

    I recently written in-depth about Firebug here: Javascript Debugging with Firebug.

    The new version is packed with some very wonderful features.

  3. May 30, 2006 by Darren Hoyt

    Great Flash tutorial here:

    http://www.digitalmediaminute.com/screencast/firebug-js/

  4. May 30, 2006 by Henrik

    Firebug is a great tool. It seems much more practical than Venkman, but still a bit awkward when compared to traditional language debuggers.

  5. May 30, 2006 by Morgan Roderick

    Amazing!

    I :heart: Firebug a little more every day

  6. May 30, 2006 by Tim Hofman

    It’s a great tool to use. I would recommend it to everybody.

  7. May 30, 2006 by zcorpan

    Sounds like an improved version of the built in Error Console (previously called JavaScript Console) and the DOM Inspector.

  8. June 1, 2006 by Nigel : BiZwiKi.CN

    ah.. Great plugin for me, just a little tricky with its Harsh checking lines.

  9. June 2, 2006 by bart

    Great start, but some styles don’t show up in the inspector (text-indent:-5555px;).

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.