We all know that Firefox is the best browser for web designers. One thing that makes Firefox so special is quality of its unique add-ons. However, the number of add-ons available can easily be overwhelming. That’s why I carefully selected and organized the best 83 add-ons for you!

These add-ons are definitely going to improve your work-flow and enhance your overall internet browsing experience. Don’t miss this chance to work quicker and better!

The 10 ultimate Firefox add-ons for Web Designers

ColorZilla

image

Advanced Eyedropper, Color Picker, Palette Viewer and other colorful goodies for your Firefox.

WOOOOOOOT!!! I love it. One of the most useful add-on ever!

Firebug

image

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…

One of the two best web development add-ons. Awesomely awesome!

FastestFox – Browse Faster

image

Save time by speeding up repetitive tasks. Get faster, parallelized downloads, auto-loading of next page, improved searching, and more. FastestFox will dramatically enhance your productivity!

I don’t know what else to say. If you use Firefox, you should use this add-on, period.

FireFTP

image

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.

FireFTP is a good alternative to many standalone ftp clients. Try it!

FirePHP

image

FirePHP enables you to log to your Firebug Console using a simple PHP method call. I’m not a “PHP” guy… so FirePHP is not my thing. But if you are a PHP developer, I think that it is a must-have!

FireShot

image

FireShot is a Firefox extension that creates screenshots of web pages (entirely or just visible part).
Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify web captures and insert text annotations and graphical annotations.

I love it, I love it, I love it. FireShot is definitely in my top 10!

HttpFox

image

HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. It aims to bring the functionality known from tools like HttpWatch or IEInspector to the Firefox browser.

HttpFox is the perfect tool for web developers!

MeasureIt

PrtScr capture

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

Don’t let its simplicity fool you. This tool is great!!!

Pencil

image

Pencil is a free and opensource tool for making diagrams and GUI prototyping that everyone can use.

Top features: built-in stencils for diagramming and prototyping, multi-page document with background page, on-screen text editing with rich-text supports, PNG rasterizing, and much more…

I can’t believe such a tool is free! Enjoy!!!

Web Developer

image

The Web Developer extension adds a menu and a toolbar with various web developer tools.

The BEST ADD-ON FOR WEB DESIGNER ever!

20 Awesome Firefox add-ons which will change your life

Aardvark 2.97

image

Aardvark is a powerful and user-friendly selector utility for selecting elements and doing various actions on them. It can be used for cleaning up a page prior to printing it (by removing and isolating elements), for making the page more readable, and (most appreciated by web developers), for analyzing the structure of a page.

Brief

image

Brief makes reading RSS feeds as easy and intuitive as it gets. Designed to have exactly the right set of features, it is powerful and simple at the same time. Feeds are presented on a seamless, interactive page which let’s you bookmark and tag items with a single click.

I discovered Brief not long ago. It’s a great tool and a good alternative to Google Reader.

CodeBurner for Firebug

image

CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. Useful for beginners or if you feel sometimes unsure when coding.

DOM Inspector

DOM Inspector is a tool that can be used to inspect and edit the live DOM of any web document or XUL application. The DOM hierarchy can be navigated using a two-paned window that allows for a variety of different views on the document and all nodes within.

Domain Lookup

Ever read a phrase online and think: “that would make a great domain name”? Domain Lookup is a Firefox extension that helps you discover valuable domain names while surfing the web. 60+ popular domain registrars are already supported.

Sweet!

Download Statusbar

View and manage downloads from a tidy statusbar – without the download window getting in the way of your web browsing.

Just awesome! I can’t remember how many times the download window messed with my “Alt+tab”… And god knows that all web designers download many resources and face this very same problem!

Dummy Lipsum

image

Generate “Lorem Ipsum” dummy text (from http://www.lipsum.com). Makes me save time. And I love saving time… even when it’s a matter of seconds!

Extended Copy Menu

image

Provides the option to copy selection as plain text or html. This add-on does only one small thing… but damn, it’s incredibly useful. Don’t miss it!

Foxy SEO Tool

image

Foxy SEO Tool offers tools for search engine optimization (SEO), web traffic and page analysis for webmasters and web professionals.

We (almost) all have to do a little SEO at some point. Foxy SEO Tool will give you many useful information. It’s a good add-on… yeah good :)

Greasemonkey

image

