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.
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.
- Jim Plush’s Video Tutorials on how to use the Firebug Extension
- Estelle Weyl’s Introduction to Firebug
- The Firebug Working Group