Top 20 Essential Firefox Add-ons for Web Designers

Nov 10 2009 by Ben Mackler | 60 Comments

Mozilla Firefox is a very popular browser, especially among web designers and developers. These days, with such a crowded field, staying at the top of the browser heap takes a lot of work. One of the factors that make Firefox so well-liked is the huge library of great extensions that enhance your browsing experience. Among the massive list of add-ons, many are vital to web designers and developers. If used, it will make your workflow quicker and more productive.

Let’s look at our top 20 essential Firefox extensions geared for people who build websites.

1. Web Developer

Web Developer

The Web Developer add-on extends Mozilla Firefox by adding a toolbar with various options for working with web pages. For example, it has an option to inspect CSS styles of page elements that will tell you what CSS attributes they have, and which styles affect them.

2. SeoQuake

SeoQuake

SeoQuake will help you in optimizing your web pages for search engines. It gives you an SeoBar that has loads of useful SEO-related options for you to take advantage of. This extension will assist you in identify issues pertaining to search engine indexing in your web pages.

3. Window Resizer 1.0

Window Resizer 1.0

Window Resizer comes in handy for testing different screen sizes and monitor resolutions. It quickly and accurately resizes Firefox’s viewport so that you can test to see how your design looks in standard resolution sizes.

4. FireShot

FireShot

FireShot is a Firefox add-on that creates screenshots of your web page. What is unique about this plugin is that it gives you a set of editing and annotation tools for working with your screenshots. This can be a handy extension to have for presenting your work in your portfolio.

5. Firebug

Firebug

Firebug is considered to be the ultimate developer’s tool for Firefox. You are given a ton of web development tools to use from within your browser. You can explore, edit, debug, and monitor CSS, HTML, and JavaScript in real-time on any web page.

6. Greasemonkey

Greasemonkey

The Greasemonkey Firefox add-on enables you to modify how a web page looks and works by using small snippets of JavaScript. There are hundreds of scripts that you can download to enhance this add-on.

7. ColorZilla

Color Zilla

ColorZilla is an incredibly simple extension for Firefox. If you’ve ever wanted to determine what colors are used on a web page, ColorZilla is the tool for the job. It adds an eyedropper icon to the bottom-left corner of Firefox.

8. FireFTP

FireFTP

FireFTP is a streamlined Firefox extension for uploading files to a server. It offers several advantages to standalone FTP applications, such as its operating system-independent requirements. This browser add-on has all the features you would expect from standalone apps.

9. IE Tab

IE Tab

This great add-on for web developers allows you to switch back and forth from IE and Firefox layout engines with a click of a button. This permits you to test and compare how each browser renders your web pages without having to leave Firefox or install IE(vil).

10. Palette Grabber

Palette Grabber

This add-on will build color themes that are exportable to popular graphic-editing software such as Photoshop, Paint Shop Pro, GIMP, Fireworks, and Paint.NET of the web page you’re currently viewing.

11. Font Finder 0.5c

Font Finder 0.5c

With this add-on, you can highlight any text on a page to find out CSS styling information about that highlighted block of text.

12. Total Validator

Total Validator

This extension is an all-in-one validation tool that will check HTML, links, take screenshots and do a lot more. It also performs accessibility validation (WCAG, US-508), broken link checking, spell checking (in five different languages), and take screen captures via different web browsers and operating systems to see how your web pages look.

13. Platypus

Platypus

Hands down, Platypus is one of the best Firefox extensions for modifying a web page. It works with Greasemonkey as a sort of WYSIWYG and it will remember your edits when you visit the web page again. You can use it to experiment with different variations of a web design.

14. Dummy Lipsum

Dummy Lipsum

An add-on with a very simple purpose, Dummy Lipsum generates Lorem Ipsum dummy text for you to use in your designs.

15. Page Diff

Page Diff

Page Diff  is an add-on that helps web developers and designers see HTML source code differences between web pages. This is helpful for finding code irregularities or differences that will enable you to debug rendering issues.

16. Aardvark

Aardvark

Aardvark, aimed at front-end web developers, let’s you select web page elements and gives you several options for them, such as removing them from the web page (great for screen shots) or modifying their colors (helpful when printing web pages).

17. Codetch

Codetch

Codetch is a WYSIWYG editor add-on that allows you to edit web pages directly in Firefox. The interface is modeled after Dreamweaver (but thankfully, the price is not).

18. Measure It

Measure It

Measure It is an add-on that gives you a built-in ruler for measuring web page elements. It’s great for figuring out dimensions of things on a web page.

19. YSlow

YSlow

