Top 10 Firefox Add-ons for Webmasters

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:

• Temporarily disable browser features such as caching, JavaScript, images and CSS
• 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
• View a page’s JavaScript-generated source — fantastic for debugging AJAX stuff

In my opinion, Web Developer is an must-have tool if you do any sort of Web design or development work.

2. Firebug

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:

• View and edit the page’s HTML, CSS and JavaScript
• Right-click any element in the page to inspect it
• Add breakpoints to the page’s JavaScript to debug it at certain points
• See the page’s DOM tree
• View download times, bottlenecks and HTTP headers

It even has a built-in JavaScript command line and console for debugging (and it’s nicer than the JavaScript Debugger add-on too).

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.

Unlike Firefox’s regular Save Page As > Web Page, Complete option, this add-on really does save pretty much everything: JavaScript files, style sheets, images referenced from CSS, and so on. It’s not perfect but it does a really good job. Also handy if you want to archive a permanent copy of any webpage on your computer.

6. FireFTP

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.

7. Screengrab

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.

8. HttpFox

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.

10. ColorZilla

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!