Top 20 Essential Firefox Add-ons for Web Designers
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
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 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 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 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 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
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
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 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
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
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
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
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
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
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 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, 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 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 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 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 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
- 10 Useful Firefox Extensions to Supercharge Firebug
- Performance Comparison of Major Web Browsers
- Awesome Things That Firefox’s Web Developer Extension Can Do
- Related categories: Tools and Web Development
About the Author
59 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…
cbgreenwood
November 10th, 2009
I like “View Source Chart” … https://addons.mozilla.org/en-US/firefox/addon/655
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.
LouCypher
November 10th, 2009
No DOM Inspector?
https://addons.mozilla.org/addon/6622
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.
Alexandre Morgaut
November 16th, 2009
I would add JSON View
https://addons.mozilla.org/fr/firefox/addon/10869
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!
Leave a Comment