![]()
At Evolvic Media the list of tools used to streamline our clients projects has proven to be valuable. Of course in our industry Firefox is king... atleast here at our design firm it is. Firefox offers a huge selection of extensions for designers and developers, and below we list our favorites. The firefox extentions that we listed are part of our everyday system. These extensions can help you save time, and efficiently resolve issues that otherwise would cost you valuable time. Evolvic Media offers a vast selection of resources including: Free Font Downloads, Free Wallpaper Downloads, Free I-pad Wallpapers, Photoshop Tutorials, a list of the best Wordpress Theme Sites, and a nice long list of SEO Tools to help you optimize your site, and get to the top of the search engines fast. Please Bookmark our site as we will update frequently.
There is a huge list of Firefox Addons or Extensions available to download but here today we will discuss only 30+ Best Firefox Addons for Web Designers and Developers. You are not required to download or install all Firefox Addons or Extensions. There is a little brief with each Firefox Addon so you can read and decide which Addon suites you.
You can mention other "Best Firefox Addons for Web Designers and Developers" in the comments section. Also you might be interested to Be the first to know the latest happenings on Smashing Share.
Greasemonkey is a Firefox addon / extension that allows you to customize the way webpages look and function. Hundreds of scripts are already available for free. And if you're the tinkerer sort, you can also write your own.
Fasterfox
allows you to tweak many network and rendering settings such as
simultaneous connections, pipelining, cache, DNS cache, and initial
paint delay. Dynamic speed increases can be obtained with the unique
prefetching mechanism, which recycles idle bandwidth by silently loading
and caching all of the links on the page you are browsing.
A popup blocker for popups initiated by Flash plug-ins is also included.
Firebug is an awesome Firefox Addon for Web Designers and Developers. 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.
The Web Developer addon / extension adds a menu and a toolbar to the browser with various web developer tools. After installing the extension there is a 'Web Developer' menu under the 'Tools' and context menu of the browser, as well as a new toolbar.
FireFTP is
a free, secure, cross-platform FTP client for Mozilla Firefox which
provides easy and intuitive access to FTP servers.
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!
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.
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.
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.
FireShot
is a Firefox Addon / 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. Such functionality will be
especially useful for web designers, testers and content reviewers.
Screengrab
saves entire webpages as images. 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.
It can capture any Java or Flash embedded in a page, but to do this it
requires Java to be installed in the browser.
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.
Make getting image colors even easier with the ColorSuckr Add-on for the Firefox browser. Install the add-on, then simply right click any image on a webpage and choose 'Extract Image Colors' from the menu to go straight to the ColorSuckr website with the image.
CS Lite is a lighter, scaled down version of CookieSafe. This Firefox Addon contains less features, but is considerably easier to use. The extension has been completely recoded from top to bottom making this the most stable version to date.
CSSViewer is a great Firefox Addon for Web Designers and Developers to learn CSS. When you hover on any element, it will display all CSS styles for that element.
Dummy Lipsum Firefox Addon/ Extension generates "Lorem Ipsum" dummy text (the text is taken from the Lorem Ipsum site). A context menu option ("Insert Dummy Lipsum") is shown in the context menu when the cursor is in a form field (text field or text area). This option automatically fills this field with the dummy text.
IE Tab is a great Firefox Addon for Web Designers and Developers, since you can easily see how your web page displayed in IE with just one click and then switch back to Firefox.
IE
NetRenderer adds
buttons, tools menu and contextual menu entries to get a screenshot of
the current page.
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).
Really useful for webmasters which are not using Windows!
LiveHTTPHeaders allows you to analyze HTTP headers (response and requests). It help debugging web application. You can see which kind of web server the remote site is using and cookies sent by remote site.
OperaView
is an Addon/ Extension for Mozilla Firefox and Flock which is very similar (and
actually based on) IE
View.
Even if you are using Mozilla browser all the time, sometimes you need
to view the page you are looking at in Opera
browser (especially if you are a web developer). OperaView makes
that process easier by adding the item View This Page in Opera to the
page context menu, the item Open Link Target in Opera to the link
context menu and a button to the toolbar. If you want to open a page in
Opera quickly, just right click somewhere on the page and choose new
menu item.
Ever been annoyed by all those ads and banners on the internet that often take longer to download than everything else on the page? Install Adblock Plus Firefox Addon now and get rid of them.
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.
Xmarks (Formerly Foxmarks) 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.
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.
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).
This version will correct common misspellings of .com, .net, .org, .edu,
.gov, .mil, and all other mainstream TLDs, as well as the protocol
(http:, https:). By right-clicking on the address bar, you can set it to
auto-correct your errors, or you can have it ask you before making any
corrections.
MeasureIt is a Useful Firefox Addon for Web Designers. This Addon draw out a ruler to get the pixel width and height of any elements on a webpage.
Window Resizer resize your browser to various standard resolution sizes. It is useful for testing different screen sizes. It accurately resizes your browser so you can test to see what a web page looks like in all of the standard resolution sizes. Supports the 640×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200 resolutions.
Palette Grabber creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, Paint.NET, or OS X based on the current page.
Are you looking at stuff you shouldn't be? Whether you are browsing through social networking sites while you're at work or wandering around MySpace while you're at school? Well Panic Firefox 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.
The Cooliris 3D Wall — Simply the fastest and most stunning way to browse photos and videos from the Web or your desktop. Effortlessly scroll an infinite "3D Wall" of your content from Facebook, Google Images, YouTube, Flickr, and hundreds more.
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.)
ReminderFox displays and manages lists of date-based reminders and ToDo's. ReminderFox does not seek to be a full-fledged calendar. In fact, the target audience is anybody that simply wants to remember important dates (birthdays, anniversaries, bills, etc) without having to run a whole calendar application. ReminderFox makes sure you remember all of your important dates via easy-to-use lists, alerts, and alarm notifications.
Mozilla Firefox is a very popular browser, especially among web designers and developers. These days, with such a crowded field, staying at the top of the browser heap takes a lot of work. One of the factors that make Firefox so well-liked is the huge library of great extensions that enhance your browsing experience. Among the massive list of add-ons, many are vital to web designers and developers. If used, it will make your workflow quicker and more productive.
Let's look at our top 20 essential Firefox extensions geared for people who build websites.
The Web Developer add-on extends Mozilla Firefox by adding a toolbar with various options for working with web pages. For example, it has an option to inspect CSS styles of page elements that will tell you what CSS attributes they have, and which styles affect them.
SeoQuake will help you in optimizing your web pages for search engines. It gives you an SeoBar that has loads of useful SEO-related options for you to take advantage of. This extension will assist you in identify issues pertaining to search engine indexing in your web pages.
Window Resizer comes in handy for testing different screen sizes and monitor resolutions. It quickly and accurately resizes Firefox's viewport so that you can test to see how your design looks in standard resolution sizes.
FireShot is a Firefox add-on that creates screenshots of your web page. What is unique about this plugin is that it gives you a set of editing and annotation tools for working with your screenshots. This can be a handy extension to have for presenting your work in your portfolio.
Firebug is considered to be the ultimate developer's tool for Firefox. You are given a ton of web development tools to use from within your browser. You can explore, edit, debug, and monitor CSS, HTML, and JavaScript in real-time on any web page.
The Greasemonkey Firefox add-on enables you to modify how a web page looks and works by using small snippets of JavaScript. There are hundreds of scripts that you can download to enhance this add-on.
ColorZilla is an incredibly simple extension for Firefox. If you've ever wanted to determine what colors are used on a web page, ColorZilla is the tool for the job. It adds an eyedropper icon to the bottom-left corner of Firefox.
FireFTP is a streamlined Firefox extension for uploading files to a server. It offers several advantages to standalone FTP applications, such as its operating system-independent requirements. This browser add-on has all the features you would expect from standalone apps.

