10 recommended add ons for Firefox Web Browser and Web Developers

Since the Firefox Web Browser is so highly supported and has such a strong community, there are bound to be extensions and themes customized to all sorts of audiences.. especially web developers whether veteran or noobs. Being a web developer myself, I’ve found that Firefox can easily be your number one tool in developing high quality and standards compliant sites as well as fixing and editing old sites. These are my personal favorites and recommendations for web developers, I’m going to leave out the version specific or Operating System specific extensions so that this post is applicable to mostly anyone.

1. Web Developer – This extension is crucial. With it you can turn off cache in the browser, disable javascript, cookies, styles and images, view and outline different elements on a page and see detailed information such as classes and id’s, resize the web browser window to see what it looks like in other resolutions, and do validation (among MANY other capabilities).
2. Firebug – This extension provides a console for JavaScript as well as lets you inspect HTML and CSS on a page. What I especially like about this extension is you can edit HTML and styles inline and see the changes before applying them.
3. GreaseMonkey – A fun extension that will completely change the way you interact with the web. I recommend the lightbox functionality and Platypus extension for starters and just look around and see what you can find. There are so many cool scripts for this extension.
4. Colorzilla – This extension is like the eyedropper tool.. it lets you find the colors of elements on a page as well as literally any image/color that you see anywhere within the web browser window. It gives you the RGB values, Hex Value, X and Y coordinates of that pixel, as well as the element name that the color is pulled from!
5. FireFTP – Turn your web browser into a full FTP client and debugging environment. This extension is really nice since it works, looks, and functions the same across all Operating Systems.
6. Image Zoom – Zoom in/out images. Pretty simple and easy to use, adds really simple functionality just using simple mouse click and scroll techniques.
7. SeoQuake – An SEO toolbar that will GREATLY help you to view SEO stats on a site. It’s a little heavy on load times especially on engines, but it’s highly customizable and very very useful. It’ll take some getting used to and customization, but once you’ve got the kinks worked out, you’ll be glad you have it!
8. MeasureIt – Is an extension that will sit in your bottom left corner right next to colorzilla. It’s great because it gives you a lightweight screen ruler that also gives you the X and Y coordinates of the measured area!
9. ErrorZilla – An extension that makes use of useless 404 pages by giving you a menu to do a whois lookup, view google cache, wayback machine and more! This extension is minimul and remains behind the scenes until you actually need it! Nice.
10. XRay – Similar to firebug’s inspection tool or CSS Viewer… it’s an awesome script that lets you view elements and tags on a page and will really help you out in debugging and developing.

If you want some more cool extensions there are some great ones that are OS specific or version specific. Check out the post on Noupe for 20 really cool web developer extensions. There’s also a great list of some of the most popular extensions at Mashable or OnlineTips.