When deciding on which web browser to use, one thing that distinguishes Firefox for many web developers is the wealth of plug-ins available. The vast majority are free to download and allow you to personalise your browser exactly how you like. For web designers and developers, this is particularly useful, as often the more menial tasks are made easier and completed quicker by using plug-ins, allowing you to work more efficiently and effectively.
So because there is a whole sea of Firefox plug-ins out there for you to sift through, we've done the hard work for you, and selected 20 of the best.
- 1. Firebug
- 2. HTML Validator
HTML Validator, unsurprisingly, adds HTML validation inside Firefox and Mozilla. Any HTML errors detected throughout the course of a page are displayed in icon form in the status bar when browsing, and the plug-in is then able to validate the HTML itself.
- 3. IE Tab
You and your fellow developers may have made the switch to Firefox decades ago, but an estimated 70% of Internet users stick with IE as their default browser, meaning developing sites and applications that run smoothly on IE is vital. With IE Tab, one click is all it takes to see how your pages looks and runs in IE, and switching back to Firefox is just as simple. A great tool for all developers.
- 4. ColorZilla
ColorZilla is a particularly useful add-on for designers, especially those who have found a color on a certain site and never been able to accurately replicate it for their own use. Features include an Advanced Eyedropper, ColorPicker and Page Zoomer, meaning you can lift a colour from a page in your browser and transfer it to your own palette, stored for use at a later date when you come to designing your own pages. Other handy attributes include a zoom feature, which allows you to measure the distance between any two points on the page, and the ability to uncover what CSS rules specify a given color.
- 5. MeasureIt
For every complex and multi-use plug-in there is a simple one, hiding away in the background, going about its job quietly. MeasureIt, for example, allows you to draw out a ruler and measure the pixel height and width of any element of the webpage you are viewing. Simple and effective- a great tool for designers.
- 6. Web Developer
Web Developer is another plug-in considered to be a “must have” for any serious web designer or developer. It adds a menu and a toolbar, fit with a variety of web developer tools, to your browser, providing you with instant and easy access to important development features. It is designed for Firefox, Flock and Seamonkey, meaning it will run smoothly on any platform that these browsers support, including Windows, Linux and Mac OS X.
- 7. Yslow
Yslow integrates with Firebug in order to analyse web pages and suggest ways of improving their performance. It grades pages based on one of its three pre-defined rule sets for high performance websites, or based on a more individual user-defined rule set, fully customisable by the developer. After analysing the page’s performance, YSlow provides a set of statistics about the page and also offers suggestions for areas of improvement and ways to make the page quicker, enabling the developer to see exactly where a page is going wrong.
- 8. Aardvark
Aardvark is a user-friendly selector tool which allows developers to select elements of a web page and perform specific actions on them, including editing their size and location within the page, as well as adding and removing different aspects to suit your needs. A simple right click is all that is needed to begin the editing process, and with a feature that allows users to analyse the structure of the page, Aardvark is becoming increasingly popular with novice and experience developers alike.
- 9. Greasemonkey
- 10. FirePHP
FirePHP is a handy plug-in for developers who already use FireBug. By using a simple PHP method call, users are able to log in to their Firebug Console. To use, Firebug must already be installed and a PHP library downloaded. For developers looking to improve their Ajax development, FirePHP is a very useful tool.
- 11. ScreenGrab
ScreenGrab is a great tool to have at hand when something unexpected catches your eye on a webpage. It allows you to save the webpage, either in its entirety or just a segment of it, as an image to either a file or your clipboard, to be used at a later date. And as long as you have Java installed in your browser, it can capture Java or Flash that’s embedded in the page too.
- 12. FireShot
FireShot is relatively similar to ScreenGrab in that allows users to take screenshot of either part of or the whole webpage you are browsing. Where FireShot differs, however, is that it provides a set of graphical or text annotation tools, making it particularly useful for designers who want to use a page as a specific example of how they design their own. And as all screenshots can be uploaded to free public screenshot sharing sites, sharing ideas with clients or colleagues has never been easier.
- 13. FoxyProxy
One common complaint from developers working on Firefox is the limited proxying capabilities, which is where the amusingly named FoxyProxy comes in. It uses animated icons to inform the user when a proxy is in use, and advanced logging system means you can track what proxies were used where and at exactly what time. As the website says, FoxyProxy is fully compatible with Portable Firefox, has better support for PAC files than Firefox itself, and is translated into more than 25 languages. What’s not to like?
- 14. Window Resizer
If you want to see how your website looks on screens of various different sizes, Window Resizer is the add-on for you. View your site at 640x480, 800x600, 1024x768, 1280x800, 1280x1024 and 1600x1200 resolutions. This handy tool is easily accessible through the Context menu, Tool menu or by clicking on a Toolbar icon.
- 15. Library Detector
- 16. SEOQuake
Use SEOQuake on the fly to analyse your own SEO efforts and the SEO efforts of competitors. SEOQuake’s SEOBar gives you an instant snapshot of selected SEO parameters for the page you’re viewing. Parameters include Google PR, Google Index, Google link and similar parameters for other search engines including Yahoo!
- 17. GridFox
GridFox lets you overlay a grid onto any website- it’s as simple as that. You can customize your grid to suit your specifications, using GridFox to maintain faultless grid-based layouts. Once installed, you can right click on any site to access the simple GridFox menu.
- 18. FireFTP
FireFTP is a free, cross-platform, secure, multi-language FTP client. Besides providing access to FTP servers, FireFTP lets you compare directory content, search, filter, compress, drag and drop. It comes with tutorials and help files for new users.
- 19. View Dependencies
View Dependencies is a really useful add-on for developers. It provides you with a list, accessible through the Page Info window, showing which files were loaded to view the current page you’re viewing. Files are ordered by size and type, for ease of use, and can be opened in a new tab or window.
- 20. LinkChecker
This plugin (from the developer of MeasureIt and numerous others) allows the user to very quickly determine the type of links on a page. This means it's easy for you to see broken links or redirects as you browse your site. You can customise the colours used and also exclude certain anchor text.