Using Firebug to Troubleshoot and Customize CSS

In the world of web design, and even if you are simply a blogger wishing to change a few tiny things, there comes a time when you need to change elements in your theme’s style sheet. Knowing what to change and where to find it can be the biggest hurdle, but there is a simple tool available that is the web designer’s secret weapon.

The Firebug extension for Mozilla’s Firefox (and Firebug Lite for Chrome) can make short work of finding and changing css elements in your design. It overlays the rendered code of your site in a split screen so you can see and change the HTML/CSS, while being able to instantly view the change.

Installing Firebug

In FireFox, go to the Tools menu, select “Add Ons” and under “Get Add Ons” type Firebug in the search box. Click the Install button. You may need to restart Firefox after installation.

Opening Firebug

There will now be an orange bug on your address bar in the upper right. Clicking it will open up a horizontally split screen. Your web page will continue to show in the upper half, but the lower half will show the HTML of your web page.

Firebug in Use

On the left side is the HTML of the page. On the right, is the css pulled from any or all style sheets used, depending on the element selected.

Much of the code will be collapsed so you can pick and choose which section to look at, rather than the whole overwhelming page at once.

Highlighting in Firebug

Hovering over each line will highlight that div in the upper portion of the screen, making it easy to spot each section.

Alternatively, you may right-click on any section of the web page and choose “Inspect element”. Firebug will immediately highlight this section in the bottom pane.

You can feel confident in changing any of the elements to see what happens. None of this will affect your live site – only your view as you are viewing the page. Nothing is saved to the theme files.

Practical Usage

For example, here’s how we can see the effect of changing the background color. Click on the body tag on the right firebug pane.

Selecting the body element with Firebug

On the left, the body section of the stylesheet is displayed.

Hovering over the numerical hex color code shows us visually how that color appears. Click on the color code to edit it.

Here I’ve typed in a different hex color code, changing the body background to a shade of grey.

Firebug Background Changes

If I click to edit any section in the style sheet, pressing tab will insert a new line in that section, allowing me to add new elements.

Since Firebug does not save changes to your theme, you will need to copy the changes you’ve made in Firebug and paste them into your theme’s style.css in the appropriate spot. Firebug will also tell you exact line number where certain elements appear in the style.css file.

Comments

  1. Thank you, Andrea, for taking your time to write this great tutorial! Very helpful to point some people here, looking for help – in plain English :)

    It’s great to see how the blog here grows with more and more tutorials!

    Thank you, Dave :)

  2. Hi Andrea
    I started using firebug after I got involved with Genesis themes.
    Can’t believe that I ever managed without it.

    Appreciate the great tut.

  3. This looks like it will save me “uploads” of time! Thanks for the share Andrea.

  4. It looks like it works the same as Chrome’s “Inspect Element”. Is that accurate? I switched back to Firefox from Chrome recently but still keep Chrome around for Inspect Element. This could remove that need.

  5. Frebug is a pretty nice add-on for developers and comes as a rescue for developers when you do not want to spend a time too much on design…

  6. I couldn’t function without Firebug – use it daily for customizing Studiopress/Genesis Framework websites. I think it will help anyone and saves you time so you don’t have to search through all the code – point and go is how I would describe it.

  7. Great article, Andrea, and very much appreciated. I’ve been running Chrome and Chromium for Linux since they were first released to the public. There are some tools like this for those browsers but nothing even close to as extensive as what this tool appears to be. I may have to start doing my development work on FF. :-)

    Thanks, again, for writing this up!

  8. Firebug is absolutely a great tool! I make use of it whenever I’m not on my main computer and need to use firefox… But on my primary computer, I use Safari, and the built-in developer tools. I personally like them better than firebug.

  9. For the first few weeks that I was learning Genesis, I kept seeing that mods on the forum had “use Firebug for Firefox to decode the Internet” in their signatures, but I thought that would be too complicated. But once I figured out what Firebug does, it opened up a whole new world! I love being able to peek inside a site to figure out how the designer made it look so neat.

    Great tutorial!

  10. There is also Firebug lite for Safari too.

    • And for Chrome too!… 8^)

      • Firebug Lite for Chrome works really well.

        • Some features are not included in Firebug Lite 1.3, but come the new core that supports code sharing from Firebug, they are likely to be included in the Firebug Lite 1.4 version:

          Live editing for all panels
          Layout Side Panel
          Context menu options
          Tooltips (to show colors and images)
          Search feature

          Other features though are too dependent in browser internals and will not be supported (at least in a near future), such as:

          Javascript debugger / Javascript profiler
          Net panel / HTTP and XHR monitor
          Access to restricted URI resources
          Highlight HTML changes

          The problem as always is not the software but the six inches between my ears.

          Terence.

  11. Thank you Andrea for your good article.
    I’ve customized a template and don’t find the error before I’ve read this here :)

  12. Thank you, Andrea, for your direction. As a complete novice, I am still frustrated even trying to make minor changes. My problem is I don’t know exactly what code to write on the style sheet, even though I think I have figured out where to make the change by using Firebug.

  13. I’ve just installed Firefox ver 8 and firebug no longer works.

    Can’t seem to find a version of firebug that works with ver 8.

    Any ideas?

  14. Firebug is a brilliant tool. There’s also a mini version for google chrome which does the job too. Essential for anyone wanting to modify their wordpress – or any other cms for that matter.

  15. Hey Andrea,

    Thanks, this should save you lots of time, lol. I mean it helps me to sort out my site without having to run to the forum asking questions all the time.

  16. I may be missing something (not surprising) but Firebug seems to tell me the line number, in my style.css for example… but when I go to edit style.css I don’t see any way to show the line number.

    How do I (can I) turn line numbering on and off??

    Tom