YSlow is a web browser utility that benchmarks a web page’s front-end design performance. It will assist you in optimizing your web designs for fast response times by identifying performance issues.

20. CSSViewer

CSSViewer

CSSViewer allows you to inspect CSS properties on a web page that you’re viewing. It’s a great way to study styles that you’ve seen on websites to learn CSS development techniques.

What Firefox Addons do you use?

Why do you use them? Join us in the comments!

*Co-authored by Jacob Gube

Related Content

About the Author

Ben Mackler is a web designer and Photoshop enthusiast originally from Maryland with over 12 years design and development experience. In addition to teaching web design, he currently writes a tutorial and design inspiration blog at www.designtutorials4u.com. You can reach him on Twitter @designtuts4u.

60 Comments

Metin Ucar

November 10th, 2009

I’ve been using most of them, yet there are apparently some really useful stuff here.
Thanks for the collection.

janice

November 10th, 2009

Thanks for this post, there are quite a few add ons that i wasn’t aware of.
Cheers.

Ciprian

November 10th, 2009

Excelent post! Especially for beginners. I am one of them and I only knew few of these incredible tools that firerfox allows you to use!

Ciprian

November 10th, 2009

And by the way: there is one more that is not included here:
https://addons.mozilla.org/en-US/firefox/addon/5392
This one shows the unused CSS selectors. Is very helpful, especially for large websites when you need to know if you have CSS parts that are not used…

Peter

November 10th, 2009

Hmm, thx for the update.
Didnt know SEO Quake Love the dev toolbar..

Vanco

November 10th, 2009

Nice article.
But, you should have included the info which operating systems these extensions work on.
Some of them work only on Windows, which not many web designers use.

Éric Rogé

November 10th, 2009

Great article, I’d suggest also the Screengrab plugin.

https://addons.mozilla.org/en-US/firefox/addon/1146

It’s a very useful tool to take a caption of a full webpage.

EthanJ

November 10th, 2009

Gotta give a big ol’ link to a FF add-on that’s saved me more time than I care to remember.

Dust Me Selectors by the good people at Sitepoint (http://www.sitepoint.com/dustmeselectors/)

It finds unused CSS selectors to help reduce sheet weight, once turned on it can manually scan pages you load, or can work from a sitemap to spider whole sites.

Lucifix

November 10th, 2009

Thanks for sharing this with us! If there would be chance to vote for best plugin, I would definitely vote for Web Developer ;)

webmasterdubai

November 10th, 2009

Hi really nice post but you forget to put screengrab firefox add on to take screen shot of full page.

Tracy

November 10th, 2009

Screengrab is a good alternative to fireshot. It works on Linux too.
JSview is very handy for viewing external Javascript and CSS.
I also like HTML Validator.

designfollow

November 10th, 2009

great add-ons

thank you.

Trout

November 10th, 2009

#3, #11, #18, and #20 are all features of #1.

ken

November 10th, 2009

good list! I am already using a few of this firefox addons. I found web developer and firebug one of the best. Thanks!

aMeen

November 10th, 2009

that’s why developers liked FF and will never go for others.
:)

I liked the post and replies too much

Thanks

Russell Heimlich

November 10th, 2009

I second EthanJ’s comment. Dust Me selectors is great for optimizing your CSS and cleaning out the cruft.

Chris

November 10th, 2009

I use IE Tab and Web Developer on a daily basis, they both work great and I can’t get by without them in my day to day UI Development. Great article!

Dusan

November 10th, 2009

Nice collection. However, I would recommend Firesizer instead of Window Resizer.

Chava

November 10th, 2009

Wow!!! I’m begining web developmente and all of this stuff is really usefull, thks a lot for sharing it.

Ben Mackler

November 10th, 2009

Thanks for the great feedback and suggestions on my first article for Six Revisions. You added some very useful plugins to the list.

Antonin Hildebrand

November 10th, 2009

For web developers with 2+ monitors:
Take a look at XRefresh (http://xrefresh.binaryage.com). It is able instantly refresh CSS whenever you modify CSS files on the disk. For CSS prototyping productivity.

Sean

November 10th, 2009

#3 and #18 have just as useful (if not more) counterparts built in to the Web Developer Toolbar, so no need to install separate extensions.

Adam Smtih

November 10th, 2009

I installed Measure It a few weeks back and absolutely love it. It takes care of such a simple task. Before I would have to print screen, paste into Photoshop, and then measure pixels. But not anymore :)

anon

November 10th, 2009

Vanco: just because you don’t use windows doesn’t mean that the majority doesn’t use windows. :)

Roy Ho

November 10th, 2009

Great list of addons…It makes me wonder if all these addons will hinder the performance of firefox…

jack

