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.
To round out the feature list, Firebug also lets you explore the Document Object Model, captures JavaScript events including XMLHttpRequests, and lets you add break points so you can get a better idea of what’s happening with those pesky scripts. You can also execute JavaScript on the fly from a command line interface.
To get a better look at Firebug in action, check out this Firebug 1.0 beta screencast put together by Jesse Newland over at Soylentfoo.