This great add-on for web developers allows you to switch back and forth from IE and Firefox layout engines with a click of a button. This permits you to test and compare how each browser renders your web pages without having to leave Firefox or install IE(vil).
This add-on will build color themes that are exportable to popular graphic-editing software such as Photoshop, Paint Shop Pro, GIMP, Fireworks, and Paint.NET of the web page you're currently viewing.
With this add-on, you can highlight any text on a page to find out CSS styling information about that highlighted block of text.
This extension is an all-in-one validation tool that will check HTML, links, take screenshots and do a lot more. It also performs accessibility validation (WCAG, US-508), broken link checking, spell checking (in five different languages), and take screen captures via different web browsers and operating systems to see how your web pages look.
Hands down, Platypus is one of the best Firefox extensions for modifying a web page. It works with Greasemonkey as a sort of WYSIWYG and it will remember your edits when you visit the web page again. You can use it to experiment with different variations of a web design.
An add-on with a very simple purpose, Dummy Lipsum generates Lorem Ipsum dummy text for you to use in your designs.
Page Diff is an add-on that helps web developers and designers see HTML source code differences between web pages. This is helpful for finding code irregularities or differences that will enable you to debug rendering issues.
Aardvark, aimed at front-end web developers, let's you select web page elements and gives you several options for them, such as removing them from the web page (great for screen shots) or modifying their colors (helpful when printing web pages).
Codetch is a WYSIWYG editor add-on that allows you to edit web pages directly in Firefox. The interface is modeled after Dreamweaver (but thankfully, the price is not).
Measure It is an add-on that gives you a built-in ruler for measuring web page elements. It's great for figuring out dimensions of things on a web page.
YSlow is a web browser utility that benchmarks a web page's front-end design performance. It will assist you in optimizing your web designs for fast response times by identifying performance issues.