Top 6 must-have Firefox addons for Web developers and designers

There are lots of blog posts about the must have addons for Firefox if you are a web developer. In fact mozilla’s addon library has lots of lots of them but only some are very useful and now a days when speed of the application along with its cross browser compatibility is a critical issue, some addons are far most critical and every web developer or designer should have them in his/her arsenal.

Firefox addons for Web Developers and Designers

Firefox addons for Web Developers and Designers

6-Measure it

Measure it has a simple philosophy, it lets you measure any thing on your browser screen, amazing when you are working with graphics of the site, you can measure area, it will let you know the width and height in pixels and then you put that information in your Adobe photoshop and make images of exact size.

5- Color Zilla

Color Zilla is your color adviser, very often I feel the need of picking a color on the webpage to export that in my Adobe photoshop, this addon has a fantastic eye dropper tool which let you pick exact color of any image on your web page and then you use that. It comes with some other goodies like page zoomer as well.

4- IE Tab

If you are a web developer, the chances are you already hate Internet Explorer but this web browser is still the most widely used web browser around the world and the reason behind is Microsoft Windows. Anyway if you are developing in Firefox you always need to see your web pages in IE that if they rendering alright in that browser, this addon saves you opening an IE. It adds a tab to your web browser and if you click that tab, it opens the same page with IE render engine. Bingo! You have got IE in your Firefox.

3- YSlow

A friend of mine introduced me to this addon very recently and after I discovered it, I went on thinking how I made my websites without this tool. Yes, it is “why slow”, install it, it will require Fire bug to be installed and then see your website loading, how much is the size of your web page, what is the rating of your website in terms of speed of loading and not just that, it actually advise you what you lack in your web page like you need to include CSS at the top, refer Javascript as include files etc. and it has got wonderful tools of itself, one of my favourite is Smush it, it actually takes all the images on your web page, turn them into PNGs and let you download them, once you have them, you can just go back to your images directory and replace your images, in my case, the difference was in kbs which is obviously huge when we speak of web pages.

2- Web Developer Toolbar

Is that ever happened that you are working in Ajax and your primary tool is IE or Firefox and then you want to see the source code which Ajax has generated? A real bugger eh? Well there are lots of lots of features in web developer toolbar like you can actually see the DIVĀ  (borderless creatures, you can never see them without any external tool) formation on the page, look at the table information etc. but my favorite is View Generated Source option, which let you see whatever is current HTML of your web page.

1 – Firebug

This is the most important piece of code primary developed to serve web developer’s community. Javascript is a real pain to debug in IE (until IE8, it has got its fire bug too now, bundled with IE8 as Developer Tools) but in Firefox you have got fire bug to fire Javascript bugs. It not only let you debug your Javascript or HTML, it becomes very handy when you work on Ajax, it’s XHR panel in Net panel is designed to let you know, how many calls you have made to the server through XHTTPRequest object. Many other important modules like yslow require Firebug to run in. A true life saver!

If I have missed any addon which you think is crucial to be on every web developer/designer Firefox, please comment with its name, chances are that I don’t know about that addon as yet. Thanks!

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Get Adobe Flash player