Favourite Firefox Add-ons

Davin Greenwell, November 12, 2009 at 1:07 PM

This is a brief list of my Firefox Add-on recommendations. I use these to assist with site development, diagnostics, and so on. They're one of the big reasons why I use Firefox over Safari for web development and problem solving. I don't intend for this to be an exhaustive list of all the features for each add-on, but rather a practical list that explains what they add-on is called, who made it (credit given where credit is due), and what I use it for. Simple.

  • Web Developer (download) by Chris Pederick - an essential tool which allows you to do almost everything you would ever have to do with design-oriented web development.  Seriously, there are so many features that I have not tried all of them yet.  The ones I commonly use are the inspector, which allows you to inspect various website elements, get classes, see parents and children of the elements, as well as inline styling on selected elements.  You can turn CSS on or off, as well as see all the CSS files (and their contents) that the page is pulling in.  I use this almost every day because of the keyboard shortcut - Command-Shift-F (OS X) or Control-Shift-F (Windows) that instantly invokes the tool.  Another small thing I like to use the Web Developer tool for is populating form fields when doing QA on e-commerce development projects and other form-intensive projects.  If you are doing anything form-and-step based, this is essential.  Otherwise you are filling out form page 1 every time to get to form page 2.
  • Dummy Lipsum (download) by Sogame - opens up a sidebar (without closing the page you are on) that you can grab dummy content (lorem ipsum) from - useful to see what webpages will look like with content in them.  Often times I am building websites that will have content but do not yet have content.  This tool is essential for viewing the dynamic nature of website design before it is put in a client's hands.  Dummy Lipsum is a very small add-on that contributes to superior workflow when testing sites.
  • Show IP (download) by Jan Dittmer - Shows the IP of the site you are currently looking at in the bottom right on your status bar.  If you need to do this regularly, this provides the information at a glance.
  • IE Tab (download) by PCMan (Hong Jen Yee) and yuoo2k - Windows only: when viewing a webpage in Firefox, this puts a browser engine switch button in the bottom right of the status bar.  Click on it and a new tab will open with the same page rendered in Firefox with the Internet Explorer rendering engine.  This tends to be useful to quickly see differences between IE rendering and FF rendering, although the version of IE used for this depends on what your system is running currently.  None of the IE diagnostics tools are available so this is mostly for convenience and verification, not for actual inspection and problem solving. 
  • Firebug (download) by Joe Hewitt and the FireBugWorkingGroup (sounds like a nice band name doesn't it?) - I mostly use this for problem solving when I need to isolate elements on a webpage, find out what CSS is being applied to that specific element, where it is coming from (including cascading information) and what it looks like with those attributes turned on, off, or changed.  I admit that I use maybe 1% of the features available in Firebug, but it is still an indespensible tool for problem solving when traditional methods fall short.  If you have a webkit browser (Chrome, Safari) it is similar to the inspector that comes with those browsers as an advanced feature.
  • Xmarks (download) by Xmarks Inc - Enables bookmark syncing across many computers and browsers.  I work from several different computers and maintaining bookmarks for all those computers (3 currently) would be labour-intensive as each site I work on has 3 different addresses: dev site, staging site, and live site.  Xmarks ensures I only need to bookmark a site once and it will appear on all 3 of my machines.  Similar concept to Dropbox where the information is stored both locally and on a server which keeps your other computers up to date.  My vision for using this is eventually to have a bookmark list that anyone at Smallbox can use to have every development site, every management resource, every live site and every staging site as well as design and development resources.  Maintained by the whole company, this would be extremely easy to have up-to-date with all relevant addresses.  The only downside to this would be that ALL bookmarks would be sync'd, including personal ones (which is undesirable, but can easily be moved to another browser.)

That's about all I use at the moment.  Are there any add-ons for Firefox that you are a regular user of? Do you use these in other ways than I do? Tell me about it in the comments area below - lets trade some knowledge.

Posted In: