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.
Some other handy features are the ability to enable/disable javascript, css, and images among other things. You can get a variety of information about the images on a page and the toolbar comes with links to sites to check the validation of your html and css code as well as the accessibility of your site. It seems like every few weeks I discover something else I’d missed in the toolbar. In fact just now I noticed it comes with the ability to not only edit the css of a page, but also the html. I’ve been looking for a good way to do that for months. Chris actively develops the toolbar and even has a support forum on his site to take suggestions for features you’d like to see added.
Browsers Views
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.
JavaScript Extensions
If you write JavaScript functions and what developer doesn’t at some point there are several extensions you can add to help with your code. Firefox comes with a simple JavaScript console which will tell you where you have errors in your code and it may be all you need. You can add functionality to the basic console with Console2. as well as a couple of other extensions to add the functionality to the basic console.
You’ll probably want something a little more than the basic console and two extensions that might fit the bill are Execute JS and the JavaScript Debugger. Execute JS is an enhanced console that lets you run code directly inside so you can easily test new code. The JavaScript Debugger is a full featured debugger, including the ability to set breakpoints in your code that you’ll find invaluable as your JavaScript applications grow.
Information Gathering
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.
My favorite is CSS Viewer which lets you mouse over any page element to see the css properties that have been applied to it. I’ve found it to be a very easy way to quickly inspect the css of a page as well as a little about the structure of the page. If you want an easy view of the entire structure of a web page there’s the Document Map which not only shows the DOM structure of any page, but also lets you quickly find the corresponding element on the page with a single click. X-Ray will display the html of a given document directly on the page for another way to view how a page has been structured. Finally there’s FireBug which adds a console to your status bar that you can use to find errors in your html, css and javascript as well as let you mouse around a page and simultaneously see the html code for where your mouse is located. FireBug makes it extremely easy to learn all sorts of information about your web pages.
Accessibility Extensions
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.
The active developer community working on Firefox extensions has made the browser much more than a way to view web pages. The web developer tools extensions turn Firefox into a full web platform from which you can build your pages. You won’t necessarily end up with as many as I have (One of the items on my ever growing to do list is uninstall some extensions where I have overlapping functionality), but you may find quite a lot that can help make you a more productive web developer. And just when I think I’ve found every extension I could possibly want a new one appears on the list that I find myself installing. Did I mention you can even write your own extensions, with a little javascript, css, and DOM knowledge? Don’t we use all three daily as web developers?
Popularity: 6%
Subscribe to 
TheVanBlog | 
Email This Post
Loading ...
thanks
very helpful thanx