10 Useful Firefox Extensions to Supercharge Firebug

Jun 20 2009 by Jacob Gube | 48 Comments

Firebug is a revolutionary Firefox extension that helps web developers and designers test and inspect front-end code. It provides us with many useful features such as a console panel for logging information, a DOM inspector, detailed information about page elements, and much more.

Though Firebug is already fully packed with features out of the box, several extensions out there can enhance its utility. In this article, you will find the 10 best Firefox extensions for Firebug that will make your life, as a developer or designer, easier.

1. Pixel Perfect

Pixel Perfect

Pixel Perfect allows you to overlay web layouts and other design compositions onto a web page so that you can accurately (and easily) write your CSS and HTML. By being able to toggle a web composition on or off, web developers and designers can have a visual guide for pixel-perfect accuracy of the position and dimensions of web page components. Check out the video demonstration to Pixel Perfect in action.

2. Page Speed

Page Speed

Page Speed is an open source Firebug add-on for evaluating web page performance, giving developers suggestions on front-end performance optimizations they can carry out. Tests and evaluations are based on Google’s Web Performance Best Practices developed through Steve Sounder’s work. Make sure to read the Page Speed user guide for complete documentation of its many features.

3. CodeBurner


CodeBurner, released by SitePoint, extends Firebug to provide a built-in HTML and CSS reference. The extension also presents contextual information based on what is currently in Firebug’s CSS and HTML panels. The references are very helpful, showing you information about browser compatibility and W3C Recommendation compliance of page elements, among many other types of information.

4. FireRainbow


FireRainbow is a simple Firebug extension that fills in a sorely desired function: code syntax highlighting. FireRainbow colorizes JavaScript, CSS, and HTML for improved readability of code being reviewed or inspected in Firebug. There are currently over 20 different FireRainbow themes that you can choose from, giving you some options for customization.

5. Inline Code Finder

Inline Code Finder

Inline Code Finder is great for hunting down inline JavaScript and CSS and is perfect for developers refactoring existing markup to separate structure (HTML) from style (CSS) and function (JavaScript). The usage of the tool is simple: it searches the entire web page for inline code and provides the developer with contextual information about the inline code it finds. The newest version gives you the ability to filter certain groups of inline code.

6. Firecookie


Developing web applications that utilize cookies can be time-consuming. Firecookie, a Firebug extension, gives you a host of options and features strictly for working with cookies. The extension allows you to view, inspect, export, and manage cookies, log cookie events (creation, deletion, etc.), and much more. The latest version of Firecookie adds several improvements such as the ability to list only cookies sourcing from a subdomain.

7. FirebugCodeCoverage


FirebugCodeCoverage is a benchmarking Firebug extension inspired by Selenium IDE for determining the percentage of your code being executed for time duration, known as code coverage. This is typically measured during automated testing to see how well the test cases are able to thoroughly test your code (with higher percentages being your goal).

8. SenSEO


SenSEO is a Firebug extension that analyzes a web page and indicates how well it is doing for single-page whitehat search engine optimization. The extension checks for correct use of meta tags, presence of a title, headings, and other relevant criterions for optimal search engine optimization.

9. Yahoo! YSlow

Yahoo! YSlow

YSlow evaluates a web page for performance and suggests potential places for improvements. YSlow is based on YDN’s Best Practices for Speeding Up Your Web Site and gives you letter grades on one of the three predefined (or user-defined) rule sets. It has a handful of useful features such as displaying information and statistics about web page components, and integration of optimization tools such as JSLint and Smush.it.

10. Firefinder


Firefinder is for quickly finding web page elements that match CSS or Xpath selectors that you input as your search criteria. Firefinder is great for testing which page elements are affected by a CSS style rule as well as for highlighting and finding elements that match your searches.

Related content



June 20th, 2009

really useful.. thanks.!


June 20th, 2009

Oh, this stuff is _perfect_ :) Many thanks, didn’t even know about some of these

Matt S

June 20th, 2009

Nice article, listed some extensions I didn’t know. I think I’d make the most use out of PixelPerfect and SenSEO.


June 20th, 2009

Very nice article, very useful extensions :)


June 20th, 2009

Ooh, and sorry for the two comments, but the install link for CodeBurner doesn’t work.

Chris McCorkle

June 20th, 2009

Yes! Now this is a useful article! Thank you


June 20th, 2009

these are really good extensions thanks heaps


June 21st, 2009

The codeburner link goes to a png file, not the extension.


June 21st, 2009

The most useful of list for the most useful of add-ons. Thanks for rounding them up in one place!

Jacob Gube

June 21st, 2009

@Daniel15 and @tinatoerat: Oops, I accidentally linked to the wrong URL. It has been fixed now, thanks for letting me know.


June 21st, 2009

Some extensions not support Firefox3.5

Soner Gönül

June 21st, 2009

Really good! thanks =)

Josh Woods

June 21st, 2009

Wow, amazing. Firefox just keeps on gettin better!


June 21st, 2009

Here’s another great one; lightweight WHOIS add-on: http://www.vitzo.com/en/page/whois-lookup-add-on-for-firefox


