Top 10 Firefox Extensions for a Web Designer

I’ve decided that it’s time I made a top ten list of the extensions that I find most useful in my work and use at least on a weekly basis. I’m sure that most other web designers will have some of the more popular one’s installed but hopefully there’s one or two in there which are a bit more rare and may help out a few people.

1. Web Developer Toolbar

The must have tool for any web developer.
Download Web Developer Toolbar

2. Firebug

Another must have extension for any developer. View, edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Download Firebug

3. View Source Chart

Draws a color coded chart of a web page’s source code and includes automatic indentation to make source code easier to read.
Download Source Chart

4. HTML Validator

Adds HTML validation to the view page source of the browser.
Download HTML Validator

5. SEO Quake

Quick view of site parameters in the search engine results pages
Download SEO Quake

6. ColorZilla

This extension adds a small eyedropper tool to the bottom left of the status bar which when clicked upon allows you to hover over any part of a web page to view the colour that is being used.
Download ColorZilla

7. Colour Contrast Analyser

A nice accessibility extension to check whether there is sufficient contrast between foreground and background colours of a web page.
Download Colour Contrast Analyser

8. Foxmarks

The Foxmarks Bookmark Synchronizer automatically synchronizes your bookmarks between two or more computers running Firefox.
Download Foxmarks

9. Adblock

Not so much a development tool but useful nonetheless. This extension allows you to block adverts within web pages easily and effectively.
Download Adblock

10. Dust Me Selectors

Dust-Me Selectors is a Firefox extension that finds unused CSS selectors.
Download Dust Me Selectors

10 comments on “Top 10 Firefox Extensions for a Web Designer”

Rich LaMarche January 8, 2008 at 7:15 pm

Thanks for the nice list. Colour Contrast Analyser and Dust Me Selectors were new to me. I’ve installed them to give them a try. If you haven’t tried it, you might want to give MeasureIt a try; similar interface to ColorZilla for measuring things on a page. I also use IE View Lite. There are several flavors (original one, tab, etc.) but in my environment I develop in Firefox and have to test everything in IE so it comes in very handy.

Bijay Rungta January 9, 2008 at 12:45 am

The Dust Me Selectors is something new for me and sounds interesting.

Have installed it and will see how it works..

Thanks

Pingback: Make It Up As You Go » Blog Archive » Top 10 Firefox Extensions for Web Designers

Bryce January 9, 2008 at 2:32 am

Replace Foxmarks with Delicious

Jermayn Parker January 9, 2008 at 5:10 am

I would only add firefpt to that list but add firebug to top as number ONE!!

Dave Post authorJanuary 9, 2008 at 10:05 am

@Bijay – It’s very useful especially when being handed a project you weren’t initially involved with and can help to tidy up an over complicated CSS file

@Bryce – I tried using the del.icio.us extension but never really got on with it whereas Foxmarks is just an extension which synchronizes the bookmarks that is already part of the functionality of Firefox which I found much easier to use.

@Jermayn – I tried FireFTP but ended up finding that as I use Dreamweaver (in code view obviously) that I tend to use the inbuilt FTP client anyway. It’s definitely a useful extension though but doesn’t quite make my top ten list.

As for Firebug at number one. It was a tough call but I tend to use the web dev toolbar for editing the CSS file and for outlining block level elements. It’s also useful for disabling CSS and images and with the link directly to the validator, I do tend to use the Web Dev Toolbar slightly more.

Both are powerful though and wouldn’t argue if their positions were switched for your top ten extensions 😉

nitinpai January 9, 2008 at 12:02 pm

I have tried both foxmarks and del.icio.us and got addicted to del.icio.us. Till you use firefox, foxmarks might be useful but the fast access to del.icio.us is unbeatable.

Chris January 13, 2008 at 8:18 pm

I just thought I’d let you know that I can’t digg this page using the link provided. It complains that it is not a valid URL.

Dave Post authorJanuary 14, 2008 at 9:45 am

Hi Chris, Thanks for letting me know. I’ve had that problem for a while and dropped the people at Digg an email and received a reply saying that it was a known bug and they were looking into it but as of yet the problem still persists.

I presume it’s due to the dynamic URL’s so I’m looking into a solution that can use search engine friendly URL’s with my hosts so hopefully that will be rectified soon.

Thanks for letting me know though.

кaпpиз June 13, 2009 at 11:04 am

по-настоящему удивили и даже порадовали 🙂 Никогда не поверил бы, что даже такое бывает 🙂

Rich LaMarche January 8, 2008 at 7:15 pm
Thanks for the nice list. Colour Contrast Analyser and Dust Me Selectors were new to me. I’ve installed them to give them a try. If you haven’t tried it, you might want to give MeasureIt a try; similar interface to ColorZilla for measuring things on a page. I also use IE View Lite. There are several flavors (original one, tab, etc.) but in my environment I develop in Firefox and have to test everything in IE so it comes in very handy.
Bijay Rungta January 9, 2008 at 12:45 am
The Dust Me Selectors is something new for me and sounds interesting.
Have installed it and will see how it works..
Thanks
Pingback: Make It Up As You Go » Blog Archive » Top 10 Firefox Extensions for Web Designers
Bryce January 9, 2008 at 2:32 am
Replace Foxmarks with Delicious
Jermayn Parker January 9, 2008 at 5:10 am
I would only add firefpt to that list but add firebug to top as number ONE!!
Dave Post authorJanuary 9, 2008 at 10:05 am
@Bijay – It’s very useful especially when being handed a project you weren’t initially involved with and can help to tidy up an over complicated CSS file
@Bryce – I tried using the del.icio.us extension but never really got on with it whereas Foxmarks is just an extension which synchronizes the bookmarks that is already part of the functionality of Firefox which I found much easier to use.
@Jermayn – I tried FireFTP but ended up finding that as I use Dreamweaver (in code view obviously) that I tend to use the inbuilt FTP client anyway. It’s definitely a useful extension though but doesn’t quite make my top ten list.
As for Firebug at number one. It was a tough call but I tend to use the web dev toolbar for editing the CSS file and for outlining block level elements. It’s also useful for disabling CSS and images and with the link directly to the validator, I do tend to use the Web Dev Toolbar slightly more.
Both are powerful though and wouldn’t argue if their positions were switched for your top ten extensions 😉
nitinpai January 9, 2008 at 12:02 pm
I have tried both foxmarks and del.icio.us and got addicted to del.icio.us. Till you use firefox, foxmarks might be useful but the fast access to del.icio.us is unbeatable.
Chris January 13, 2008 at 8:18 pm
I just thought I’d let you know that I can’t digg this page using the link provided. It complains that it is not a valid URL.
Dave Post authorJanuary 14, 2008 at 9:45 am
Hi Chris, Thanks for letting me know. I’ve had that problem for a while and dropped the people at Digg an email and received a reply saying that it was a known bug and they were looking into it but as of yet the problem still persists.
I presume it’s due to the dynamic URL’s so I’m looking into a solution that can use search engine friendly URL’s with my hosts so hopefully that will be rectified soon.
Thanks for letting me know though.
кaпpиз June 13, 2009 at 11:04 am
по-настоящему удивили и даже порадовали 🙂 Никогда не поверил бы, что даже такое бывает 🙂