Pimp Your Firefox: 12 Essential Extensions for Web Developers & Designers
Firefox is more than a browser. It’s a toolbox, just waiting to be filled with tools.
In this Pimp Your Firefox series of posts I’ll be sharing 12 truly useful Firefox extensions to suit different breeds of freelancers.
I’ve capped the number at 12 to ensure only the highest quality extensions make the cut. This is for freelancers who want only the best tools to make their working day easier and more productive.
This first installment contains the top 12 most useful Firefox extensions for freelance web developers and designers.
- FireFTP
A powerful FPT client in one tab, your work in another. Sometimes the simplest solutions can be profoundly useful. (Note: Does not as yet support SFTP). - ColorZilla
This extension allows you to pick colors from the web, paste the hex code into other programs, zoom in on pages, measure distances and utilize a built-in pallet browser. A must-have for any web designer. - IE Tab
Shelve the need to open up both Firefox and Internet Explorer to test your work in IE or properly view a website that hasn’t been optimized for Firefox. IE Tab places a small icon in your status bar allowing you to use IE’s rendering engine for a specific site. You can also open a new IE tab via the right-click menu. - Firebug
An essential part of the web developer’s toolbox, Firebug allows you to tinker with the undercarriage of your project’s CSS, JavaScript or HTML. You can operate Firebux through a panel or in a separate window. It allows you to identify how each line of code shapes the final product as rendered on the web. - Load Time Analyzer
Isolate the loading times of images, stylesheets, page requests, scripts and so on. You can even graph the results — though I’m not really sure why you’d want to… - Greasemonkey
Add Javascript to any webpage. Whether you write your own scripts or use scripts provided by other coders, Greasemonkey helps unlock the full potential of any given website. (Note: try it with DOM Inspector.) - Web Developer
Another developer essential, Web Developer adds an array of custom tools and menus to Firefox. Use it in tandem with Firebug for maximum functionality and control over your code. - View Source Chart
Color codes your HTML to help keep track of hierarchies and nested elements. - MeasureIt
Click the ruler icon in your status bar to unlock MeasureIt’s functionality. It allows you to measure the pixel width and height of page elements via the cursor. Yep — no more cumbersome copying and pasting into Photoshop. When you’re done, hit ‘Escape’ and everything returns to normal. A useful, subtle tool. - HTML Validator
This nifty extension adds a little validation error and warning display to your status bar which updates as you browse. It can validate both HTML sent by the server and HTML in memory after Ajax execution. - Window Resizer
Quickly resize your browser to view websites in 640×480, 800×600, 1024×768, 1280×1024 and 1600×1200 resolutions. - Aardvark
As you move your mouse cursor over a page element it will be isolated by a red rectangle. A yellow caption will display the element’s type and class or id (if available). Keyboard shortcuts then allow you to edit or delete the element.
What would you add to the list?
Whether you want to learn while you work out or to make that commute useful, Freelance Radio is the place to hear all the tips, tricks and news of freelancing.
Freelance Radio
With over 100 weekly strips and counting, Freelance Freedom is an institution around here. Check out of all NC's brilliant work in the archives.
Freelance Freedom Archives
Interested in contributing to FreelanceSwitch? Write for the foremost freelance community and help share knowledge for the benefit of all!
Become a Guest Writer
Great list, the only one missing from the list which is great for any web developer is Y Slow, which is guess is an addon to Firebug. ColorZilla and the web developer plugin are one of most handy plugins out there, I use both almost every day
Do not forget the XRAY bookmarklet. http://www.westciv.com/xray/ If you haven’t seen this, amazing bookmarklet for getting info from CSS elements in a webpage.
I think you hit it right on the nose, those are all definitely the best firefox extensions for web designers/developers. I don’t know that I agree with the order though. I use aardvark, colorzilla, web developer, firebug, measureit and html validator the most. In that order I’m sure. I haven’t used the window resizer plugin because web developer has that function easily accessible. Great article.
Incidentally, in case anyone’s wondering, that was me who placed the irrelevant photo
Skellie is completely innocent!
x-ray is great, and is available as a ff extension:
https://addons.mozilla.org/en-US/firefox/addon/1802
Nice list. But I don’t use Window Resizer because that capability is built into Web Developer. In Web Developer the size list is customizable, so I added the latest widescreen sizes, none of which are listed in your description of Window Resizer. Like 1440×900 (MacBook or other small laptop) or 1680×1050 (generic 20″ widescreen LCD).
I’ve found these two very useful for Flash developers,
Tamper Data https://addons.mozilla.org/en-US/firefox/addon/966: If a Flash website involves loading external data or communicating with backend scripts, this is a tool helps to see what Flash is doing.
Flash Tracer https://addons.mozilla.org/en-US/firefox/addon/3469: Displays Flash trace function results in FireFox. The setup procedure is in this blog entry,http://fupeg.blogspot.com/2007/07/flashtracer.html
The window resizing function is in WebDeveloper’s tool also.
One thing need to take note is that do not install too many add-ons. Your Firefox start up time will be very long.
Well, actually a lot of the functionallity (DOM inspector, load times, dimentions, html id’s and classes inspector, some other I don´t remember and don’t want to scroll up) of the stated extentions over there is included in Firebug…
Firebug has a special place in my heart…
@mave: ever tried hitting ctrl+shift+f (part of web developer extension), it’s way faster than x-ray
DownloadThemAll is good, if you need to download a batch of files
http://www.downthemall.net/
If you get the webdeveloper extension you wont have to bother with #9, #11 and #12 anymore.. it has all those functions built right into it!
The ruler to measure size in pixels is placed under the “Miscellaneous” button. the page resizer and sizes are placed under the “Resize” button and the element viewer/detailer is under the “Information” button, named “display element information”
I’d say stick with using webdev and lose the other 3, less strain on Firefox means a faster load and quicker responsiveness
-R
I would also like to add Screen Grab! which can grab whole page screenshots (even below the visible area) and Live HTTP Headers which is I think better than Firebug’s Net view.
I cant really (REALLY) live without web developer toolbar! web designers swiss knife! it rocks!
Just wanted to write what Rian just wrote!
Great List! But one Extension i missed. What about scribefire? This is a very cool blogging extension. Heres the Link: http://performancing.com/
(No, i dont become money for this, i just think its a cool extension.)
Fireshot – screen capturing and with a set of editing and annotation tools.
http://screenshot-program.com/fireshot/
As Rian already noted, a few of these are already covered by (the award winning, no less) Web Developer extension, so let me suggest a replacement: Foxmarks. It synchronizes the bookmarks on your different computers and, in case you don’t have access to Firefox, you can log in to foxmarks.com and see all your bookmarks there.
I can also recommend the SEOpen extension. It’s kinda like Web Developer, only it’s got a bunch of SEO related tools instead.
I agree with YSlow and would add Dust Me Selectors which can be used to look for styles in your styles sheets that are not used in your pages.
Why do you have Window Resizer in your list, when Web Developer has tha same function too? And you can also add your own sizes too. Its enough in my opinion and so Window Resizer is useless.
Nice list, learned about a few new ones!
Thanks for the list… There are a couple gems on here that I had never seen. FireFTP!!!
If you’re on a Mac, the GrApple themes from http://takebacktheweb.org are a terrific addition.
Some good extensions. I really like ScreenGrab (https://addons.mozilla.org/en-US/firefox/addon/1146) It allows you to quickly create a screen shot or just a selection of the screen.
Inspect This + Firebug = Great!!!
Don’t forget SEO for Firefox and, like others have mentioned, X-Ray.
Thanks for the feedback everyone
. I’m just going to investigate some of the reader additions now.
@ Dustin Brewer: It’s not actually ranked according to usefulness — I couldn’t really decide which ones were more useful. I should have said that though
.
I’ll add Screengrab to the list.
Most of the tools you mentioned are all contained within the web developer toolbar.
Wow, great post!
I have been using some of these in the past but a lot of these really help! I am especially partial to Aardvark.
Awesome!
I have a few more favorites for the list:
- Google plugin – once you get this, googling will never be the same! Adds screenshot preview next to google search results: https://addons.mozilla.org/en-US/firefox/addon/189.
- Del.icio.us plugin – gives toolbar icon to add to del.icio.us: https://addons.mozilla.org/en-US/firefox/addon/3615
- Operator plugin – recognizes microformats and offers features like export card, find on maps, or send to calendar: https://addons.mozilla.org/en-US/firefox/addon/4106.
- Cute Menus – purely cosmetic feature that adds cute little icons to right click features: https://addons.mozilla.org/en-US/firefox/addon/4142
There are some more too… google reader plugin, google mail plugin, download status bar, google calendar…
Firefox is great until you upgrade to Leopard. I just switched to Safari for browsing.
I didn’t know about #9, MeasureIt. A ruler for Firefox… That’s brilliant! Web Developer is too bloated for my needs but Firebug rocks.
Cooliris Previews.
Let’s you preview links without leaving a page. More efficient than opening 20 tabs just in case there’s something you might actually want to see.
For me it’s a must-have.
Firebug: https://addons.mozilla.org/en-US/firefox/addon/1843
Web Developer: https://addons.mozilla.org/en-US/firefox/addon/60
Pretty good list. Some of them overlap though, because the Web Developer plugin can do a ruler, and resizing. It’s essential for any web dev out there.
In addition to those listed, another good one (Non-Firefox related) is: Multiple IE’s http://tredosoft.com/Multiple_IE Validate and test your designs all the way to IE 3, i think, even though you probably won’t go past IE 5.5
if you’ve got ieTab, then firefox view is a nice compliment (back to ff from ie)
LinkChecker (good links are green, broken links are red)
Page update checker (for when you’re waiting for that dns change to hit)
tab mix plus
autoAuth (if you use a lot of sites that have http authentication)
The functionality of aardvark is included in the web developer toolbar (Ctrl+Shift+F).
The functionality of window resizer is included in the web developer toolbar.
The functionality of HTML validator is included in the web developer toolbar.
The functionality of Load Time Analyzer is built into firebux.
I think someone is just padding their lists for traffic
.
Web developer does have the ability to do a similar function to what aardvark can do. However, it doesn’t do everything that aardvark does. Aardvark seems to deal with highlighting the right elements a little better then web developer does. It also gives you the ability to “widen” the selection to the parent element which can be handy when you are “searching” for a certain element in the site (hit H with aardvark activated to see all of its options). It also allows you to view the source (hit V with aardvark activated) easily of that element which is super handy when dealing with dynamic sites.
The only time I really use web developer’s magical element selector is when I’m trying to find the exact width or other properties of an element. They are both awesome tools in my development arsenal though.
I would say the Stumbleupon add on is an essential tool bar add on for anyone looking to stay on top of their niche in the freelance community. Stumbleupon makes it so easy to find new websites related to your niche!
http://www.stumbleupon.com/
Very nice list, I discovered some new great stuff here.
But item 11 (windows resizer) is not necessary if you already have Web Developer that allows you to do just that, the same goes to item 12 (Aardvak) that can be done with firebug.
Very nice list of extensions for Firefox. Thanks for putting this list together.
You covered almost all my favorite addons concerning web development. I have two further addons that I believe are worth adding here:
Tamper Data
Allows you to tamper any http request and modify headers and all request variables (get and post). Perfect tool for security testing, especially for forms.
Live HTTP Headers
Provides all header information and information about all requests made for a specific webpage. Great tool for analyzing page contents and checking caching settings.
“Firefox is great until you upgrade to Leopard. I just switched to Safari for browsing.”
Alan, I TOTALLY agree with you. Something is really wrong with the Firefox, Leopard connection.
What’s the hottie’s name?
Thanks again for the feedback everyone
.
@ nucleocide: as Vex pointed out above, there’s a risk that some will see Web Developer as being too bloated when they want to keep the core spirit of Firefox the same. I added the others to include more flexibility for those who might want some of the features of Web Dev without the whole package.
If I wanted to pad out the list for traffic, I would have included 50 extensions for designers & developers (believe me, they’re out there — they’re just not very good.)
Absolutely fantastic post, the FTP plugin is the one I’m now most using. Thanks very much
Let me first second the scribefire suggestion – it’s perfect for the blogging-on-the-run moment.
Another cool FF tool is Read It Later. The plugin is just right for those times when you want to return to a page, but don’t want to add to the thousands of other bookmarks you’ve collected.
Firebug is the best of them, the others you can get away and live without BUT Firebug???? No way!!
Another one I use all the time is “session manager”. I’m usually working on multiple projects at the same time, so whenever I need to switch to a different project, I just go into session manager, choose the session for the project, and all the pages related to the project open in tabs – home page, cms, phpMyAdmin, cpanel, wordpress admin, etc.
http://sessionmanager.mozdev.org/
NOTE: here’s a great page for cutting away chaff in one’s extension list…
http://kb.mozillazine.org/Problematic_extensions
NOTE: one of the extensions in the above list is listed… with a suggested replacement.
IETab -> IE View Lite
FPT? You meant FTP right?
One of the useful plugins I have found is the Foxmarks Bookmark Synchonizer. I work on three different computers at different times and it has come in handy allowing me to keep my bookmarks synchronized. It doesn’t help with the usernames and passwords of the sites you save in them, but that is good for security.
https://addons.mozilla.org/en-US/firefox/addon/2410
For all those people who use and love the Web Developer toolbar, I posted 10 things you may not know about it, which may help you to get more out of it.
@ Timothy Diokno: No, I meant FPT… It’s a new kind of file transfer
.
Good eyes on that one… keys must have got a bit jumbled.
Nice list. Thanks very much
A great list, but Web Developer toolbar has many of the features of other items on your list: ruler, window resizer, and so on; making it unnecessary to also add a few of those additional extensions. It’s an incredibly powerful extension that absolutely changed the way I get work done.
Thats a great list..
My recommendation :
webdeveloper plugin
SEOquake plugin
Screengrab
colorpixer
Colt
This is nice one- I used it already in my Firefox browser, awesome list right there.
The website theme, style, template is very … very cool !!!
I like it .
I’ve found that a few of the extensions like measureIt, window resizer and ardvark are quite redundant when using Web Developer toolbar, as the toolbar includes most of they’re features, albeit these implementations may not be specialised, I think it’s worth noting.
Might have to look at the FTP closely, thanks for the list
1. FireFTP – better learn to use a regular ftp client, and leave the browser to it’s browsing stuff. With a good ftp client you get background uploads, sftp, ssh. Lean to use putty and command line if you start using replication or other ftp more complex related issues.
2. ColorZilla – this ain’t essential
3. IE Tab – not necessary, you better test in IE6 and IE7, nothing is like the real bug itself.
4. Firebug – one of the best – has everething you need, has some bugs with javascript pages and sometimes you have to deactivate it in order to reload the pages.
5. Load Time Analyzer – is included in firebug and in webdeveloper
6. Greasemonkey – not really needed, unless you are javascript freak, javascript tools are included in the 2 mentioned previous
7. Web Developer – one of the best with firebug
8. View Source Chart – not required – html tools are included in the 2 mentioned previously
9. MeasureIt – subtle and usefull. Forget it!
10. HTML Validator – included in the 2 mentioned previously
11. Window Resizer – idem
12. Aardvark – included in webdeveloper
I think you guys like to have a lot of things in list. Mozilla with 12 or more plugins starts lagging. And more when bad plugins are starting to get into conflicts. Neither of these plugins are really supported so try to keep the plugin thing low.
I do recomend only 2 of all this list: the firebug and the webdeveloper bar. Happy debugging!
http://www.sephiroth.it/weblog/archives/2007/05/flash_switcher_extension_updated.php
Flash switcher is a Firefox extension (the icon will be installed in the right status bar of your browser) which lets you to switch between various flash player versions without using uninstallers/installers.
My favorite is
http://www.attari.net/index.php?My_space…:Firefox:Essential_Firefox_Add-ons
I have read a lot of articles like this and there comments… Am I the only one who’s missing a tool for handling multiple sessions in Firefox? As a web developer on a website with accounts and chat, it is crucial to be able to simulate multiple users.
I tried CookiePie, but I was disappointed to see that there is a bug which means that the session started in the parent window does not apply to popups.
I don’t want to run different browsers. I like Firefox.
Session Manager is not what I am looking for, I don’t care about saving my sessions, I want to be able to run multiple sessions at once.
Sweet list skellie, a personal favorite of mine though, is the Firefox 2 web developer toolbar. As a designer I couldn’t live without it. It saves lives
Great list! I have to say I couldn’t live with out the developer toolbar, but this post along with the comments has definitely opened my eyes to a few new ones. Thanks!
ryhs lbgvqwc ryvpi ufcrnk gjel zhiouxvbn etoxpyjng
Window Resizer extension is outdated and incompatible with the next release of Firefox.
Better to use Firesizer, last updated on march 22 of this year (FF 3.1 beta compatible), and allows to add any resolution that you need.
@Rian Orie
Exactly what I was going to write. The webdeveloper extension has almost got it all.
Wish I had this article when I started few years ago. Great photo choice as well.
Great article and great set of tools. And well, i loved the photo you chose ;]
However, can one trust their browser enough to log in to their bank accounts after installing all these add-ons?
Just asking. Just want to be sure..
One of the most important is missing!
ySlow -> http://developer.yahoo.com/yslow/
“IE Tab is not available for MacOSX.”
Obvious in retrospect, but still