Firefox Add-on: Firebug 1.3.0

January 14, 2009 · 230 Views · Filed Under Web Development

If you use Firefox (which you should be) and you’re a web designer, then you need to install this free tool. I just recently started using Firebug when my layouts became more advanced and included more css.

“Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.”

After installation is complete, you should see a little bug icon at the bottom of the Firefox window (see image below). With the desired page in your browser, click on that bug icon to bring up the Firebug workspace. You can also press F12 to get the workspace up. To open it up in a new window press Ctrl + F12.
Firefox Firebug - workspace

Once the workspace is up, you can navigate your HTML/CSS in the left section and then see the style properties in the right section. Something that I just learned is that you can click on “Layout” tab on the right and it will show you a picture of the various divisions/blocks. That comes in handy when making pixel-perfect layouts.

While you navigate the code in the left window, you can hover on different tags and it will highlight the corresponding item on the page. If you click that tag, it will show you the properties on the right. You can also click “Inspect” on the top left hand side and that will let you hover over an object on the page and it will highlight the corresponding code. As you can see from the image below, I’ve hovered my mouse over the “ Firefox Firebug - hover on tag

For me this feature has proved to be a tremendous help when dealing with many nested divisions on a page. I’m sure that there are many features that I haven’t discovered yet, but so far this tool gets an A+ in my book.

For more information, or to download the add-on, please visit Firebug’s home page.
http://getfirebug.com