The only things I ever recommend are things that I use myself and that have proven themselves over time. I’ve used the following add-ons at least weekly, if not daily, throughout 2011, which is how they’ve landed on my list of top 5 Firefox add-ons for 2012.

1. ColorZilla

Purpose: This add-on adds a little eyedropper icon after your Firefox search bar. If you click it, you can sample any color on a webpage.

Usage: I use it to sample a color on a webpage and it automatically copies the hex value so I can use it in a stylesheet (CSS) file.

2. Firebug

Purpose: To inspect HTML, CSS, and JavaScript code on a webpage, view any connections that are initiated and their response, and see the variables currently loaded in the DOM. You can activate the window via the F12 key (Windows).

Usage: I mostly use it to inspect and manipulate elements on a webpage. For example, right-click anywhere and select “Inspect element”. Firebug will jump right to the code and you can alter the HTML on the left and the CSS on the right. This makes tweaking styles and duplicating content very easy. Furthermore, I use it to monitor AJAX responses on the “Net” tab, which tells me whether I get the expected results or not.

3. FireShot

Purpose: To take screenshots of a full, partial, or custom area on a webpage.

Usage: Often I’m asked to show a demo of a webpage in a meeting or perhaps a client is asking for it via email. FireShot adds a little bar in the status bar of Firefox, which gives me an icon to select either a full page screenshot (from top to bottom), a partial screenshot (anything that’s viewable without scrolling), or I can drag a custom rectangle over the area I want. I can then save the image or copy it to my clipboard.

4. Web Developer

Purpose: It lets you modify how your webpage will be rendered in your browser and provides tools to work with images and elements on a webpage.

Usage: This add-on does a lot, but I only use a subset of features. I use it for turning off JavaScript on a webapge (Disable > JavaScript > All), deleting or disabling cookies (Cookies > Disable Cookies > All Cookies), getting a div’s size (Information > Display Element Information… click on a page element), and to measure something on a webpage (Miscellaneous > Display Ruler… click and drag with mouse to create a box).

5. WorldIP

Purpose: Displays server’s location, IP address, provider, and your IP address.

Usage: I work with many different servers at a time and sometimes I move websites around. This little add-on tells me where the current website is located, its IP address, and who it’s hosted with. When I’m not using it for my stuff, I just find it interesting to see where everyone host’s their website .

There you have it, the 5 best Firefox add-ons for me in 2012. If you have something you use a lot that makes your life easier, feel free to share it in the comments below.

-RS