10 Useful Firefox Extensions to Supercharge Firebug

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

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

This was published on Jun 20, 2009


tasarhanere Jun 20 2009

really useful.. thanks.!

Robin Jun 20 2009

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

Matt S Jun 20 2009

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

Daniel15 Jun 20 2009

Very nice article, very useful extensions :)

Daniel15 Jun 20 2009

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

Chris McCorkle Jun 20 2009

Yes! Now this is a useful article! Thank you

elinix Jun 20 2009

these are really good extensions thanks heaps

tinatoerat Jun 21 2009

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

Simon Jun 21 2009

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

Jacob Gube Jun 21 2009

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

CMWONG Jun 21 2009

Some extensions not support Firefox3.5

Soner Gönül Jun 21 2009

Really good! thanks =)

Josh Woods Jun 21 2009

Wow, amazing. Firefox just keeps on gettin better!

Here’s another great one; lightweight WHOIS add-on:

YVOGO Jun 21 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 Jun 21 2009

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

These are great.

code coverage extension doesnt work with Firefox 3 bummer

Daniel Jun 21 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.

Farooq Jun 21 2009

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

Rasmus Jun 21 2009

How ’bout Widerbug?

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

very useful, thanks

Tracy Jun 21 2009

Great list, thanks.

Ramjee Jun 21 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:

Brian Jun 21 2009

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

Adrian Jun 21 2009

I use firephp:

dania Jun 22 2009

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

Mohamed Aslam Jun 22 2009

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

London Relocate Jun 22 2009

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

Stefan Kudwien Jun 22 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:

Vivekanand Jun 22 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.

csoxa Jun 22 2009

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

sonichtml Jun 23 2009

Nice post~~ thank you

Raied Jun 23 2009

Very nice article…

Very helpful in developing …increase security… statistics..

Thanks so much…

Kate Mag Jun 24 2009

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

Lewis Litanzios Jun 24 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 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 (
CodeBurner for Firebug 1.1
FireRainbow 1.0
SenSEO 0.7.1

Marek Jul 08 2009

For php/ajax developers is a must :)

Frank Jul 15 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.

Vijay Aug 20 2009

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

Mark Carter Oct 03 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 Nov 02 2009

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

Andrew Peacock Dec 14 2009

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


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

Pali Madra Nov 13 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

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

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

๋John Jakkapan Dec 21 2010

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

Craig McPheat Feb 17 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.

BahmanDB Nov 16 2011

Very nice article

Very helpful in developing …increase security… statistics..

Thanks so much…

This comment section is closed. Please contact us if you have important new information about this post.