20 Firefox Plug-ins for Web Designers and Developers

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
  
  Firebug is considered by many as a must have tool for any web developer or designer. It integrates with Firefox, providing the user with a large range of developing tools, easily accessible when browsing. Features include editing, debugging and the mentoring of CSS, HTML and JavaScript live in any webpage, meaning that once you’ve tried it, you’ll wonder how you got by without it before.
• 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
  
  Greasemonkey is a relatively simple app that allows developers to customize the way in which a website displays by using small bits of JavaScript. The plug-in offers access to an online library of scripts already for a wide range of popular websites, as well as the ability for web developers to write their own.
• 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
  
  Ever wonder which JavaScript libraries are being used on the page your viewing? Wonder no more. Library Detector, which supports jQuery, jQuery UI, Prototype, Scriptaculous, Dojo, YUI, Qooxdoo, MooTools and Spry, reveals this in an instant. Be inspired by other peoples’ creations.
• 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.

• About the Author

  Tom is a writer and designer who works with a supplier of PhotoSmart cartridges, toners and refills. You read his other posts about advertising, art and design on the CreativeCloud.

• TAGS:
• Browser
• Firefox
• Plugin
• Tools