My top-loved-must-have firefox plugins for web development

Every developer has it’s toolkit. When it comes to web development you have a browser as your frontend client and it’s good to have all your tools close by.

Tools saves time, aids debugging and doesn’t kills kittens. So, enjoy my list!

Abduction

Abduction is a simple plugin that lets you take a screenshot of the current webpage. This tool gives you the option to select the area you actually want to take the shot or you can take the full page (I mean FULL, from top to bottom with no pasting and no scrollbars… AND NO CHROME!

Abduction saves the files in JPEG and PNG.

Download at: https://addons.mozilla.org/en-US/firefox/addon/3408

Live HTTP Headers

Well, the name says it all. It’s a HTTP Header inspector. Great for debugging.

Download at: https://addons.mozilla.org/en-US/firefox/addon/3829

Firebug

Firebug aids greatfully at DOM, CSS and JS inspecting and on-the-fly editting including monitoring of the content of requests, size measuring tools (for css box lining sake) and page load time. Has famous (and useful) plugins on its own side.

And here comes the ones I recommend:

• Yahoo’s YSlow: Great for telling where are your bottlenecks in your app. It’s based on Yahoo’s Performance Rules.
• PixelPerfect: Praise all the CSS Gods! Make the layout, export the image and use as overlay on the page to see if its all fitting the right places.

Download at: https://addons.mozilla.org/en-US/firefox/addon/1843

Del.icio.us Plugin

We all read lots of neat stuff that we are sure that will use someday (yeah right) and going into my del.icio.us page to save every link is kinda not-comfortable and why use a bookmarklet when you can do it right?

Besides, the award for this plugins goes to the Browser Favourites Integration that provides the inclusion of the page you favourite to your del.icio.us account. No need for user re-education.

Download at: https://addons.mozilla.org/en-US/firefox/addon/3615

Dummy lipsum

Do not waste more time getting text to hold places on a layout or never more fill your forms with “adsadsasd” anymore! This plugin can generate the famouse “Lorem Ipsum” statement from the plugin interface or directly populate the form field (doesn’t work in WYSIWYG fields).

Download at: https://addons.mozilla.org/en-US/firefox/addon/2064

FireFTP

Well, world is not fair so we can’t always rely that our client hosting will have SSH availability (btw, thanks Dreamhost!) so we must have a fallback to the (not-so)good and old FTP.

Download at: http://fireftp.mozdev.org/

MeasureIT

This plugin has lost it’s sense when Firebug released its own ruller feature but I still use-it because it’s simple and quick.

Download at: https://addons.mozilla.org/en-US/firefox/addon/539

ColorZilla

Just a plain color picker with an embedded color palette. Does the job greatly. On Linux I use gcolor2 (under Gnome) but ColorZilla rests on your Firefox environment without having to open a new app on your OS.

Download at: https://addons.mozilla.org/en-US/firefox/addon/271

Tab Mix Plus

I have the (awful) habit of opening dozens of tabs on my Firefox stance (as if Firefox doesn’t eat/leak enough memory alone). Tab Mix Plus’ multi-row displacement is great to having all your babies at your reach.

Download at: https://addons.mozilla.org/en-US/firefox/addon/1122

and obviously, the great…

Web developer Toolbar

This is the real must-have extension. It provides useful image, javascript, css, cache and cookies handling, screen resizing (to test different resolutions), DOM element inspector, element outlining and some other really neat features.

Download at: https://addons.mozilla.org/en-US/firefox/addon/60

Readers great contributions

Tamper data

This amazing tool was suggested by Shane, one of HW’s readers and it gives you the hability to craft the HTTP/HTTPS requests (including post data) on the fly. Thanks Shane!

Download at: https://addons.mozilla.org/en-US/firefox/addon/966

If anyone has suggestions of good plugins for webdevelopment please share at the comments!