Firebug: Addon for Firefox

I thought I would share this wonderful little lhttp://www.mozilla.com/en-US/firefox/firefox.html add-on, Firebug. I must use this every 30 seconds at work, and would strongly recommend it to web designer/developers of all skill levels.

Firebug in essence allows you to bring up a frame at the bottom of your web browser, displaying all of the ‘source code’ for the page you are viewing, including a side window revealing related CSS. However, it contains many powerful features that take it beyond just simply displaying a page’s source.

The Firebug window pops up along the bottom of your browser

One of my favourite, and most used features of Firebug, is the ‘Inspect’ tool. You are able to roll over objects within your page (images, links, paragraphs, form elements.. whatever), and be taken straight to its reference within the source code, as well as all the areas of your CSS that are relevent to that object!

If you’ve ever had it where you’re scratching your head at why a link’s font size is 14px when you clearly told it be 12px, you can use the right hand column (image above) to scroll through each area of your CSS that is interacting with your selected object.

This makes debugging design work amazingly quick and efficient, there’s no need for trial and error changes. Just ‘inspect’ the object, and reveal the fault instantly!

Tweak your HTML/CSS on the fly and see instant changes in your browser

Once you’ve found the issue, you may of course then want to fix it. With Firebug you don’t even need to back into your editor. HTML and CSS can both be edited on the fly within the Firebug window, showing your changes instantly on your browser with no need for refreshing. This way you can tweak objects pixel by pixel to get them just right! When you’re happy, just make the final changes in your editor.

Disable individual features of your CSS, and see which is relevant to your selected object.

In the same way you can completely remove whole aspects of the CSS piece by piece. These changes will too be reflected in your web browser instantly. I often use this function to see if my newly imputted CSS code has actually made any changes whatsoever!

You may also note the ‘line-height: normal’ being crossed out at the bottom of the image above. This is another feature whereby it will reveal parts of your CSS that are being overridden. In this case ‘line-height: normal’ is not being used due to a second ‘line-height’ being specified within the ‘.post-body’ tag (image above).

I cant overemphasize how much I use this tool. I am currently working on a pre-made shop template, and finding the relevant areas of CSS to edit within the 2500 line monster .css file supplied would have been hell without this.

You can download, and read about its other many features here: http://getfirebug.com/

Like this post? You can subscribe via RSS or e-mail for more. I also frequent Twitter and Google+.