My Top 10 Firefox Developer Add-Ons

March 18th 08, 12:10

Like many Web Developers I use Firefox everyday of my working life.

The ability to customise my browsing experience has been key to how I integrate my browsing experience with the internet. Firefox has revolutionised the way in which I can use my browser as a tool to build richer web applications.

The following extensions have been invaluable in saving time and effort when building websites. For those of you that already use Firefox I am sure that you are already aware of some if not all of these extensions, but if you are just setting out as a developer or are new to Firefox then I strongly recommend that you try these out.

Web Developer
A menu with various web developer tools.
https://addons.mozilla.org/en-US/firefox/addon/60

IE Tab
Easily swap between browsers to ensure that page structure is maintained in both Firefox and IE
https://addons.mozilla.org/en-US/firefox/addon/1419

FireShot
A great extension that allows you to not only take a screenshot of a web page but also allows you to edit and annotate the image. This image can then be uploaded, saved, copied to clipboard or emailed.
https://addons.mozilla.org/en-US/firefox/addon/5648

Firebug
By far my favourite Firefox extension. A true wealth of development tools have been integrated into this add-on. You can edit, debug and monitor CSS, HTML and JavaScript live on any webpage.
https://addons.mozilla.org/en-US/firefox/addon/1843

PicLens
A tool not just for developers, piclens turns your browser into a “3D Wall” which allows you to easily browse through images on the web. A fast and easy tool when you are searching for the right image for your site.
https://addons.mozilla.org/en-US/firefox/addon/5579

Pallette Grabber
A simple tool that grabs the colours on a web page and exports a palette for PhotoShop or your own image editing software.
https://addons.mozilla.org/en-US/firefox/addon/2290

HTML Validator
Quickly displays HTML errors and warnings on a page that allows you to identify issues on a page and effectively fix any bugs.
https://addons.mozilla.org/en-US/firefox/addon/249

CSSMate
Displays individual CSS files in separate tabs and allows you to edit the files live on the page.
https://addons.mozilla.org/en-US/firefox/addon/4187

YSlow
YSlow is used with FireBug that allows you to analyse individual elements on a page and identify which elements are loading in slowly and can be optimised.
https://addons.mozilla.org/en-US/firefox/addon/5369

ColorZilla
An advanced eyedropper tool that allows you to point your mouse at a pixel on your screen and find the Red, Green and Blue values applied to that pixel.
https://addons.mozilla.org/en-US/firefox/addon/271