Author: Ryan McGrath
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.
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.
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.
Every Monday we highlight a different extension, plugin, or add-on. Write an article of less than 1,000 words telling us about one that you use and how it makes your work easier, along with tips for getting the most out of it. If we publish it, we’ll pay you $100. (Send us a query first to be sure we haven’t already published a story on your chosen topic recently or have one in hand.)
- Internet & WWW