Top 5 Firebug Extensions

Firebug started as an indispensable Firefox extension which takes web development to a new level. But after 2 years since it’s initial 1.0 release, Firebug has grown into a platform with a host of extensions built right on top of it. Here are my top 5 Firebug extensions that every web developer should have installed.

#5 SenSEO – SenSEO is a handy checklist of key SEO criteria. This Firebug extension rates your page on a scale of 100 against Google’s webmaster guidelines. SenSEO is most important right before a big launch to catch any simple tweaks that you may have overlooked during development.

SenSEO Firebug Extension Screenshot

#4 CodeBurner – CodeBurner is an HTML and CSS reference right at your fingertips while you debug. It adds a Code Example tab which gives a brief description of the HTML tag or CSS property you have highlighted as well as a code sample so you can see the recommended usage. If that’s not enough, CodeBurner provides a link to the Sitepoint reference page which has everything you could ever want to know. Man, I wish I had this extension when I was learning HTML and CSS (let alone Firebug).

CodeBurner Firebug Extension Screenshot

#3 FireFind – FireFind does only one thing but it does it well: finding elements. Using a CSS selector or XPath statement, FireFind will highlight all of the matching elements on the page. This makes it a breeze to test CSS selectors with your site right in front of you. To boot, it also features a count of all the elements found. Even though this is possible through Firebug’s console tab when any popular JavaScript library is included, FireFind makes the process straight-forward and painless.

FireFinder Firebug Extension Screenshot

#2 FireCookie – If you have ever had to debug JavaScript cookies then you’ll wonder how you got by without this extension. FireCookie lets you inspect and edit cookies on the fly including permissions, values, and the expiration time. You can even sort all of your cookies as well as filter them out by domain. And when testing a script for your audience that has cookies disabled, FireCookie provides a simple option to disable cookies globally or just for the current domain. Now working with cookies doesn’t have to be such a stale experience.

FireCookie Firebug Extension Screenshot

#1 YSlow – Serious web developers are obsessed with performance and YSlow provides a smorgasbord of tools for measuring the speed of a site. YSlow is built around 34 best practices for speeding up a website which is the result of extensive research by the Yahoo Performance team. The extension provides a letter grade of each practice with advice on how to squeeze out every little bit of extra performance.

YSlow Test Grade View

Another handy view is the Components tool which gives you an insight into all of the componets of the page. There are a bevy of stats that can be analyzed to pinpoint bloated waste.

YSlow Components View

Finally, the statistics tool gives insight into the weight of your page for users with an empty cache and a primed cache.

YSlow Statistics View

If you have never given much thought to the performance of your site, YSlow makes it easy to dive right in.

What are some of your favorite Firefox extensions geared towards web development?

My 2008 Holiday Wish List

Around this time last year I had no idea what to ask for for the holidays. Since then I have been keeping a wish list on Whenever I came across an item that tickled my fancy I added it to my list. The great thing about Boxed Up is you can tag the items, comment on them, and get an RSS feed of your wish list. The site supports importing your Amazon wish list to get started. After you get something, you can save it to your ‘Things I Have‘ list for others to see what your interests might be. Finally, what web 2.0 site wouldn’t be complete without some sort of social networking aspect? Boxed Up lets you add your friends or you can browse through the recently added/ popular product list on the front page. All in all, has been a great resource for organizing my desired gifts. Screenshot

Speaking of gifts, my list consists mostly of funny t-shirts from but if crafts are more of your thing, feel free to make me an epic shoebox diorama. A diorama? I remember having to make one for a class project in elementary school and haven’t dealt with one since. So my challenge to all my friends and family is to make a diorama of a scene that you think I would like. Use your imagination and if you need some inspiration just think robots, lightbulbs, umbrellas, or computers.

Diorama-o-rama Poster

Have you made up your wish list yet?