30 Useful Firefox Add-ons to Boost Your Productivity

Today Firefox is a very popular browser especially among web designers and there are a lot reasons for this kind of popularity.

Firefox provides an endless amount of functionality that you simply won’t find in any other modern Internet browser. Firefox has some cool add-ons which make the job of website designers much easier. There are many useful add-ons for Firefox out there and we use several pretty much every day for work. In this article I’ve listed 30+ Useful Firefox Add-ons that every designer should know about.

Web Developer

The Web Developer Extension is a extension for the Firefox browser and it’s a great tool for web designers. It has a variety off essential tools that allow you to code quality websites and troubleshoot problems easily.

ColorZilla

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. DOM spying features allow getting various information about DOM elements quickly and easily.

CSS Validator/HTML Validator

Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page. Opens the results in a new tab. Will only work on pages that have a CSS file associated. For example it will work with http://www.w3.org/ as the URL has a CSS file.

GridFox

GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.

Greasemonkey

Allows you to customize the way a webpage displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of popular sites, are already available at http://userscripts.org.

FireFTP

Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and much more!

FireShot

FireShot is a Firefox extension that creates screenshots of web pages (entirely or just visible part).

FirePHP

FirePHP enables you to log to your Firebug Console using a simple PHP method call. FirePHP is ideally suited for AJAX development where clean JSON or XML responses are required. All data is sent via a set of X-FirePHP-Data response headers. This means that the debugging data will not interfere with the content on your page.

SEO Toolbar

The Add-on place a toolbar and shows Page-rank, Alexa Rank, Popularity Index Rank for any website you visit. The toolbar includes handy shortcuts to popular PPC Engines, SEO tools and forums, Keyword Research tools, and domain tools. The SEO Toolbar is fully customizable with several different views available. You can change its location easily from the options menu and even move it down on to the statusbar.

SEOpen

SEOpen provides quick access to some web-based tools to help with search engine optimization. Quickly check inbound links, PageRank, http headers, and much more. Right-click on an open area of a web page, or use the included toolbar.

CSSViewer

With this extension you can view CSS properties of related page elements. Very handy, when You got large CSS file with styles overlapping each other, to analyze why something is not displayed in the way You wanted.

MeasureIt

Draw out a ruler to get the pixel width and height of any elements on a webpage.

Dust-Me Selectors

Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the style sheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered. You can test pages individually, or spider an entire site, and you’ll end up with a profile of which selectors are not used anywhere.

CodeBurner for Firebug

CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. The extension’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties. The extension also hooks into context-menus in the HTML and CSS panels, the DOM crumbtrail, and the Inspector, adding options to look up a selected item (ie. search for it in the Reference panel) or to view a code example.

YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.itâ„¢ and JSLint.

Pixel Perfect

Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML. Pixel Perfect also has an opacity option so that you can view the HTML below the composition. By being able to see both the composition and the HTML you can now simultaneously use Firebug while Pixel Perfect is still in action.

JSONView

With the JSONView extension, JSON documents are shown in the browser similar to how XML documents are shown. The document is formatted, highlighted, and arrays and objects can be collapsed.

FireRainbow

FireRainbow is a Javascript syntax highlighting for Firebug 1.3+. It requires Firebug 1.3 or higher.

WebMail Notifier

WebMail Notifier checks your webmail accounts and notifies the number of unread emails…
Supports : gmail, yahoo, hotmail, aol, daum, naver, nate, paran, POP3/IMAP and more

Palette Grabber

Creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, or OS X based on the current page.

Font Finder

FontFinder is created for designers, developers and typographers. It allows a user to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.

IE NetRenderer

Render the current page with IE NetRenderer. Adds buttons, tools menu and contextual menu entries to get a screenshot of the current page with IE NetRenderer. Keyboard shortcuts are also available: Ctrl+Shift+F5/F6/F7/F8 to render the page in IE5.5/6/7/8 Beta 2 (Cmd+Shift+F* on Mac).

Image Zoom

Adds zoom and rotation functionality for images. Easily zoom in, zoom out, fit image to screen or set custom zoom on individual images within a web page. All this can be done by using the context menu or a combination of mouse buttons and scroll wheel. Handy to see the finer details of smaller pics or to make very large pics fit within your screen.

JavaScript Debugger

Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Gecko-based browsers namely Firefox 3.x, the Netscape 7.x series of browsers, Netscape 9.x series, Mozilla Seamonkey 1.x and Mozilla Seamonkey 2.x. It does not include Gecko-based browsers such as K-Meleon 1.x, Galeon 2.x and Netscape 8.x. The debugger is available as an add-on package in XPI format. Venkman JavaScript Debugger has been provided as part of the Mozilla install distribution since October 3rd 2001. Firefox does not come with a built-in JavaScript debugger. Nevertheless, Firefox users can download Venkman JavaScript debugger version 0.9.87.4 as an extension below.

Console

Console (pronounced Console Squared or Console Two) replaces the JavaScript Console with what could be the next generation Error Console. From v0.5 includes the Console Filter extension previously available separately from the Console² website.

Morning Coffee

Keeps track of daily routine websites and opens them in tabs.
This extension lets you organize websites by day and open them up simultaneously as part of your daily routine. This is really handy if you read sites that update on a regular schedule (like webcomics, weekly columns, etc).

Autofill Forms

Autofill Forms enables you to fill out web forms with one click or a keyboard shortcut.

URL Fixer

URL Fixer corrects typos in URLs that you enter in the address bar. For example, if you type google.con, it will correct it to google.com (asking first, if you enable confirmation).