The Best 15 Mozilla Firefox add-ons for Web-developers

Mozilla Firefox is becoming more & more popular among web-developers now-a-days because of it’s huge collection of add-ons. These add-ons, if used in appropriate manner can help a web-developer in making certain things easier. Some add-ons are just inevitable for a web-developer. Error checking, optimizing the page, validation, etc are certain processes which are necessary to be done and are painful & time consuming. So I am discussing 15 most important add-ons which I recommend all web-developers should install along with their Mozilla Firefox web browser.

The Best 15 Mozilla Firefox add-ons for Web-developers

1) Firebug

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.

2) Web Developer

web developer toolbar

The Web Developer extension adds various web developer tools to the browser in the form of toolbar. Each menu item in toolbar consists of relevant options helpful for web-developers like analyzing, validating and optimizing web-pages, etc. The great thing about this plugin is that it’s on a few different browsers, so if you switch between them you will be able to use the same plugin on all.

3) HTML Validator

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. It gives option to choose the algorithm to be followed while validating the html. The algorithm may be HTML Tidy, SGML Parser or Serial Algorithm. HTML Tidy is an algorithm designed for checking the HTML, XHTML Syntax. SGML Parser Algorithm is based on DTD. Serial Algorithm executes first SGML Parser & then if no error, HTML Tidy. Both have their own advantages and disadvantages. The algorithm is choosed on the basis of requirements of the developer.

Whenever there is an error in a webpage, it is shown on the bottom right of the screen as:

HTML Validator Error

When we double click the error the Mozilla page opens showing the errors & warnings along with the line number, column number, etc.

HTML Validator Display

Error rectification is done.

HTML Validator Error Rectification

It is displayed in this manner.

HTML Validator Error Rectification Display

4) FireShot

FireShot captures webpage screenshots entirely. It captures entirely, edits and saves the webpages.

fireshot

5) Measure It

measure it

This add-on draws a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

6) ColorZilla

When we click on the icon, it displays the information regarding color in this format. Also saves the value in clipboard for future reference.
color zilla
These are various options available in ColorZilla.
color zilla options menu

ColorZilla works as Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies.
With ColorZilla one can get a color reading from any point in the browser, quickly adjust this color and paste it into another program. One can Zoom the page he/she is 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. The powerful CSS gradient generator allows quick and easy creation of beautiful gradients.

7) FireFtp

fireftp

FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers. 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!

8) IE Tab

With this tool we can easily see how a web page displayed in IE with just one click and then switch back to Firefox. When we right click on a webpage, “View Page in IE Tab” option comes which when clicked the page opens in IE.

IE tab

9) YSlow

Y Slow

YSlow analyzes web pages and suggests ways to improve their performance based on Yahoo!’s rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool. It completes FireBug functionality to make Firefox an unbeatable web development tool.

10) Greasemonkey

Greasemonkey

This add-on allows us to customize the way a web page displays or behaves, by using small bits of JavaScript.

11) Builtwith

Builtwith

This add-on help developers, researchers and designers to find out what technologies web pages are using which may help them to decide what technologies to they have to implement.

12) GridFox

This add-on draws a grid on top of a website which is useful for checking designs that are supposed to follow a grid-based layout.

Right click anywhere on a website, and go to GridFox > Toggle Grid.

GridFoxGridFox

In the bottom right, we see some buttons to help create, edit and save a grid. We also see some arrows which let us browse any existing grids for the site we’re looking at.

GridFoxGridFox
Here we can set the options as per our requirement.
GridFoxGridFox

13) 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.
Select a particular element and right click the mouse. Select Font Finder > Analyze Selection or other option desired and outpt will be displayed.

Font Finder
Font Finder

14) Tab Mix Plus

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 with crash recovery that can save and restore combination of opened tabs and windows.

Tab Mix Plus

15) Window Resizer

The Browser Window Resizer is useful for testing a webpage in different screen sizes. It accurately resizes the browser so that we can see how a web page looks in different standard resolution sizes like 640×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200 resolutions.
This add-on resizes the browser to various standard resolution sizes.

Window Resizer

I am going to add a description of myself as soon as I get the time!