I downloaded the Firebug 1.0 beta the other day and I gotta say it’s fantastic. This is the coolest HTML and CSS debugging tool to come along since the Firefox Web Developer toolbar. In fact, my Web Developer toolbar hasn’t seen much use this past week since I’ve started using Firebug.
Basically, Firebug lets you inspect any element on a web page. Once you’ve selected an element to inspect, Firebug shows you where the element is in the source code and gives you a breakdown of all the style rules that apply to the element, including inherited rules. At any time you can make changes to the markup and the style and see those changes reflected immediately in the browser, just like the “Edit CSS” tool in the Web Developer toolbar.
Perhaps my favorite feature of Firebug is the layout tool. This lets you see at a glance the box model for the element you’re inspecting — width, height, padding, border, margin, and offset. As you hover over each part of the object model in the layout diagram, rulers and guide lines are rendered over the browser page so you can see if an element lines up with other elements above, below, or to the sides of it.