One of the main benefits of the Firefox web browser is the active development community that continues to allow new features to be added through extensions. You can find extensions to Firefox that help with many aspects of your web browsing experience. Extensions though can turn Firefox into something more than a simple or enhanced web browser. Web developers can find many that will increase productivity and help get projects done quicker.
I’m a bit of an extension junkie with about 100 installed and 65 or so enabled at any given time. Some like the games are just for fun, others help solve some of the web’s annoyances, but my favorite extensions and the ones I can no longer live without are the Developer Tools extensions. I thought I would share some of those extensions to help you become more productive in your own web development.
Web Developer Toolbar
By far my favorite extension is Chris Pedrick’s Web Developer Toolbar. There’s so much included with this toolbar that it would be impossible to cover in one post. You’ll have to visit Chris Pedrick’s site to find out everything this toolbar can do. Some of the features I use most though are the resize which with a click allows you to resize the browser to any resolution for quick testing, the ability to outline any html element, which helps a lot if you need to see why a table isn’t rendering how you expect, and the css editor which lets you temporarily edit your css so you can experiment with how your page will look without having to commit to any real changes. I use this last one to debug sites when I have no direct access to the files.
Ok even if you’re developing in Firefox we all now our sties need to work in IE above all else. There are a couple of extensions that makes the process of viewing pages in other browsers easier. There’s IE View which opens Internet Explorer loaded with the same page you’re viewing in Firefox at the click of a button. As simple as it might be to do it on your own it really can be a time saver. If you’d rather not wait for IE to load try IE Tab which basically does the same thing except that it opens the equivalent of a new IE window as a new tab inside of Firefox. One less application you need to open. Want to see how your site looks in Opera. Try OperaView which will open opera with your current Firefox page loaded.
You generally know something is wrong with your web pages when they don’t look right. It’s the code you need to change though and often it’s hard to see which part of your code might be at fault. It’s even more difficult when you’re working on a site you didn’t develop. Fortunately there are a variety of extensions that will help let you see the structure of any web page without having to wade though the code.
There are a variety of extensions you can add to help make your pages more accessibly beginning with the aptly named Mozilla Accessibility Extension. This extension adds a couple of new menus primarily aimed at making browsing easier for people with disabilities. For developers it can provide a wealth of information about how to make a page more accessible. TAW3 lets you test your pages for accessibility by means of tawdis.net to help make your pages meet accessibility guidelines.
Other Helpful Development Extensions
Two extensions I use frequently are MeasureIt and ColorZilla. MeasureIt allows you to draw a ruler on a web page so you can see the width and height of a page element which can be useful when things aren’t quite lining up. ColorZilla provides a handy color picker as well as an eyedropper. I’m constantly making use of the eyedropper when I need to match the color of a given site without knowing precisely what that color is.
Some other extensions you may find useful are FireFTP which adds an FTP client to your browser, HTML Validator, which allows you to quickly see validation errors in your code, and the Clear Cache Button, which pretty much does just what it says. There are even a variety of WYSIWYG code editors you can launch from the browser to begin development.
Download a free sample from my book, Design Fundamentals.