I’m going to presume that everybody reading this post is using Firefox as their primary browser.  If not, shame on you! I’ll make you a deal then, go to firefox, download and install it, and I’ll forgive you.  Ok, so one of the best features of firefox (Besides being standards compliant) is the add-ons.  There are literally thousands of add-ons that will enhance and personalise your browsing experience.  As a web designer, I thought I’d share with you my add-ons and explain how and why I use them.

Firebug 1.3.3

This is probably my most used and most usefull add-on.  Firebug adds a wealth of web development tools to your browser.  You can edit, debug and monitro CSS, HTML, and javascript live in any web page.  You can access the features via a small discrete button at the bottom right of your browser, so it doesn’t interupt your browsing experience unless you need it.  Once you click the firebog icon, you are welcomed by some really helpful tools that can do the following for the page you are on:

• Inspect and edit HTML
• Tweak CSS to perfection
• Visualise CSS metrics
• Monitor network activity
• Debug and profile Javascript
• Quickly find errors
• Explore the DOM
• Execute javascript on the fly
• Logging for Javascript

Visit site

ColorZilla 2.0.2

This next add-on gets used occasionally, ever seen a colour 0n the internet and thought it could be useful for a project? With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes.

Visit site

MeasureIt 0.3.8

This is quite a basic add-on, you draw out a ruler to get the pixel width and height of any elements on a webpage.  This can be handy for a few things.  If you are having some cross browser issues with elements on your page (Probably with IE6) then you can measure them with this tool to make sure they aren’t been proccessed incorrectly.  Maybe you come accross a site with a nice container width, you can quickly check to see how wide it is in pixels.

Visit site

Screengrab 0.96.1

This is a nice little add-on that allows you to capture whatever is on your screen. “This can be done without an add-on” I hear you say, well yes, that is true.  But there are some extra little features with this one.  The option to capture the complete page/frame,  the visible portion, a selection of your choice or the window you are in. For all of those options you can either save to disc or copy to the clipboard.  Very handy indeed.

Visit site

TwitterFox 1.7.7.1

Use Twitter much? This is a must for twitter users. The extension adds a tiny icon on the status bar that notifies you when your friends update their status. Also it has a small text input field to update your status.

Visit site

Foxy URL

This is another good add-on for twitter users and still handy for none twitter users alike.  You can use Foxy URL as a tool to ease your daily URL sharing routines. Sending Foxy URLs to your friends instead of the regular long addresses aids your email’s readability, looks better in chat windows and helps boosting up your techie image.

Visit site

That conclude my list of add-ons.  I hope that you were either using these already or are now on the download to pimp your firefox.  I’d love to hear about the add-ons that you use and couldn’t live without.  Web designers out there, am I missing any add-ons that you think I should have in my arsenal?