Dave Woods - HTML, CSS, Web Design
Personal Website of a Web Designer
Subscribe in a reader
Top 10 Firefox Extensions for a Web Designer
Published by Dave | Filed under CSS, Web Design, Browsers, HTML, SEO
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
January 8th, 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.
January 9th, 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
January 9th, 2008 at 12:47 am
[…] Dave Woods lists his version of the top 10 Firefox extensions for web designers. Includes some new ones to me such as Dust Me Selectors, which finds unused CSS selectors. […]
January 9th, 2008 at 2:32 am
Replace Foxmarks with Delicious
January 9th, 2008 at 5:10 am
I would only add firefpt to that list but add firebug to top as number ONE!!
January 9th, 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
January 9th, 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.
January 13th, 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.
January 14th, 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.