It’s no secret that web designers and developers love Firefox!
Firefox provides an endless amount of functionality that you simply won’t find in any other modern Internet browser.
One of the greatest aspects of Firefox is the ability to install
add-ons to do just about anything and everything a browser can
possibily do. As a web developer this functionality is extremely useful
to us.
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.
Since there are so many different add-ons available to download, it
can be a little overwhelming to pick out which ones you should be
using. We compile a list of the 26 Essential Firefox Add-ons
(along with brief descriptions) that every web designer should know about. Be sure and let us know if we have missed anything!
You are always welcome to share your thoughts even if you have more
reference links related to More Firefox Add-ons other then this
featured list that our readers may like.
Essential Firefox Add-ons
01. 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. It’s a powerful all in one plugin. Web
Developer extension adds a menu and a toolbar to the browser with
various web developer tools. The added benefit of having Web Developer
Tool is the ability to edit CSS on the fly. If you want to try a
different font, different size, different color, background, borders,
margins, padding, practically anything to do with CSS, you can make the
changes in the Web Developer tool and see the changes instantly. The
Web Developer tool saves you time when playing around with CSS.
02. Firebug
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.
Firebug gives you full control over the CSS, HTML and JavaScript of any
page that you choose. Inspect and edit HTML, Tweak CSS to perfection,
Visualize CSS metrics, Monitor network activity, Debug and profile
JavaScript, Quickly find errors, Explore the DOM, Execute JavaScript on
the fly, Logging for JavaScript. Best of all, every change that you
make is done live and instantly, so you can quickly test out different
changes and see the results of those changes instantly.
03. Codetech
Codetech is another wonderful firefox extension which
allows you to edit your documents right next to your web pages as you
surf. This web page editing tool has the feel of Dreamweaver in a
Firefox extension. For a web developer or designer, which offtenly
deals with HTML source code, Codetch is a lite version of a application
like Adobe Dreamweaver. It has a similar layout, yet less features, but
it helps the user to complete its source based tasks.
Author description says it all. It’s the closest you can get to a
professional web editing interface in a browser. Install it as an
extension today and have a full featured editor right beside your web
pages as you surf!
04. Greasemonkey
If you don’t know what Grease Monkey is, it is a
Firefox plugin that allows you to run your own java script on any page
you are viewing. Now why would you want to do that? Well, basically it
allows you to fix or enhance any web page out there to meet your
requirements and not those that the designer wants to force on you. In
order to help you write the java script you might need, you can use
another plugin for FireFox, Firebug.
Greasemonkey is an addon for the Firefox browser that allows you to
run scripts that alter the pages that are displayed to you for certain
websites. Every time after the page has been loaded greasemonkey will
apply the active script(s) to it. The scripts can be used to remove or
add elements to the page because they can change the source code
(HTML). This allows you to modify the functionality and design of any
website that is displayed in your browser without control over the
actual files on the web server.
This seems pretty dangerous behavior but all greasemonkey scripts
are open source and its very easy to see on which sites/pages the
script operates.
Greasemonkey is a unique extension in that it lets you install these
things called user scripts. User scripts are much smaller than
extensions, and are often targeted to much more specific tasks than
extensions. There is a web site called UserScripts.org that is devoted
to these small tiny hacks people have created to make the web work more
like the way they want it to.
It can be complicated to create your own user scripts (it requires
understanding the Javascript programming language), but it is dead
simple to install and use scripts other people have created. And let me
tell you that a lot of people have created scripts. There are over
7500 user scripts on UserScripts.org. If something on a web page has
annoyed you, there is undoubtedly a user script that fixes it.
Greasemonkey is a Firefox extension that allows you to customize the
way webpages look and function. 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. You can write your own scripts, too. Mark
Pilgrim’s definitive Greasemonkey guide, diveintogreasemonkey.org will
show you how.
05. Colorzilla
An other one of my favorite Firefox extensions is
ColorZilla indeed. ColorZilla add-on features an online eyedropper,
which makes it quite simple to get the exact value of a specific color.
With ColorZilla you can get a color reading from any point in your
browser, quickly adjust this color and paste it into another program.
In addition to color picker, ColorZilla offers a DOM color analyzer
which allows you to locate elements on the page that correspond to a
given color and find out the CSS rules that specify a certain color.
ColorZilla also features a online palette viewer that allows choosing
colors from pre-defined color sets and saving the most used colors in
custom palettes. With this beautiful extension you can Zoom the page
you are viewing and measure distances between any two points on the
page.s
06. FireShot
FireShot is an advanced screen capture add-on for
Firefox. In addition to giving you the ability to capture an entire web
page, FireShot also allows you to add add graphics and notes directly
to your screen captures.
FireShot gives you several options for handling your screen
captures. Not only can they be saved in a variety of file formats, but
they can also be saved to your computer, emailed to others or saved on
the free FireShot hosting server. As a result of its wide range of
features, this add-on has attracted over one hundred and fifty thousand
active users, and has proven itself to be invaluable for web designers
and other Internet professionals.
07. MeasureIt
As someone who creates designs for the Internet, one of
the most chellanging job is to create design elements aligned. In that
case MeasureIt comes in handy and allows you to overlay a ruler on a
browser page so you can verify width, height and alignment of page
elements.
08. CSS Validator/HTML Validator
CSS Validator is a Firefox extension which 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. When using the HTML
Validator, you can choose to validate directly in the browser (where
any errors are shown as a status bar icon), show the source with
explanations of errors after the validation or a validation with
proposed solutions to any errors.
09. GridFox
One of the most frustrating issues that a web designer
undoubtedly encounter when coding grid-based layouts. How can a
designer be sure that the grid is maintained from the original mockup
to the final coded version? When I coded my first grid-based layout, I
found myself regularly taking screenshots of the site and comparing
them with my original grid in Photoshop. There had to be an easier way.
GridFox is a great extension that will overlay a grid on a selected
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.
10. ScreenGrab!
Whenever I create a web template or want to add an item
to my portfolio I need to take a screenshot of the page and in most
cases this is just a case of pressing Print Screen, however when you
want to take a screenshot of the whole page (below the fold) this can
get very tricky. There are tools like SnagIt that do this for you
however these cost money. Introducing Screengrab, an addon for Firefox
that does this for free. Screengrab can save or copy to the clipboard;
what you can see in the window, the entire page, just a selection, a
particular frame… basically it saves webpages as images.
11. OperaView
OperaView is an extension for Mozilla, Mozilla Firefox and Flock which is very similar (and actually based on) IE View.
Even if you using Mozilla browser all the time, sometimes it is need
for view the page, you are looking at, in Opera browser (especially if
you are a web developer). OperaView extension makes that process easier
by adding item View This Page in Opera to the page context menu and a
button to the toolbar and item Open Link Target in Opera to the link
context menu. So if you would like to quick view page in Opera, just
right click somewhere on the page and choose new menu item.
12. W3C Offline Page validator
The web developers nightmare – Validating. Offline Page
Validator is a simple tool that will send your page to the W3C
validator by simply clicking an option on the right click menu, works
both online and offline.
13. Browser Window Resizer
The Browser Window Resizer is useful tool for testing
different screen sizes. It accurately resizes your browser so you can
test to see if the web page you’re working on looks right in all of the
standard resolution sizes. This will allow you to see if your design is
going to look good to visitors who aren’t using the same resolution as
you. The best thing about this add-on is that if you are using it in
conjunction with the other add-ons in this list (specifically Firebug),
when you see that something isn’t displaying properly, you can
instantly make adjustments to your code and see if that fixes the
problem, all without ever leaving your current browser window. Browser
Window Resizer add-on resize your Firefox window to 640×480, 800×600,
1024×768, 1280×1024 and 1600×1200 resolution sizes.
14. IE Tab
In a world where users still use IE, the IE View
extension comes in real handy. I am aware that lots of likewise
extensions exist, though I think that this was the first one in its
kind. Any web designer will tell you that one of the biggest parts of
web design is getting your work to function properly in Internet
Explorer. Well IE Tab lets you do that without even leaving Firefox. IE
Tab will open up our file exactly like it would look in the version of
IE you have installed in a convenient tab. This is a great tool for web
developers, since you can easily see how your web page displayed in IE
with just one click and then switch back to Firefox.
15. Style Sheet Chooser II
Style Sheet Chooser II allows you to choose
author-provided alternate style sheets for a web site, and have those
choices be persisted for all pages on the same site. Style Sheet
Chooser II replaces Firefox’s built-in style sheet switcher – its
functionality is available via the [View]->[Page Style] menu item,
one-click stylesheet rotating Toolbar icon and Statusbar icon. Icons
can be switched on/off via Extension Preferences.
16. 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.
17. Palette Grabber
Creates a color palette for Photoshop, Paint Shop Pro, GIMP, Flash, Fireworks, or OS X based on the current page.
18. FireFTP
FireFTP is a free, secure, browser based FTP client
that allows you to easily access your server via Firefox instead of
having to launch a separate program.
19. Console²
You know how in IE when someones screwed up their
javascript it lets you know theres an error at the bottom of the
screen? Then you know that other than letting you know, it isn’t good
for much else. Console² set out to help you debug your javascript, css,
and more from the comfort of Firefox. Console² replaces the JavaScript
Console with what could be the next generation Error Console.
Furthermore it provides a simple search box (as seen in the History and
Bookmarks sidebars), hiding of duplicates, sidebar optimizations, a
customizable toolbar and some more accessibility improvements.
20. CS Lite
CS Lite is definitely one of the best Firefox Cookie
Managers. The most effective way to manage cookies on your system is in
my opinion to block them globally and enable them on a per-site basis.
Blocking them globally ensures that no cookies will be set unless you
explicitly allow them to be set. A good rule of thumb is to visit a
website and if you do not recognize any problems you can keep the
cookies blocked.
This extension will allow you to easily control cookie permissions.
The blocklist can be configured to automatically update or can be
updated manually.
I also would like to point out two interesting features of the
extension. The first is a blocklist that can be downloaded from the
Internet. This blocklist contains more than 200 companies that set
cookies to track users. This blocklist is accessible in a table that
also contains the allowed domains. Downloading the blocklist makes only
sense if you do not disallow cookies globally.
21. JS View
Another handy development extension (and timesaver) is
JS View which nests itself next to the quick search bar (although at
work it sits in the status bar – maybe the versions differ, didn’t
check) and when clicking it, it gives you a list of the currently
linked stylesheets and javascript files. When then clicking any of the
items you immediately are taken to the view source window with the
selected file in the source. Very handy, very timesaving imo!
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 source code. Previously if you wanted
to view the source code of an external javascript/stylesheet you would
have to manually look through the source code to find the url and then
type that into your browser.rnrnWell now there’s a much easier way. You
can use the JSView extension to solve the problem. You can access it
from the context menu, from the toolbar, from the view menu, or from
the status bar. If the website you are viewing contains any external
js/css files, an icon will appear that says “SS”, “JS”, or both. Each
individual file can then be viewed by clicking on the filename. The
file will be opened in a new window. You can also choose to open all
external files by clicking on “View All”.rnrnWith the latest version
you can now view the embedded css and js as well (FF2 and SM2 only).
Just open the “Page Info” window from the context menu or tools menu.
There will be 3 new tabs in that window. One for scripts, one for
stylesheets, and one for frames. You can open them by double clicking
or by using the context menu.rnrnYou can also right click on the ‘view
page source’ menu item and open the url of the current page with
jsview. This allows you to open the source code of any web page in a
new tab or in an external editor.
22. FirePHP
I find it great for inherited websites where I need to
troubleshoot problems on live servers, as I can have all the
debug/variable dump/etc crap dump to the FirePHP console so it doesn’t
show up on the website while I’m trying to track down a problem and the
budget is not there to make a dev copy of the system[they need an in
and out fix, 4 hours tops]
FirePHP seems like a very cool project, allowing PHP developers to
debug applications without having to disrupt the normal process of a
script. It works by sending the debug content to the browser in special
HTTP headers, and the Firefox extension add-on to Firebug will parse
those and display them in a special panel within Firebug.
It’s so useful I’m going to install this right now. I can’t believe nobody else thought about doing this before!
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.
You must have Firebug installed and the “Net” panel enabled to use this extension.
FirePHP is perfectly suited for Ajax Development and how to
implement a selective logging system allowing the developer to switch
on and off specific logging items on the fly. A complete working demo
you can take and make your own is also included.
23. 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. So simple
and useful!
I really like this add-on since you can find out very fast what font
style is been used on a certain text. A big time save if you have this
tool. But you also can use tools like firebug to find out what the font
is.
Font Finder is a handy little tool that shows you all the font
properties of the selected text. It can show details concerning the
selected text colour, font-family, spacing and decoration values.
Just highlight and right click to see all of the styling information
you could require including font-size, font-family, color (in both hex
and RGB), line-height, letter-spacing, and much much more..
24. IE NetRenderer
If you are like me and design your sites for Firefox
then this is a great tool for you. IE NetRenderer will create you an
image of how the website looks in IE 5.5, 6, 7 and Beta 8 so you can
get an idea of whether or not it looks right in IE.
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).
Really useful for webmasters which are not using Windows!
25. Image Zoom
Easy to use extension that works with Firefox and
Thunderbird. If you have ever had an image that was too large to fit on
your screen or too small to see the finer detail in your browser or
email, then image zoom can help. Image zoom gives you complete control
of the size of most images displayed in mozilla based software. Both
individual images or whole pages of images can be zoomed.
26. 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.