My favourite FireFox extensions for web-developers

Before I began my professional career in web-development, I used Opera (version 3) as my web-browser of choice as it was fast and small but did exactly what I needed but no more. This was back in the Internet Explorer Vs Netscape days…let’s all thank each and every deity that those days are gone!

Nowadays, like most web-developers, I use Mozilla FireFox, mainly due to the incredible amount of extensions (or addons as they’re now called). In fact, I have come to rely completely on some extensions so, just in case it helps someone out, here’s my top list of must-haves:

• Firebug
  Firebug is probably the number one Addon for Web-Developers allowing inspection and editing of HTML, CSS and Javascript live, in-browser. If you’ve not tried it, do it now!
  One of my favourite features is “Inspect element” which will show you all sorts of useful information including which stylesheets are affecting an element (including the selectors in use) and the hierarchy of CSS overrides.
• Colorzilla
  I do use this to grab colours from time to time though OSX has an excellent app called “Digital Colour Meter” which is to be honest, a little nicer to use. I mainly use Colorzilla to identify elements since it sets the status bar of FireFox with the element type (e.g. “A” for anchors) and the ID and/or CSS Class attributes of the element which is directly under the cursor – immensely handy!
• HTML Validator
  This is one of my more recent discoveries and one of the best in my opinion. HTML Validator adds complete and comprehensive HTML validation to the source code viewer in FireFox. It’s definitely my favourite way of checking for the inevitable cock-up in code.
  As far as I know, this extension is no longer available through the Mozilla addons webpage.
• Live HTTP Headers
  If you’re configging your Web Server or need to see the HTTP requests being sent and/or received by FireFox, this is the extension for you. It must have saved me days of frustration over the years.
• Measureit
  Simple yet very handy. Measureit allows you to measure the size of anything within FireFox by dragging a box. If you zoom your web page, Measureit scales up/down too which is really useful. I often find myself using Measureit to do things such as estimating how big a thumbnail image should be on a page.
• Screengrab
  I don’t often use Screengrab but when I do, it’s worth it’s weight in gold.
  Screengrab is one of a few extensions which can screengrab an entire web page for you, even if the page is too long/wide to completely fit on your screen. Incredibly useful for presentations and proposals.
• ShowIP
  Another simple extensions. ShowIP simply displays the current IP(s) for the page you’re viewing in the status bar of FireFox.
  I often use ShowIP to quickly determine which of our web-servers a website is running and to check DNS changes have taken effect (yeah I know I could use dig for that but sometimes ShowIP is quicker).
• Tamper Data
  This is another extension I don’t use all that often but is incredible when you need to call on it. Tamper data allows you to view and alter form data sent by FireFox. If you need to test what happens in your Server-side script with various data or just need to verify what’s being sent, Tamper Data is for you!
• Web developer
  Out of all the extensions on this page, i’m suspecting that Web developer is the one most readers will have used. Web developer offers a huge number of functions which I use constantly while developing. There genuinely are too many to list but a few of my favourites are:
  • Enable/Disable Javascript – great for checking how your pages work without Javascript
  • Enable/Disable CSS Stylesheets – great for checking the underlying structure of your pages
  • Display element information – Shows some basic sizing info for the selected element plus it’s parents and children
  • View generated source – This shows you the source code of your page including amendments made by your Javascripts, very handy
• X Marks (formerly Foxmarks)
  Not strictly linked to web development but X Marks synchronises the bookmarks and stored passwords across all your computers which saves a lot of time in looking things up!

I have tried a fair few other extensions over the years but these are the core set for me. If you’ve got any suggestions for any glaring omissions, please let me know!

Cheers