Allows you to customize the way a webpage displays using small bits of JavaScript. … If you know what you are doing, this add-on can make wonders!

GridFox

image

Draws a grid on top of a website. Nice!

Html Validator

image

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.

I have a love-hate relationship with Html Validator. I installed it many times, but always uninstalled it after two or three weeks. Damn! I just installed it again!

Morning Coffee

image

Keeps track of daily routine websites and opens them in tabs.

It’s not really a web design add-on, but I’m sure that you have a few websites that you love to read on a regular basis. I mean, not RSS feeds, but the actual websites. This little tool will let you organize websites by day and open them up simultaneously as part of your daily routine. Enjoy!

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.

I use it (sometimes) and I like it! You should use it, you would like it!

ScrapBook

image

Helps you to save Web pages and organize the collection. It’s really nice when you want to save patterns, inspiration pages, etc.

That’s a must-have add-on, imho!

ScribeFire

image

ScribeFire is a full-featured blog editor that integrates with your browser and lets you easily post to your blog. You can drag and drop formatted text from pages you are browsing, take notes, upload images, and post to multiple blogs.

ScribeFire is awesome! But I don’t use it anymore… the visual editor keeps messing with my code (even more than Wordpress’ visual editor!). If someone knows how to protect the code snippets inside my posts, please tell me!!! Then, I’ll use ScribeFire again.

If you don’t need to write and keep code formatted inside your post, ScribeFire is almost perfect! Try it!

Shareaholic for Firefox

image

The ultimate add-on for the link sharing addict! Works with 60+ services including Twitter, Facebook, Google Gmail, Delicious, LinkedIn, etc. Shareaholic makes sharing online much better, faster & easier dramatically enhancing your productivity!

Really useful to stay in contact with your friends/peers. Networking is an important part of every web designer’s life. Shareaholic makes it quick & easy!

Tab Mix Plus

image

Tab Mix Plus enhances Firefox’s tab browsing capabilities. It includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and windows, plus much more. It also includes a full-featured session manager.

Hooray! Tab Mix Plus is a real time saver. No a real web design plugin but it will increase your overall productivity. Get it asap!

Xmarks Bookmark and Password Sync

image

Xmarks is the #1 bookmarking add-on. Install it on all your computers to keep your bookmarks and (optionally) passwords backed up and synchronized. Xmarks also helps you uncover the best of the web based on what millions of people are bookmarking.

I use Xmarks + Delicious to keep my bookmarks organized and available everywhere!

Yslow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.

One more extremely high quality add-on you should have :)

53 More Firefox Add-ons which will make your life easier

Advanced Dork

Advanced Dork: gives quick access to Google’s Advanced Operators directly from the context menu. It is very useful when you need to find something quickly.

Alexa Sparky

Alexa Internet’s official add-on for Firefox! Get Alexa data in your status bar. Sparky accompanies you as you surf, providing useful information in your status bar about the sites you visit, without interrupting your browsing.

Autofill Forms

Autofill Forms enables you to fill out web forms with one click or a keyboard shortcut. I don’t know if you need to submit your websites to galleries, directories or news blogs, but I need to. This add-on save me so much time, I love it!

(By the way, you can try FireForm too.)

Back to Google

Go back to your last Google results page from your current tab’s history list.

BetterSearch

An add-on for Firefox and Flock which enhances Google, Bing and Yahoo! with all their international flavors by adding previews (thumbnails) and additional functionality.

Codetch

Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf… Love it or hate it!

CS Lite

This extension will allow you to easily control cookie permissions. It can be accessed from the statusbar, a toolbar button, or the context menu.

Dafizilla ViewSourceWith

The main goal consists to view page source with external applications but you can also open page source as DOM document, open CSS and JS files present on page, open images using your preferred image viewer, etc.

Domain Details

Displays Server Type, Headers, IP Address, Location Flag, and links to Whois Reports. Shows links to check server status and cache when page fails to load.

DownThemAll!

The first and only download manager/accelerator built inside Firefox!

EditCSS

Stylesheet modifier in the Sidebar. Can be useful, but really lacks a search feature!!!

FEBE

FEBE (Firefox Environment Backup Extension) allows you to quickly and easily backup your Firefox extensions. In fact, it goes beyond just backing up — It will actually rebuild your extensions individually into installable .xpi files. Now you can easily synchronize your office and home browsers.

