Firefox add-ons can be one of the best set of tools a web developer can have but with so many out there it can be hard to decide on which ones are the best for you. I was reluctant to post this at first, given the countless other blogs out their who have posted their own add-on lists, but felt this would be of value for those looking for recommendations that weren't posted 2-3 years ago. I avoided going for the "Top 841 Add Ons Every Web Developer Must Have!!!!" angle, as this isn't a top list. It's simply a list of my personal favourites because, as a guy who's known around the office for having too many add-ons installed for Firefox, I've definitely used a lot of add-ons, some which were fanstastic, and some which left something to be desired. Over time I managed to pare down my pile of add-ons in to a core set that all save me a considerable amount of time, and also share the same basic qualities:
- Easy to Use
- Not Obtrusive
Ease of use is important to saving time (an add-on isn't going to increase productivity if it takes just as long to figure out how to use it, configure it, or even just to use it). Not being obtrusive is important because I want my add-ons to be un-noticable other than a toolbar or icon unless I actively want to utlilize it, and this ties in with being light-weight, as a light-weight add-on is not going to cause any decreases in performance. Finally, accuracy is imperitive because I have to be able to trust what information the add-on is providing me with.
With those qualities explained, I'll get on to the list.
2) Web Developer
Web Developer is an add-on that provides a toolbar and menu that gives you access to a host of different development tools. Just one of the 12 toolbar buttons gives you the following options:
There are tons of other useful tools included with Web Developer, including some of my personal favourites:
- Outline different HTML elements (with ability to display element type and custom outline colour)
- Show/hide/outline images with oversized dimensions, missing alt attributes, adjusted dimensions, missing dimensions, etc
- Show image paths, alt and title attributes, sizes
- Disable CSS styles (external, interal, inline, etc..)
4) HTML Validator
A must have if you care about W3C validation. HTML Validator displays an icon in the bottom of your browser indicating if the current page validates against its DOCTYPE, as well as the number of errors and warnings. You can configure the validation method it uses (HTML Tidy, or SGML which is used by the W3C Markup Validation Service), and it also displays a list of errors and highlights them in when you view the page's source.
Simple and easy-to use, MeasureIt is an add-on that, when activated, displays an overlay where you can drag and position a dynamic ruler so you can measure dimensions on a web page.
6) Session Manager
Session Manager is an incredibly useful add-on that tracks your Firefox sessions and allows you reload older sessions or recover a crashed session. If you're like me and usually have the same websites opened in different tabs, this add-on will make your life a lot easier.
QuickRestart is a simple and convenient add-on that simply adds a button to your toolbar that restarts Firefox, just like when you install an add-on or upgrade.
Hopefully you will find these add-ons as useful as I have. I'll also be posting a list of useful add-ons for Internet Explorer later this week as well. I encourage everyone to comment with your own recommendations for Firefox add-ons that you find useful for web development.