Stephanie Leary

Writer and WordPress consultant

  • Books
    • Content Strategy for WordPress (2015)
    • WordPress for Web Developers (2013)
    • Beginning WordPress 3 (2010)
  • Blog
    • Fascism Watch (2016-17)
    • Content Modeling for WordPress series
    • WordPress Hidden Gems series
  • Work
    • Portfolio
    • Services
    • WordPress Plugins
    • WordPress Themes
    • Presentations and Interviews
    • on GitHub →
  • About
    • Press Kit
  • Contact
    • Mailing List

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

Leave a Reply Cancel reply

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

Latest WordPress Book

Content Strategy for WordPress

A short book for content strategists and managers on implementing a complete content strategy in WordPress: evaluation, analysis, content modeling, editing and workflows, and long-term planning and maintenance.

Read the sample chapter

Kindle Nook iBooks Kobo Smashwords

WordPress for Web Developers

WordPress for Web Developers (9781430258667)

This is a book for professional web designers and developers who already know HTML and CSS, and want to learn to build sites with WordPress. The book begins with a detailed tour of the administration screens and settings, then digs into server-side topics like performance and security. The second half of the book is devoted to development: learning to build WordPress themes and plugins.

This is the second, much-revised and updated edition of Beginning WordPress 3, with a more accurate title. Everything’s been updated for WordPress 3.6.

WordPress for Web Developers is out now. See what's inside...

The best WordPress features you’ve never noticed

  • WordPress Hidden Gems: Screen Options
  • WordPress Hidden Gems: Bulk Edit
  • WordPress Hidden Gems: Private Status
  • WordPress Hidden Gems: Dashboard Feed Readers
  • WordPress Hidden Gems: Options.php

Content Modeling for WordPress series

  • Content modeling for WordPress, part 1: analyze content
  • Content modeling for WordPress, part 2: functional and organizational requirements
  • Content modeling for WordPress, part 3: a sample content model

This is an excerpt from Content Strategy for WordPress.My latest books are Content Strategy for WordPress (2015) and WordPress for Web Developers (2013). Sign up to be notified when I have a new book for you.

Copyright © 2022 Stephanie Leary