• Skip to primary navigation
  • Skip to main content
  • Skip to footer
  • Books
    • Content Strategy for WordPress (2015)
    • WordPress for Web Developers (2013)
    • Beginning WordPress 3 (2010)
  • Blog
    • Content Modeling for WordPress
    • WordPress Hidden Gems
    • Web Design
  • Work
    • MLIS Class Projects (2019-2022)
    • Portfolio (2002-2019)
    • Services
    • WordPress Plugins
    • WordPress Themes
    • Presentations and Interviews
    • on GitHub →

Stephanie Leary

Writer, WordPress consultant, recent MLIS grad

  • About
    • Press Kit
    • Presentations and Interviews
  • Contact Me

Firebug

December 8, 2006 Stephanie Leary Leave a Comment

Warning: web geekery ahead.

This morning I was running through my RSS feeds when I came across a post entitled, “Firebug 1.0 – Web developer tool of the year?” Now, I have a lot of respect for Roger Johansson. Still, I thought, Firebug? Seriously? A JavaScript debugger is more useful than, say, the Web Developer Toolbar?

Turns out Firebug isn’t just a JavaScript debugger anymore. The new version includes all kinds of nifty toys, including the best CSS diagnostic tools ever built. Check it out:

Firebug screenshot (see the full size)

I don’t know of any other CSS editor that gives you a real-time, editable box model diagram of any selected element. Hell, I don’t know of one that does box model diagrams at all. And that Style tab next to Layout? That’ll show you all the CSS styles applied, including those inherited from parent elements, and it’ll cross out any rules that have been trumped by something else. You can turn off each line, to remove one rule at a time until you find the problem, or you can just edit the properties and values.

That screenshot shows the first thing I tried to debug. That’s a layout error that’s had me puzzled since I built the site a year ago. (See how the yellow stuff overlaps the left column?) Two seconds with Firebug and I can see the problem; two minutes later it’s solved.

There’s a lot more to love — all the JavaScript stuff is still there, plus the network monitoring utility that shows you how long it’s taking to download each file associated with a page. But I spend most of my time with CSS, so it’s that Layout tab that gave me a religious experience this morning.

Web developer tool of the year? No contest.

ETA: Here’s a brief screencast showing off Firebug’s CSS editing and AJAX monitoring features. (via Simplebits)

Web Design

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

My Books

I’m a front end developer at Equinox OLI, working on open source library software. I was previously a freelance WordPress developer in higher education. You can get in touch here or on LinkedIn.

Copyright © 2023 Stephanie Leary · Contact