Ask web developers to name their desert island Firefox extensions (ignoring for now the improbability of having a laptop while stranded), and they're bound to put Firebug at or near the top of their lists.
Firebug is a web development tool for tweaking CSS, debugging JavaScript and more. In part, it's like juiced-up "view source" for seeing how sites are put together. But Firebug really shines when it's used to streamline your own development.
The extension's slogan is "web development evolved," which is apt, given how much it changes one's approach to web work. The tools available in the standard installation of Firebug are super. Coupled with additional functionality available via Firebug extensions (sort of meta extensions, which add on to Firebug itself), you may feel like you have evolved.
Getting started: installing Firebug
Installing Firebug is as easy as installing any Firefox extension. Just get the latest Firebug (requires Firefox 3) and Firefox should take over. After it installs, you'll need to restart Firefox.
Firebug for designers
The part of Firebug I use every day is more designer-oriented. I end up using it on other people's sites more than my own. Ever see a site and wonder how it is put together? Firebug makes it easy to find out.
Inspect HTML and CSS
The heart and soul of Firebug is the [Reference
ocument Object Model | DOM] inspector. You can look at any HTML element to see its box model (height, width, border, margin, padding, and offset from upper left corner), as well as all the CSS for that element (literal and inherited). Designers, Firebug is your Excalibur.
Go ahead and load up a page you want to inspect. You can use your own site, or someone else's. It can be local or on the web. To start inspecting elements, click the little Firebug icon in the lower right hand corner. You can also go to Tools > Firebug > Open Firebug.
Once the Firebug pane comes up, click the Inspect button:
Then you can move your mouse over the page and see an outline around elements of the page:
When you find the one you want, click on it. You'll now see its section highlighted in the HTML code in the Firebug pane. Also, on the right side of Firebug is a list of CSS styles that are used by this element.
You can edit the CSS immediately. Just change values, or click the stop sign to the left of a line to temporarily disable that line. You'll immediately see the changes take place in the browser.
Make your sites PixelPerfect with Firebug
Firebug gives you control to change the position of elements and see the changes immediately in the browser. No Save-Cmd-Tab-Reload going on here. One thing missing from Firebug is the ability to see a mockup image of a site overlayed on the actual site. This feature exists in a Firebug extension called PixelPerfect.
Some HTML purists will tell you that attempting to obtain true pixel perfection will inevitably result in messy code. But I say if it's possible to easily make your web page look exactly like you designed it, go forth and be a perfectionist.
With PixelPerfect, you set an overlay graphic and give it a transparency level. Then you can make CSS adjustments, check them against your mockup, and then make a few more tweaks.
Full article @ http://www.webmonkey.com/tutorial/Build_Better_Pages_With_Firebug