Introducing Firebug

When you’re styling a website in CSS the tools you use can make a massive difference to the time it takes to get your styling right. If you’re working on a site that’s hosted on the Internet – whether it’s a test site or a live one – sometimes you want to see the effect of a change without having to FTP the revised stylesheet onto the remote server. In situations like this Firebug, an add-on for Firefox, can be just what you need.

What does it do?

Put simply, Firebug lets you dive into the HTML, CSS and scripting for any site you’re viewing in Firefox and lets you poke around and edit it. All without directly affecting the site that you’re looking at. This gives you the freedom to play and try things with absolutely no consequence to your actions. Case in point, let’s take a look at the Foxsoft website in Firefox.

Time to have an example

Looks like I’ve got a bit of a styling issue for the Foxsoft site’s menu...the last item in the menu seems to be wrapping round onto a new line instead of sitting at the end of the row of links. Not a major problem, but it clearly needs fixing and Firebug gives us a really simple way of finding out where the problem is.

The highlighted area shows the last menu item is appearing below the others...or at least it was before I fixed it ;)

Right-click on the item you want to inspect and choose Inspect Element

Right-click on the rogue link and choose Inspect Element from the menu, this opens up a split-screen display for Firebug by default.

The left-hand side of this display shows us the HTML around the item we’re inspecting and the right-hand side shows us the styling that’s being applied to that particular element.

Firebug shows us the HTML for the item on the left and the styling applied to the selected item on the right.

Also in the right-hand column there’s a Layout tab which gives us visual information about the sizes of an object and the margin, border and padding applied to it. In this case we can see that there’s a 7px padding all around the a tag.

By clicking on the Layout tab you can also see the box model for the selected item showing margin, border and padding.

Switching back to the styles tab we can see that the most recently applied padding is on the .topmenu a section and indicates padding: 0.5em; (0.5em equating 7px in this case it seems). As we hover the mouse of the line of styling we can see a disable icon appear to the left. Clicking this icon disables the style and stops it applying and, in doing so, we can see that all the links now fit on a single line…clearly we’ve got a space problem here.

Hovering over a line of CSS shows an icon. Click the icon to disable that line of styling. You can see the results immediately.

Click the styling values and you can edit them in real-time.

Okay, removing the padding altogether fixed it, but it doesn’t look very good so we’ll try re-enabling it and then editing the value to give us a better result. Click the disable icon to re-introduce the padding and then click on the value of 0.5em. Now you should see that you can edit the value directly so we’ll change it to 0.4em or 6px if you would rather work in pixels. As soon as the change is made it’s reflected in the display and we can see that it works.

That’s great, but can you do more than editing existing lines?

Double-click the style selector (in this case topmenu a) and then you can add your own styles.

Yes, yes it can. While I’m here, I’m thinking about making the link items italicised to make them stand out a bit more. I can easily try it out with Firebug before going to the effort of changing the stylesheet. By double-clicking the .topmenu a line in the css view Firebug gives me a little text field where I can add some new styling. A quick font-style: italic later and my new style is applied for me to see. Well, the italics – do not want, but I do want to use the menu fix so all that remains is to open the CSS file that Firebug is referencing and go the the line indicated and update my CSS. Job done.

Firebug even notes which lines in which CSS file this particular CSS is coming from so you can find it and edit it directly.

Great, how do I get Firebug?

That bit’s easy. From Firefox go to Tools->Add-ons, click the Get Add-ons tab and search for Firebug. Select the add-on (it’s just “Firebug”) and click Add to Firefox and follow through the process. If you don’t see it in the list try the See all results link and add it from there. When it’s installed you’ll need to restart Firefox, but once you’re done you’re free to get tweaking!