Firefox is a pretty nice browser in its own right, but one of the things that makes it so useful is the huge range of add-ons available. You can use add-ons to customize the way Firefox behaves, or to add new features to the browser.
There are hundreds of add-ons that can help you as a Web designer or developer — there’s a full list on the Mozilla website. In this article I’ve attempted to distil the list down to the 10 add-ons that I find most useful as a webmaster. I’ve ranked them in approximate order of importance — the ones near the top of the list are the ones I use most often.
Enjoy — and if you have any suggestions please post a response below!
1. Web Developer
This is the Swiss army knife of Web development add-ons. Web Developer gives you a toolbar packed with useful features.
With the Web Developer add-on you can:
- View, manipulate, create and delete cookies
- View and edit a page’s CSS and HTML on the fly
- Manipulate forms and form data
- View all sorts of details about elements in the page
- Measure page elements with the Line Guides and Ruler features
- Highlight different types of elements within the page (great for debugging CSS layouts)
- Resize the browser window to various preset sizes (good for checking compatibility)
- Validate a page’s HTML and CSS with the W3C validators
In my opinion, Web Developer is an must-have tool if you do any sort of Web design or development work.
Firebug is a comprehensive suite of debugging tools along the lines of Web Developer. You can enable it on a page-by-page basis by clicking the little bug icon in the status bar.
Amongst other things, you can use Firebug to:
- Right-click any element in the page to inspect it
- See the page’s DOM tree
- View download times, bottlenecks and HTTP headers
A nice thing about the HTML inspector is that its Layout view shows you the CSS box (margin, padding and so on) around the currently-inspected element, and adds rulers and guides to the page so you can check everything’s lined up. Very cool.
3. SEO for Firefox
There are quite a few Firefox add-ons that can help you with SEO, but SEO for Firefox is the best in my opinion. Search for your target keywords on Google or Yahoo!, then click the SEO icon in the status bar to turn on the add-on. It then adds all sorts of useful info to each entry in the search results page, such as:
- The entry’s position in the search results (surprisingly useful!)
- The page’s Google PageRank
- Its age (the older the better from an SEO perspective)
- Number of inbound links to the page
- Number of bookmarks on del.icio.us
- Alexa rank
…and lots more besides. Unlike some add-ons, it just displays links to this info by default, rather than the info itself. This is a good thing, as it reduces the chance of your computer being blocked by search engines and other sites for requesting too much info at once.
You have to sign up for an SEO Book account to get the add-on, but it’s worth it.
4. HTML Validator
Validating webpages is one of those chores that you know you should do, but inevitably end up forgetting about when it comes to putting the site live. The great thing about this add-on is that it “auto-validates” your pages as you view them; if you see a red cross in your status bar you know that the page has failed validation. No excuses!
You can use one of two validators (or both): SGML Parser (as used by the W3C validation service) or HTML Tidy. As a nice touch, the add-on includes a feature to clean up your page markup, as well as the ability to check that your page conforms to the WAI accessibility guidelines (priorities 1, 2 and 3).
5. Save Complete
I often want to mess about with an online webpage’s HTML and CSS for debugging purposes. Firebug and Web Developer let you do this to some extent, but they’re a bit limited and, of course, they only let you preview changes in Firefox.
Enter Save Complete. This lets you save a webpage along with all its assets (CSS, images, and so on) to a folder on your hard drive. You then have a full local copy of the page that you can edit to your heart’s content, and open with any browser on your computer. Very handy for debugging and testing.
An entire FTP program inside your Web browser might sound like a terrible idea, but in fact FireFTP is rather swish. There’s something nice about having an FTP client always at hand in the browser, since that’s where you tend to spend most of the time when coding webpages.
You can open it in a separate window or in a tab, and it’s very easy to use. It also supports advanced stuff like TLS/SFTP, directory syncing, and even FXP. Many developers I know even prefer FireFTP to the separate Mozilla FTP client, FileZilla.
Takes screen shots of webpages. Great for sending mockups to clients. The nice thing about Screengrab is that it can capture the entire page, even if it doesn’t fit in the browser window. You can also grab just the visible portion of a page, or a selection. Screen shots can be saved out to files, or copied to the clipboard.
This add-on lets you analyze, in real time, the data that is sent between Firefox and the Web server. You can see the full HTTP request and response headers; any sent or set cookies; posted form fields, and so on. This is handy if you do a lot of server-side coding using PHP, for example.
You can also filter on a string of text, which makes it really easy to find the particular header you’re after.
9. User Agent Switcher
Another one from the author of Web Developer, Chris Pederick. This add-on lets you alter the
User-Agent string that Firefox sends to the Web server. This allows Firefox to impersonate other browsers such as IE and iPhone, and search engine crawlers such as Googlebot.
ColorZilla is a tool for analyzing colours in a webpage. Click its icon in the status bar, then hover the mouse over a pixel in the webpage to see its colour value. Click to select the colour; you can then right-click the status bar icon to copy the RGB values in a variety of formats for pasting into your style sheet.
Other handy features of ColorZilla include:
- A Photoshop-style colour picker and palette browser
- A zoom feature to make it easier to click a colour in the page
- A DOM colour analyzer that gives you a palette of all colours used on the page, and lets you see which page elements use which colour
ColorZilla is a nice way to quickly eyedrop colours from a Web page without having to mess about in Photoshop. Great for CSS development.
So there you have it: My top 10 list of Firefox add-ons for webmasters! Anything you’d like to add? Post a response below!
Thanks for compiling this list Matt 🙂 All my regulars are there, and some of the others sound well worth checking out.
I just wanted to add a handy Web Developer tip for checking your form coding. Little bugs with labelling fields are often missed I find, and this shows them up beautifully. Go to Web Developer > Forms > View Form Information and it shows you a new window with a summary of all the form fields, which makes it really easy to see if you’ve missed anything in the form coding.
Thanks Cat! 🙂 Yeah, View Form info is great for getting a quick overview of your form fields. Much easier than hunting around in the markup!
This is a great list. It pretty much mirrors what I wrote in my blog post entitled ‘Firefox Add-ons I Can’t Live Without’ (http://blog.ianroke.co.uk/2009/12/firefox-addons-cant-live-without/) which covers most of the ones on your list.
I do prefer using FireShot as a screen grab tool because I feel it offers much more functonality than any of the other screen grabbing tools I tried.
I was wondering what your views were on this?
[Edited by ianroke on 19-Dec-09 17:05]
Thanks for your comments, and for posting your list.
Unfortunately FireShot doesn’t run on Macs so I can’t try it out. Looks nice though. I also like the look of DownThemAll – might take that for a spin.