Firebux

Firebux is an add-on provided by Buxfer (http://www.buxfer.com), a website that lets your personal finances. With Firebux, you can keep all your finances at a single place.

Nice for every nomad freelance web designer!

Firecookie

Firecookie is an extension for Firebug that makes possible to view and manage cookies in your browser.

Firefox Accessibility Extension

The tool supports people with disabilities and web developers in navigating, styling and accessing text equivalents that are useful to people with disabilities. Developers can use the tool to test their web resources for functional accessibility features based on the iCITA HTML Best Practices.

Firefox Super Search – People Search & Web Search Toolbar

Super Search – over 160 of the best people search and web search engines in one handy add-on, including 67 searches that can be done right from the toolbar, without having to visit each site and retype the name or search term that you are searching.

You can use this add-on when you gather information about a client and their competitors.

FireQuery

FireQuery is a collection of Firebug enhancements for jQuery. Really good if you need to work with jQuery.

FireRainbow

Javascript syntax highlighting for Firebug 1.3+. Small but useful.

Font Finder

Simply highlight a single element (e.g. a paragraph or a strong tag ), right-click and select `Font Finder`, then marvel as the full CSS text styling of the selected element appears.

Using this instead of Firebug to find text styling can make you save a few extra seconds!

Gmail Manager

The original Gmail notifier for multiple accounts. Allows you to receive new mail notifications along with viewing account details including unread messages, saved drafts, spam messages, labels with new mail, space used, and new mail snippets.

I use thunderbird, but if you work directly with gmail, this is a great add-on!

Google Results Walker

This Firefox add-on enables fast navigation of Google results, while still retaining the Google “feel”. Navigate the results using the mouse wheel, and mouse over a result to display it in a window to the right. Try it, it’s fast and fun!

GoogleEnhancer

Light-weight Google enhancement (SEO) Adds icons, numbering, highlighting, and more search options (‘by date’ and ‘by language’ and ‘by file-type’) to your Google search results.

Not really a web design add-on, but it is still nice!

hideBad

Quickly closes tabs that you do not want others to see. Also clears your history and such at your discretion.

We, web designers, are bad persons. We are lazy and read blogs when we should be working. But we are smart, so we use hideBad and never get caught ^__^

Identify

A extension that can be used to explorer an individuals combined web identity across social network/media sites.

Nice, but could be better.

IE NetRenderer

Render the current page with IE NetRenderer. The idea is awesome! But the results are sometimes too inconsistent.

IE Tab

Embedding Internet Explorer in tabs of Mozilla/Firefox. This is a great tool for web designers, since you can easily see how your web page displayed in IE with just one click and then switch back to Firefox.

Very nice… but can’t replace IETester (a small IE testing software).

JavaScript Debugger

Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Mozilla based browsers.

jQuery Menu

A simple menu for the jQuery documentation.

JSView

All browsers include a “View Source” option, but none of them offer the ability to view the source code of external files. Most websites store their javascripts and style sheets in external files and then link to them within a web page’s…

Simple, fast and useful.

KGen

KGen (Keyword Generator) is an extension that allows you to see what keywords are strong on visited web pages. Than, you can retrieve them for social sharing (tag filling) or webmastering/SEO.

Live HTTP Headers

View HTTP headers of a page and while browsing.

Niche Watch Tool

A nice little SEO tool.

NoScript

The best security you can get in a web browser!
Allow active content to run only from sites you trust, and protect yourself against XSS and Clickjacking attacks.

For a web designer, his computer is almost is life. Don’t let others kill you :)

OperaView

Open pages in Opera from Firefox context menus. Very useful for web developers! (I know many of you are too lazy to launch Opera from your windows shortcut! Good… being lazy is… good!)

PageDiff

Pagediff is a simple page compare application. It helps web developers and designers to see HTML-code(text) differences between web pages…

Palette Grabber

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

Would be better if it were able to sample colors from images too.

Panic

This extension gives you the ability to close all tabs, while opening another one that will make it look like you are doing what you should be doing. That’s a good alternative to the hideBad add-on.

Page Speed

Optimize the loading time of your pages. Awesome!

Platypus

Platypus is a Firefox extension which lets you modify a Web page from your browser — “What You See Is What You Get” — and then save those changes as a Greasemonkey script so that they’ll be repeated the next time you visit the page. Editing pages to suit your needs is dandy — but making those changes “permanent” is the real payoff.

