Top 10 Firefox plugins for web developers & designers

Firefox is my favorite browser for creating and testing website design and functionality. On the one hand you have big share of visitors using Firefox (Wiki: Usage share of web browser)  and a rapidly growing user base. The reasons for the success of Firefox are speed, stability and a strong open source community behind it.

And then you have IMHO the most important part: an endless range of great plugins

Although there exist hundreds of absolutely great plugins I’d like to share with you today only these plugins that helped me best while working on web projects in the past:

1. Web Developer

A must-have plugin for any web developer. It will add a new toolbar to Firefox with a lot of great tools for displaying page information, request headers, CSS element information, disabling/enabling Javascript, Cookies, Images and CSS, validation and displaying Javascript generated content. I just named some of the features but there is a lot more inside this tool. So make sure to have it.

2. SearchStatus

This one is great helper for SEO work. It includes a better PageRank information (forget the original – problems with cached values), Alexa Rank and the essential NoFollow link highlighter.

3. HTML Validator

I would say 20% of SEO work is On-Site optimization. This tool will help you in locating every validation problem of your HTML code. And I guess most of you will agree: Google loves valid content.

4. Javascript Debugger

Working with Javascript can get very tricky, especially when you are loading dynamic content via Ajax requests. Just looking into the code won’t help you a lot. The Javascript Debugger allows you to set breakpoints in your script and inspect variables and objects.

5. Live Http Headers

As the name already says this plugin will show you all Http headers while browsing a website. Sometimes a valuable source to understand the redirection mechanism of a website and how data is sent across.

6. Leet Key

A very useful tool for quick transforming encoded data. Sometimes when I need to check if a Base64 encoded parameter was transferred correctly I can decode it with this plugin to plain text. Apart of the transforming for Base64, Bin, Hex, Morse and others, there is even a functionality for encrypted contents in AES and DES.

7. JS View

When you want to have a quick look on a JS or CSS file from some other website you need to view the page source and copy the file path. But it can be so much simpler. JS View provides you any given JS/CSS file of a website with the easiness of a mouse click.

8. Duplicate Tab

Sometimes you need the currently open page in a second tab. But if it’s javascript generated content you cannot just copy and paste the URL in another tab. But Duplicate Tab can.

9. Add N Edit Cookies

This tool allows you to manipulate and add cookies and can help you to test the security of your website.

10. Clear Cache

Very simple and useful. While you are changing elements on your website you want to make sure to see the changes and not a cached version. Things like that can end up in frustration.

As mentioned before, these plugins helped me a lot. I know there are a lot more useful plugins out there, so feel free to share your list with us.

Update 2009-06-10:

Firebug

Another essential tool for web developers that allows you live editing of CSS, HTML and JS on any website.