Use it to highlight the various areas of a web page and let it display the CSS rules that are being applied to that area while you hover over it with your mouse.
It'll let you preview/test CSS changes by applying them live to any site (including other's sites) without actually changing or re-uploading the code. Very useful and probably used by every web designer
There's also the IE developer toolbar, perhaps not as good but can serve as a similar tool to diagnose IE specific problems.
Opera has something like that, too, it's called "Developer Tools".
All three of these integrate into the respective browser.
http://www.getfirebug.com/ or https://addons.mozilla.org/firefox/addon/1843
(I've not checked which one's for FF2 or FF3 or if the same works for both)
Firebug Usage:
- After Firebug is installed, click (In Firefox) "Tools" -> "Firebug" -> "Open Firebug"
- In Firebug, click "Inspect", then point your mouse at somewhere on the web page itself or at a HTML tag ("<div class=..." etc) in the web page code window of Firebug (bottom left)
- Watch the window at the bottom right in Firebug to see all CSS rules that are being applied to the selected area of the web page. Rules on top of the list take precedence over rules further down. Firebug shows the whole cascaded list of applied rules, including CSS rules that are being overwritten.
- To further inspect or modify the CSS for a certain part of the page, click on an area in the web page, or a HTML tag in the code window (bottom left), then go into the CSS rules window (bottom right), scroll around and click on a CSS property or value to change it directly.
- Wait a second or click somewhere outside to see how the changed rule is being applied.
- To add a new property/value pair, double click somewhere between the opening/closing curly braces of the selector of the respective CSS style.
- You may loose the "Inspect" tab while doing this and may have to re-select that tab now and then.
