30 June 2009
Developing for the web is exciting but lets face it, sometimes it can be a pain.

Developing for the web is exciting but lets face it, sometimes it can be a pain. As developers we have a lot of ingredients in the mix we have to keep track of: browser compatibility, html+css, javascript, SEO and more.

This is a list of essential Firefox extensions that have helped with our day to day routine making development much easier.

Firebug

Yes, I know if you do any web development you probably already know about it, but that’s not going to stop us from mentioning it. Firebug is really one of the most helpful add-ons for development and if you are developing for the web and for some reason don’t use it you should definitely give it a second look.

You can inspect and modify the DOM structure, run javascript on the fly with the console and debug it, make changes to the css properties of elements, profile your code, along with viewing the request being made and a lot more.

Honestly, developing for the web would be a lot harder without this great tool.

Get it here: http://getfirebug.com/

Web Developer

This is another cool tool, it gives us a few extra things that firebug doesn’t have. Although you can do a lot with this neat toolbar, here’s what we use the most: auto-populate form fields, use a ruler to measure things, outline special elements on the page (tables, frames, headings, etc) and view the info of all the images on the webpage.

Get it here: http://chrispederick.com/work/web-developer/

Tamper Data

This extension let’s you intercept any http/https request being made and modify them if you want. It’s very cool when you are testing your web app and is a good way see how client side validation is good for making the app more user friendly, but is no security measure at all.

Get it here: http://tamperdata.mozdev.org/index.html

Live HTTP Headers

Live HTTP Headers gives all the info about the headers of the web pages being visited. Very handy tool when you need to see if the server is returning a 404, 202, or if your output is being gzipped, etc.

Get it here: http://livehttpheaders.mozdev.org/

Cookie Editor

Yes, it does exactly what you expect from it. It lets you edit your cookies (you can filter by domain), create new ones and delete old ones. Very useful when you are developing and want to check if cookie values are being set, change some things to test your app, etc.

Get it here: http://addneditcookies.mozdev.org/

This is our pick of the 5 we use the most and make our jobs more fun by bringing some power to the browser. Let the force be with you all!

Article by Malbec Mediam