My Two Favourite Firefox Extensions

Usually these posts have a the generic, “10 best…”, “20 most useful…” – that’s not really my style. I wanted to write this because I genuinely love these extensions and as a web developer I use them on a daily basis. Although I don’t love Firefox, I’m just so used to it that it’s become my default. The other major reason I use Firefox happens to be one the extensions that I’m writing this post about; Firebug.

Firebug

Not only is this extension incredibly useful when you want to test out some CSS changes on the website in real-time, but it takes debugging to a new level. It has taken my CSS/JavaScript debugging from a hours to minutes. It comes with a console window (which is fairly standard now as most browsers have a built-in console), but it also comes with a multitude of other features; parsing through HTML and highlighting the sections as you go, a point-and-select button that lets you choose specific elements on a page and get an output of their CSS/Computed CSS/Layout/DOM events, a NET tab that gives you the loading times for the entire page to give you an indication of what is slowing your load, live editing of any element on the page (which is great for testing against attacks when you’re using ajax form posting). I can’t say enough good things about Firebug – it’s definitely a reason to stick with Firefox when there are arguably better options out there.
Get Firebug here

Colorzilla

This is a pretty small and insignificant extension, but it still has a purpose and I use it constantly. ColorZilla allows you to use a dropper on any part of a website and get the color values from that sample. It gives you the option to copy out the values in HEX & RGB – both with multiple formats. It might sound like a silly tool, but it certainly beats inspecting the element to go through the CSS output to get the color values; as well, when you want the color from a picture, inspecting it doesn’t help you anyway.
Get ColorZilla here