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

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

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

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

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

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

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

48 Comments

tasarhanere

June 20th, 2009

really useful.. thanks.!

Robin

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.

Daniel15

June 20th, 2009

Very nice article, very useful extensions :)

Daniel15

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

elinix

June 20th, 2009

these are really good extensions thanks heaps

tinatoerat

June 21st, 2009

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

Simon

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.

CMWONG

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!

Ken

June 21st, 2009

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

YVOGO

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?

Nat

June 21st, 2009

These are great.

rak

June 21st, 2009

code coverage extension doesnt work with Firefox 3 bummer

Daniel

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.

Farooq

June 21st, 2009

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

Rasmus

June 21st, 2009

How ’bout Widerbug?

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

http://www.command-tab.com/2008/01/19/widerbug-widescreen-firebug/

Sebi

June 21st, 2009

very useful, thanks

Tracy

June 21st, 2009

Great list, thanks.

Ramjee

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:
https://addons.mozilla.org/en-US/firefox/collection/firetools

Brian

June 21st, 2009

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

dania

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

Vivekanand

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.

csoxa

June 22nd, 2009

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

sonichtml

June 23rd, 2009

Nice post~~ thank you

Raied

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:

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

FIREBUG
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

Marek

July 8th, 2009

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

Frank

July 15th, 2009

Thank you. Not to forget about the
Web Developer Toolbar which even integrates with Firebug.
https://addons.mozilla.org/en-US/firefox/addon/60

And Colorzilla, which let’s you analyze DOM Model and CSS by Color Palettes and thus change 3rd party templates quickly.
https://addons.mozilla.org/en-US/firefox/addon/271

Vijay

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.

Andy

Sam

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.

JH

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.

BahmanDB

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.