It is no doubt that Firefox is the best browser for web development. Thanks to the developer community around the world who develop the most useful, innovative Firefox add-ons. With add-ons, testing and debugging your web application is just swift. The one reason which keeps me sticking to Firefox browser is the different kind of web developer add-ons that are available. Below is a list of 20+ add-ons that every web developer must have in their Firefox browser.
Firefox add-ons that helps you design your pages better:
A list of widely used add-ons that can dramatically improve your designing productivity.
| # | Add-on | How this Add-on can help you |
|---|---|---|
| 1 | Pencil |
Pencil is a free and opensource tool for making diagrams and GUI prototyping that everyone can use.
|
| 2 | MeasureIt | Draw out a ruler to get the pixel width and height of any elements on a webpage. |
| 3 | Colorzilla | This is one of my all time favorite. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. Also it has the built-in color palatte for selecting to choose color themes for our websites. |
| 4 | Stylish | Stylish allows easy management of user styles. With Stylish, you can define your own styles for the websites you use. Even there is a repository userstyles.org available where you can download the pre-built styles. |
| 5 | 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. By toggling the composition on and off, the developer can visually see how many pixels they are off in development. |
Add-ons for your web application development/debugging:
| # | Add-on | How this Add-on can help you |
|---|---|---|
| 1 | Firebug |
One of the popular add-on among the web developer community. Let’s you to debug javascript, analyze DOM, edit and live preview your changes and lot more. |
| 2 | Web Developer | Similar to Firebug in popularity and usability, The Web Developer extension adds a menu and a toolbar with various web developer tools. . |
| 3 | JavaScript Debugger | A powerful JavaScript debugging environment for Mozilla based browsers. |
| 4 | Live HTTP Headers | Lets you to view the data that are sent in HTTP headers. |
| 5 | Tamper Data | Allows you to view/modify HTTP/HTTPS header data. Could be really useful for the AJAX developers. |
| 6 | Foxy Proxy | FoxyProxy is a Firefox extension which automatically switches an internet connection across one or more proxy servers based on URL patterns. Put simply, FoxyProxy automates the manual process of editing Firefox’s Connection Settings dialog. Proxy server switching occurs based on the loading URL and the switching rules you define. |
Add-ons for validating your page:
| # | Add-on | How this Add-on can help you |
|---|---|---|
| 1 | HTML Validator |
As a Tidy based tool, 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. The extension can validate the HTML sent by the server or the HTML in the memory (after Ajax execution). |
| 2 | Page Validator | Validates a page using the W3C Markup Validation Service. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the current page. Opens the results in a new tab. |
| 3 | CSS Validator | 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. |
| 4 | Total Validator | Provides true HTML validation (HTML 2.0 to XHTML 1.1) using the official DTDs, plus added attribute checking. So you no longer have to put up with the limitations of the W3C validator (no type checking) and tools like HTML Tidy which interpret the standards incorrectly (they don’t use the official DTDs). |
| 5 | Coral IE Tab | This is an enhanced version of IE Tab which enables you to use the embedded IE engine within Mozilla/Firefox. It is not only a great tool for web developers, like the old IE Tab, but also an useful tool for normal users, since you can easily switch to IE when you meet incorrectly rendered web pages in Firefox. |
Misc Add-ons for enhancing and improving your website:
| # | Add-on | How this Add-on can help you |
|---|---|---|
| 1 | Page Speed |
Page Speed is a Firefox plug-in, integrated with Firebug. After installing Page Speed, the tools adds two menus to the Firebug window – Page Speed and Page Speed Activity. Page Speed tool gives you several suggestions on how to speed up the page loading time and Page Speed Activity acts as a recording tool for the network activity of your web pages. |
| 2 | YSlow | 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. |
| 3 | Greasemonkey |
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. |
| 4 | FireFTP | 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! |
| 5 | 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. |
** Please check the add-ons compatibility with the currest version of Firefox you have, in the respective add-on’s home pages.
{ 4 comments }
Great list!
I’m thinking about using page speed now.
Thanks.
Page speed is doing a great job. You will definitely find it useful.
My favorite it the Web Developer Toolbar.
@Rob
Sometimes, I use web developer toolbar. But still Firebug tops my list.
Comments on this entry are closed.