ReminderFox

ReminderFox displays and manages lists of date-based reminders and ToDo’s. ReminderFox does not seek to be a full-fledged calendar.

You can even use it so that you will never forget to eat again! (You know… when you are working a “little” and only start to feel hungry when it’s already 3AM.)

Screengrab

It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard.

I’m in love with FireShot, but if I were not, I would certainly use Screengrab.

Search Cloudlet for Google, Yahoo and Twitter

Search Cloudlet inserts smart tag clouds into Google / Yahoo / Twitter interface to help you search faster. This free productivity-boosting add-on was featured at LifeHacker, PC World, Website Magazine, etc. Install it now to add magic to your search

SearchPreview

The extension previously known as GooglePreview. Inserts preview images (thumbnails) and popularity ranks of web sites into the Google, Yahoo and Bing search results pages.

One more plugin to make your searches easier. Searching things is really time consuming, that’s why I always try all I can to make it smoother.

SearchStatus

Display the Google PageRank, Alexa rank, Compete ranking and SEOmoz Linkscape mozRank anywhere in your browser, along with fast keyword density analyser, keyword/nofollow highlighting, backward/related links, Alexa info and more.

SenSEO

SenSEO is an extension checking the most important on-page-SEO-criteria and calculating a grade of how good your site fulfills these criteria. A small but good SEO tool, I must say.

SEO Link Analysis

Enriches the link data in Google Webmaster Tools & Yahoo! Site Explorer by showing the PageRank of the linking page, the anchor text user and whether the link is nofollowed or not.

SeoQuake SEO extension

Seoquake is a Mozilla Firefox SEO extension aimed primarily at helping web masters who deal with search engine optimization(SEO) and internet promotion of web sites. Seoquake allows to obtain and investigate many important SEO parameters of the internet…

A powerful SEO tool that you should use with caution. (It can make Google block you). But a real powerful tool nonetheless!

Total Validator

Perform multiple validations and take screen shots in one go. This 5-in-1 validator works with external, internal, or local web pages using the Total Validator service or local copy of the desktop tool…

I’m not a huge fan of Total Validator… but you can try it. Maybe you’ll like it!

User Agent Switcher

The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of the browser.

Window Resizer

Resize your browser to various standard resolution sizes…

Nice. Web Developer toolbar does it too… but if you don’t like Web Developer, Windows Resizer does a good job :)

Word Count Plus

Counts number of words in selected text. Can add the count to a running total.

Useful when you need to do some copywriting stuff.

WOT

Web of Trust warns you about risky websites that try to scam visitors, deliver malware or send spam. Protect your computer against online threats by using WOT as your front-line layer of protection when browsing or searching in unfamiliar territory.

Once again, every web designer should do everything to protect their computer from attacks! WOB is A-W-E-S-O-M-E!

Yellowpipe Lynx Viewer Tool

You can see what what a page will look like when viewed with Lynx, a text-mode web browser. It is also presumably, how search engines see your site. In addition, it can help determine if web pages are accessible to the vision impaired.

If you love accessibility like me, you’ll love this add-on!

Would you like a Guest Post contest?

I hope you enjoyed this article! Now, I have one question for you, please take the time to give me your opinion.

In order to make Woobzine a little more well-known, I plan to make a Guest Post submission contest, with $1000+ donation for the winner, and free links to their website for the 20 runner-ups. The contest would be something like this:

  1. Write a post (at list 600 words) about web design, wordpress or freelancing.
  2. Then I review the posts that I received and choose those which are good enough to be published.
  3. I randomly pick a winner. (Put all the names in a box and let my 9 y.o. little brother choose one).
  4. The winner earns $1000 + $10 for every post submitted that I validated. (The 20 runner-ups get a free link to their website in my blogroll for 6 months + some little gifts)
  5. I announce the result of the contest. And during the next weeks I publish the best guest posts (every time with a bio + link to the author’s website).

I think that it’s a win-win situation: I get quality content and exposure, the guests who write post get at least exposure, and one of them receive enough cash to buy nice presents for Christmas :)

How does this sound to you? Is it interesting? Please tell me!!!

(I really need your advice because I plan to give around $1500, and it’s a huge sum of money for me. I can’t allow myself to be careless but I really want to help Woobzine grow. Thank you!)