If you have anything at all to do with making web pages, you’ve gotta get Firebug. After a year of beta development, developer Joe Hewitt announced the final release of Firebug 1.0 on Wednesday. And friends, it’s a web developer’s dream.
Firebug is a free, open-source project, but Joe accepts donations with a recommended contribution of $20. It’s worth much more than that, so if you find it useful, please… consider sending him a little coin.
But here’s the nickel tour.
Firebug runs in a little console at the bottom of the Firefox browser; a single click conjures or dismisses it (you can also detach Firebug into a separate window).
Inspect HTML and CSS
To inspect any element of the page, click the Inspect tab then the element to explore. The console shows the element’s HTML contents in the left window. The right side of the console shows all of the CSS styles that apply to the element.
The truly cool thing about the CSS display is that you can see all of the element’s inherited styles, including styles that have been overridden along the inheritance path (or “cascade”). In the screenshot above (click to enlarge), you can see that the
color attribute for
.leftColumn paragraphs has been overridden for the selected paragraph by the
.bigPara class. Ditto for the
p paragraph styles for
If you ever have a page where your CSS styles don’t seem to be behaving, this is a hyper-efficient way to discover why. It even shows you the line number of every style declaration in your style sheet. Click the line number, and the console opens the style sheet at that line number, ready for editing.
Edit in Place
Just about everything that you see in the console can be edited. Select the item to edit, click the edit tab and type in any HTML that you like. The display updates in real time in your browser, making it easy to experiment with changes in your browser.
The same goes for CSS. Click on any attribute, and enter a new value (or just use the up and down arrow keys to increase/decrease the value by one unit). You can do free-form editing of an entire CSS style sheet by clicking the CSS tab, choose your style sheet from the dropdown menu and click “Edit.” Here again, the page display updates immediately to show your changes.
Nope, the changes aren’t saved, and they’re not permanent; it’s just a way to see what changes might look like before applying them to your actual page.
“A lot of people are comparing Firebug to Dreamweaver,” Joe says. “I wouldn’t do that. It’s not trying to replace Dreamweaver. The model for using this feature is that you want to find out what effect a change has. Then you want to take the changes back to your text editor and actually cement that change into place.”
Network Activity and Page Weight
You can also explore details about individual items, including the HTTP headers and content. Just hovering over an image in the display shows you a thumbnail and the image’s dimensions (this trick works everywhere in Firebug, incidentally).
For Ajax-enabled pages, you can also watch the background
XMLHttpRequest requests and responses happen in real time, including the round-trip response time, headers, form queries and response content.
Seriously, run don’t walk to download Firebug. This extension has saved me countless hours in the year since I started using it. It’s an amazing and sublime addition to the Firefox browser. Highly recommended.