June 21st, 2009

Nice extentions! Familiar with many of them but some of the new ones will be of great use in the testing phase of our web application development projects. Muchas gracias!

Television Spy

June 21st, 2009

anyone else have problems running firebug and issues with memory consumption?


June 21st, 2009

These are great.


June 21st, 2009

code coverage extension doesnt work with Firefox 3 bummer


June 21st, 2009

Granted it’s more for back end developers (but then again so is the code coverage), but FirePHP is a great plugin that allows server side apps (namely PHP apps) post messages in FirePHP. Perfect for having that AJAX request URL post notices and error messages so you can see them pop up in FireBug rather than skimming a log file.


June 21st, 2009

thanks i got one new extension SenSEO, realy thanks for sharing.


June 21st, 2009

How ’bout Widerbug?

It’s very useful for me to have Firebug on the right hand side, rather than below.



June 21st, 2009

very useful, thanks


June 21st, 2009

Great list, thanks.


June 21st, 2009

Hi Jacob,
Thanks for the very nice list. I created a firefox collection based on the above list. (Could not include Page Speed tough).
Check out this link:


June 21st, 2009

Thanks! YSlow was exactly what I was looking for to help speed my site up.


June 22nd, 2009

The codeburner link goes to a png file, not the extension..

Mohamed Aslam

June 22nd, 2009

No doubt! It’s an awesome list..!
Thanks a lot!

London Relocate

June 22nd, 2009

I only have one of those listed. Thanks v.much for the list.

Stefan Kudwien

June 22nd, 2009

Great roundup! Another useful one from Sitepoint is Dust-Me Selectors, which allows you to find unused CSS classes, or “CSS coverage” in other terms: http://www.sitepoint.com/dustmeselectors


June 22nd, 2009

I would like to say, this is an awesome collection and we all know Firebug is an excellent tool which help a Web Developer and Web Designer a lot…. cheers for the awesome collection.


June 22nd, 2009

Thank You!i will upgrade my Fbug’And Do Not Forget.U S E FIREFOX! ;)


June 23rd, 2009

Nice post~~ thank you


June 23rd, 2009

Very nice article…

Very helpful in developing …increase security… statistics..

Thanks so much…

Kate Mag

June 24th, 2009

I didn’t know these extensions, now i know..thank you

Lewis Litanzios

June 24th, 2009

Tops up my preferred add-ons nicely – thanks:

Adblock Plus 1.0
APNG Edit 1.5
British English Dictionary 1.19
Download Statusbar
Firebug 1.3.0
Firefox Accessibility Extension
Flashblock 1.5.8
Html Validator
is.gd Creator 0.2.2
Mute Flash 0.2.1
PDF Download
Searchme Toolbar 1.2
Web Developer
CoolPreviews 2.7.3
eBay Sidebar for Firefox 1.6.10
IE Tab
Searchme Toolbar 1.7
Tree Style Tab 0.7.2009040901

Pixel Perfect 0.6.1
Page Speed (http://code.google.com/speed/page-speed/)
CodeBurner for Firebug 1.1
FireRainbow 1.0
SenSEO 0.7.1


July 8th, 2009

For php/ajax developers http://www.firephp.org/ is a must :)


July 15th, 2009

Thank you. Not to forget about the
Web Developer Toolbar which even integrates with Firebug.

And Colorzilla, which let’s you analyze DOM Model and CSS by Color Palettes and thus change 3rd party templates quickly.


August 20th, 2009

Can anybody please suggest any new ideas regarding testing based on web applications mainly….

Mark Carter

October 3rd, 2009

Where would we be without Firebug? … I can’t even imagine developing xhtml and css without it now! The extensions which build on this extension are truly impressive.

Jeff Barnes

November 2nd, 2009

Wow, can’t wait to make use of them. Thanks for the article.

Andrew Peacock

December 14th, 2009

Great set of resources here for developers, most of which I’d never heard of before. Thanks for sharing.



January 23rd, 2010

Just came across this post. Some nice gems here like the seo tool and cookie check

Pali Madra

November 13th, 2010

Thank you for a very good article for web designers and developers.

I wanted to know what you think about “dust me” selectors on the sitepoint site. “Dust Me” is a firefox extension that works in conjunction with Firebug and identifies unused CSS on a page. Has someone used this extension and what has been the experience. The extension can be found at http://www.sitepoint.com/dustmeselectors/

Continue the good work Jacob I look forward to see more such posts.


December 21st, 2010

Awesome tips!Yslow, PageSpeed and SenSEO are great tools for optimizing our website. Thannks much.

๋John Jakkapan

December 21st, 2010

I used the 3-Yahoo! YSlow, Firebug and FireRainbow for me.

Craig McPheat

February 17th, 2011

Excellent article, been looking for a run down of useful extensions for FF. Loaded with firebug and all these extensions it’s pretty much an essential part of building.


November 16th, 2011

Very nice article

Very helpful in developing …increase security… statistics..

Thanks so much…

Leave a Comment

Subscribe to the comments on this article.