November 10th, 2009

I love firebug

robert

November 10th, 2009

i find Charles really helpful to figure out how a page is loading, what services are called, etc.; useful for debugging how apis are getting consumed

wilwaldon

November 10th, 2009

Awesome list, found some new ones and some oldie but goodies.

Roberto

November 10th, 2009

Web Developer and Firebug are a must for me. There are others that look interesting. Will look into them. Thanks!

anita

November 10th, 2009

Interesting. Between them firebug and webdeveloper offer most of the features that the other addons listed do.

blork

November 10th, 2009

Beware of Fireshot; it is bigtime nagware. I installed it and within 5 minutes I had been nagged to upgrade to the pro version about six times. I uninstalled it and now FF is acting a bit weird; not letting me enter my master password (not sure if Fireshot is to blame for that though…)

Expert.Me

November 10th, 2009

Great article, seo quake and firebug are very well-known. Fireshot is just too messy with feature overload.

Nicseo

November 11th, 2009

Great tools, some of those like firebug I already use, but the screenshot tool is very useful and I never heard of it.
Thanks!

Jordy Pickel

November 11th, 2009

This is a handy bunch of tools for web design. I get a lot of use out of the window resizer, since a lot of my marketing landing pages are based upon what’s “above the fold” on most users’ computers.

Cameron Baney

November 11th, 2009

Great list here. I really like the Window Resizer plugin. That will be real handy, thanks.

Innova

November 11th, 2009

I also use Screengrab to get screenshots of webpages.
I would also suggest to add few plugins to SEOQuake, very useful tool.

Souika

November 11th, 2009

Thank for this post.
I did know Page Diff before, it seems pretty good.

Nuno Neves

November 12th, 2009

Discard the third addon. Its built in Web Developer Toolbar

Webstandard-Team

November 12th, 2009

If you have the “Web-Developer-Toolbar” you don’t need the “Window Resizer 1.0″ & “Measure It”, these features are already included at the Toolbar!

Gagsy

November 13th, 2009

Good collection of add-ons.
I was using only few of them, gonna try the rest.

Lars

November 13th, 2009

An other Essential Fire-Fox AddOn for Web Developer ist YSlow https://addons.mozilla.org/de/firefox/addon/5369

Joe S

November 13th, 2009

thanks for ruining my day. now i have new add-ons to try and install!

Anish

November 15th, 2009

Great collection

Matt

November 16th, 2009

There’s some great extensions listed here that I haven’t come across before, though a lot of them seem to overlap, there are some that I will definitely be adopting along with my current extensions! Thanks.

Blogger Article

November 17th, 2009

Yeahh … I Love Mozilla Firefox because the features provided always developed with the view that is very simple and easy to use..thanks

Tsedaka

November 20th, 2009

Thanks for this great article!

If you want more Firefox add-ons, I wrote a post listing 83 Awesome Firefox Add-ons that every Web Designer must have! http://bit.ly/2s7GQS

Cheers :)

Nayan Sagar

April 12th, 2010

Hello,

I have been using add-ons since last more than two years and also other third party small softwares but here I found lot of plugins which will reduce my efforts and I can save my lot of time. Thank you for sharing this.

Rodney R

April 13th, 2010

I cant believe you are giving this information away. It is great. This is going to help me reduce the time needed for building my sites. I cant thank you enough.

Barry

May 1st, 2010

Because of these plugins, i have moved over from IE to FIrefox. i doubt I will ever go back.

aioman

May 22nd, 2010

Cool!
I often using firebug & ColorZilla .
But thanks for share!

Anand Ohm

June 12th, 2010

nIce posting…. Great collection
Thanks for Share this ……

Auguste

June 24th, 2010

Thank you very much. I’ve used most of these addons, but unfortunately I couldn’t add all of them, because my firefox browser tends to be slow. It would take a lot of times to load.

Austin

July 12th, 2010

This list is great! I’ve used quite a few of these when creating different sites. I haven’t had performance problems with Firefox as of yet, and am hoping my luck continues. Especially happy with Firebug and Screengrab that was listed above. Does anyone else have other suggestions?

Ajinkya

February 11th, 2011

I use Firebug, CookieMonster, CacheViewer, Web Developer, FireFTP, QuickJava, CodeBurner.

And btw nice post :) thax for FireShot plugin info.

Ajax Jones

March 27th, 2011

not all of these work with firefox 4.0 at present however

Rams

June 23rd, 2011

Just upgraded to FF5, just donated to MeasureIt.. just hoping that it will work soon!

Dan Carter

December 25th, 2013

Thanks. I was missing quite a few.

Leave a Comment

Subscribe to the comments on this article.