Friday 13 March 2009

Essential Add-on Tools for Firefox

Any good developer should have a few different browsers installed in order to check things are working properly in all of them. I currently have Firefox 2 and 3, Opera and IE6 installed and have IE7 on another box. I haven't gotten around to installing Chrome yet, but I guess I will have to sooner or later.

Firefox 3 is my browser of choice and here's why:
  • Tabbed browsing
  • Decent rendering engine
  • Live Bookmarks (Feeds)
  • Ctrl+U access to Page Source
  • Useful Add-ons

I don't like how much memory Firefox hogs, but it's much better than it used to be and maybe I should curb my tab usage. Sometimes the Shockwave Flash plugin flakes out and won't play until I disable/enable it or restart the browser, but that could also be related to tab usage too.

The following Add-ons are the reason Firefox is the first browser I'll turn to. They are incredibly valuable additions to your development toolbox. You've probably already got many of them installed.

Firebug allows you to "edit, debug, and monitor CSS, HTML, and JavaScript live in any web page." I couldn't count the number of times I've right-clicked to Inspect Element. It has a tiny footprint in your status bar when you're not using it. This is the best web debugging tool I've used.

Web Developer adds a toolbar and menu that allow you to manage cookies, CSS, Forms, Images, Outline elements along with a host of other tools. Highlights for me are the Cookie management, Outlining elements (to help debug layout issues) and the Error Console for debugging Javascript.

NoScript is a security add-on that allows you to protect yourself against XSS and Clickjacking attacks by only allowing active content to run from sites that you trust. It's this flexible script blocking approach that also makes it a useful debugging tool. You probably should have it installed to see how borked your sites are - it has a huge user base.

ScreenGrab lets you save webpages as images. You can grab the whole page or just the visible portion, or even copy it to the clipboard. No more copy+pasting sections together to screenshot a long page.

Adblock Plus allows you to browse without ads. It works very well and is incredibly popular because of that. Users love it, advertisers and websites dependant on ad revenue hate it. As long as flash banners keep soaking up CPU cycles, I'll keep using it.

YSlow for Firebug analyzes your web pages and tells you why they're slow (based on Yahoo's rules for high performance web sites). Some of the criteria is a bit subjective or inapproriate for smaller sites, but generally it offers some good tips.

SeoQuake SEO extension helps you "deal with search engine optimization(SEO) and internet promotion of web sites." It's possibly a little bloated for some users, but it does cover a lot of bases. It's worth checking out if you're doing any SEO work.


  1. I would add to this list with...

    Undo Closed Tabs Button:

    Too easy to knock the "w" key when you're trying to shortcut over to tab #2 or 3 and shut down the impportant tab you've been working in... one click on this add-on and you're back in business

  2. Hi Tom, Thanks for the comment, but I have to disagree since you can easily reopen the most recently closed tab with Ctrl+Shift+T.

  3. I use "Firebug" Add-Ons in my Firefox latest version. “Firebug” is most advanced JavaScript debugger available for any browser.