Mon 15 September 2008

Supercharge Firebug

This Entry is Archived!

This article was originally published on September 15, 2008 (9:00:00 AM) over at A still-breathing version of the article can be found at


While you can use Firebug to monitor network activity, you can take that to the next level by adding YSlow, which checks your Web site against Yahoo's best practices for a high performance Web site. Besides checking your performance, YSlow can also show you graphs and charts that let you inspect things such as expires headers, ETags, and the total amount of HTTP requests -- all useful for optimization.


Jiffy is a Firebug extension developed at Netflix that checks and captures time measurements for JavaScript that loads on the page (via jiffyweb, an open source Web site measurement suite), and provides a graphical representation of the data, which is ideal for comparing and reducing the effects on page load that are brought on by various JavaScript libraries.


If you're debugging HTML, CSS, or JavaScript, Firebug fits your needs, but what if you want to go further? FirePHP is a Firebug extension that lets you work with PHP5 and up as your server-side language of choice. FirePHP requires that a PHP library be installed in order to function, but once that's installed FirePHP can make use of special "X-FirePHP-Data" headers to bring debugging into the Firebug pane. The debugging data that's sent from the server to the client-side does not interfere with the content of the page you're debugging in any way. For more information, including a quick tutorial, check out the FirePHP Homepage.


The Firecookie Firebug extension allows you to view all the cookies currently being used on a page or search for a specific cookie, monitor any existing cookies on the page, and add or delete cookies at will. With Firecookie you can check out information on any cookie, such as the name, value, domain, expire date, or path. You can also use the extension to change your settings for accepting or denying cookies straight from within Firebug.

Pixel Perfect

Firebug can provide more than just developer functionality. If you're a designer, check out Pixel Perfect, a Firebug extension that allows you to overlay a semi-transparent image, or mockup, of your page design. Tou can then use Firebug to line up every element on your page with the overlay. Pixel Perfect is still an experimental add-on, but in my tests I found it to be perfectly stable.

If you like the features of Pixel Perfect and would like to use it in a cross-browser setting, check out OverlayComp, an open source script that accomplishes much of the same functionality, albeit with lesser convenience.

Rainbow for Firebug

Firebug's default script panel can feel somewhat like working in a plain text file at points. To get around this, check out another experimental add-on. Rainbow for Firebug adds syntax highlighting to the script panel, displaying intuitive, color-coded text for variables, objects, functions, and more. There are alternatives to the default highlighting colors -- to see more coloring options, or possibly create your own, check out the Rainbow for Firebug homepage.

Rainbow utilizes the parser from CodeMirror.

All the aforementioned extensions work best with Firefox 3 and some form of Firebug 1.2. Rainbow in particular requires Firebug 1.2 -- if it's installed alongside an older version of Firebug, that version will cease to function.

Firebug by itself is an immense asset to any Web developer, but if you extend it with any of these add-ons, you'll have a tool that can reduce the time it takes you to implement and debug your sites.

Ryan around the Web