Firebug: A Must-Have Web Design Tool

Firebug. Editing the stylesheet of a website or theme designed by someone else can be a seriously frustrating exercise, because finding the correct element to edit is like looking for a needle in a haystack

If you’re lucky, the original designer will have used sensible element names and commented their code in detail – which should help you find your way around.

But the chances are they haven’t.

Luckily, there’s an excellent Firefox add-on called Firebug, which will take care of all that for you.

You do need to be using Firefox for this to work but, with Firefox running, installing it is simply a case of going to Tools > Add-ons and doing a search for Firebug in the screen that comes up.

Once you’ve got Firebug installed you can use it to:

  • Inspect the CSS or HTML of the page you’re viewing
  • Edit the CSS or HTML of the page you’re viewing
  • Find and fix bugs on the page you’re viewing

All you need to do is load the page in your browser and hover your cursor over the element you want to change.

It’s difficult to see in this image because I’ve had to cut it down to fit. But, using the ‘Inspect’ tool, this is the information that’s displaid:

HTML code on the left, with the element you’re hovering over on the page highlighted, and the style attributes of whatever you’re hovering over on the right.

Firebug display.

While I mostly use the ‘Inspect’ tool in Firebug (second from the left on the top tool bar), and it has saved me hours when I’ve been tweaking WordPress themes, the edit function is also invaluable.

Sometimes, even with Firebug, it’s difficult to find the correct selector – usually when someone has created an excessively complicated set of CSS.

However, you can use Firebug to get as close as you can to the code you need and then try editing just one element of the first selector presented in the right-hand panel.

To edit an item, first find the property you want to change and then click on the value. A box with a blue background will open in which you can edit it.

If that doesn’t work move to the next selector and try editing your property again. You will eventually find the selector you want.

You can then copy the full selector details from the panel on the right and paste it into your stylesheet.

Note that none of the editing you do through Firebug is permanent.

It only alters the appearance of the page as you view it so you can see the effect, but that has been extremely useful to me!

It’s difficult to exaggerate the amount of time and frustration this has saved me..!


Martin Malden

What do you think?

Comments on this entry are closed.

  • Karin H Oct 26, 2010 @ 18:11

    I’ll pas this on to a friend of mine, Martin. Thanks for the tip

    Karin H

    • Martin Oct 26, 2010 @ 20:49

      Hi Karin,

      You’re welcome – and I’d be happy to answer any questions they may have 🙂



  • The Gratitude Guru Nov 2, 2010 @ 7:54

    Very nice tool! Thank you for sharing it, Martin! I am grateful I found you. Now it is time to put a fire under me, to load FireBug, into Firefox!

    I’ll let you know how I managed 🙂

    Be Well.

    • Martin Nov 2, 2010 @ 11:10

      You’re welcome – good to see you’re all fired up..! 🙂