Practical Ecommerce

The PeC Review: Firebug Is a Developer’s Tool Worth the Buzz

Firebug is a free Mozilla Firefox add on that gives developers a powerful tool to inspect and edit HTML, perfect CSS, or even admire the beautiful code from other websites. For many, the add-on has become an indispensable part of website design, development, and maintenance.

“This is a godsend for web designers,” wrote one site owner on a plug-in forum. “I got it yesterday and it has already helped me fix several annoying errors. I simply couldn’t figure out otherwise. I couldn’t ask for anything more out of this wonderful add-on.”

Website designers and coders all have their favorite tools and tricks. But site creating, like all programming, is really about problem solving. As we each push our capabilities, add new features, and try to compose better code, we face errors, bugs, and challenges. The Firebug add-on helps locate and solve those problems.
Firebug simply makes it easier to work on websites, and for that it earns four out a of a possible five stars in this The PeC Review.

No More Duplicate Source Files

The open source community that helps support and improve Firebug released a new version of it on January 12, 2009. Version 1.3.0 addressed a long-standing problem with Firebug. In the past, the tool would load a second version of source files, creating a cascade of copies that could be confusing. But the new version—when used in conjunction with Firefox 3.0.4—no longer opens up duplicate source files.

Some Quick Facts About Firebug

Joe Hewitt, an early Firefox contributor, created Firebug (and helped promote it) while working with partner Blake Ross at Parakey Inc., a start-up that was developing a user interface for computer systems. Facebook purchased Parakey in July, 2007. The Firebug Working Group now helps to oversee the growth and improvement of the Firebug tool.

Inspect and Edit HTML

Firebug lets you inspect and edit HTML while you are looking directly at the result in the Firefox browser, providing a sort of instant review. So you can experiment with changes and see if you like them before you save the HTML to your web server. And you can hover over page elements to find the underlying code.

I personally use this feature when I am working with themes. As an example, I have recently been working on a number of Magento-powered stores. Rather than creating new themes for these stores from scratch, I have saved time by starting with the default Magento theme and making modifications. Firebug is an integral part of the workflow since it lets me find the right PHP, HTML, XML, and CSS files to make the changes I want.

Modifying a CMS Theme with Firebug’s Help

In this short video, I’ll show you one of the ways I use Firebug to modify a Magento theme.

Change and Compare CSS

You can also use Firebug to perfect your CSS. In the same way that the tool allows you to change HTML code and see results in real time, it enables a designer to make subtle or bold changes to typography, colors, CSS layout, and more without fear of changing the code on your web server. Think of it as a dress rehearsal for your latest design ideas and upgrades.
Firebug will also give users a layout view of the CSS that makes debugging box-model issues extremely easy.

Profile and Debug JavaScript

One of Firebug’s more advanced features has to do with its ability to pause JavaScript executions. This lets a developer pinpoint exactly what is happening with their code and resolve lots of hard to find errors. For even more JavaScript or AJAX work, Firebug displays the hierarchy of objects and functions that your JavaScript can make use of.

Firebug Lite

Firebug is built for Firefox, but you are not without hope if you need to test your page in Microsoft’s Internet Explorer, Opera, or Safari. Firebug Lite is a JavaScript that you can insert into pages to get Firebug-like features in other browsers.

Summing Up

Firebug is an extremely useful web design and development tools that easily tacks on to one of the world’s most popular browsers, and I believe it is well worth the four out of a possible five stars that I am awarding it in this The PeC Review.

Resources

  • Jim Plush’s Video Tutorials on how to use the Firebug Extension
  • Estelle Weyl’s Introduction to Firebug
  • The Firebug Working Group
Armando Roggio

Armando Roggio

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

Get the Practical Ecommerce RSS feed

Comments ( 2 )

  1. Massimo Arrigoni January 22, 2009 Reply

    Thanks Armando, good review and good video presentation. Quick question when you have a minute: which tool do you use to produce the audio/video demonstration? Thanks and keep up the great work!

  2. Armando Roggio January 22, 2009 Reply

    @Massimo, thank you for the kind words. I use Camtasia Studio, http://www.techsmith.com/camtasia.asp, for the video and some of my audio tracks. It costs $299, but is worth every penny. You can download a 30-day trial for free.

    For the balance of the audio, I use Audacity, http://audacity.sourceforge.net/, a free, cross-platform sound editor. I have to confess, I am a novice user, and I need to do a better job with the audio in particular. So I believe these videos will only get better over time as I get better.

    FYI, Todd Jennings, PeC’s Sales Director, composed and recorded the music that plays in the background.

    Thanks again.