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.
1) 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
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:
When we double click the error the Mozilla page opens showing the errors & warnings along with the line number, column number, etc.
Error rectification is done.
It is displayed in this manner.
4) FireShot
FireShot captures webpage screenshots entirely. It captures entirely, edits and saves the webpages.
5) 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.
These are various options available in ColorZilla.
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 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.
9) YSlow
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
This add-on allows us to customize the way a web page displays or behaves, by using small bits of JavaScript.
11) 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.
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.
GridFox
Here we can set the options as per our requirement.
GridFox
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.
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.
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.
