5 Firefox Addons for the Average Web Developer

[yoursks]

You won’t find any super-advanced addons for “extracting strings from xml and javascript files to simplify mozilla application localization process” or “debug running applets and Java Webstart application” in this list. These addons are intended for “the rest of us” – people who grudgingly have to edit our own web sites.

1. 1. MeasureIt

MeasureIt allows you to quickly bring up an on-screen “ruler” to measure sections of your site. Quickly determine the space between certain sections, indents etc.

1. 1. 1. 
         Quick Usage Instructions

1. 1. 1. Click the MeasureIt button in the bottom right corner of Firefox

1. 1. 1. Click and drag the area you want to measure.

1. 1. lori

lori stands for “Life-of-request info”. What it does is tell you valuable info on how long it takes for your page to display, how large it is, and how many requests were made to load the page.
The first number displayed is the time it took to see the first byte returned from the server (from your click to the first byte received by your browser). It’s displayed in seconds (up to the thousandth of a second).
The second number is how long it took to display the page (from your click to the complete rendering of the page). Again, the time is displayed in seconds, up to the thousandth of a second.
The third number displayed is the total page size (number of bytes/kilobytes/megabytes used to display the page). This value includes both bytes fetched from the server and bytes fetched from the browsers cache.
The forth and final number is the total number of “requests” used to fetch the page content (images, style-sheet, javascript etc). Again, this value includes both data downloaded from the server and cache requests.

1. 1. Source Viewer Tab

Source Viewer Tab is a simple but extremely helpful addon. When you select View Source(or View Selected Source it opens the source view in a new tab, instead of a new Firefox window. If that weren’t enough, it also allows you to specify a totally different application to view your source with (Notepad, TextEdit – whatever your HTML editor of choice is).

Source Viewer Tab settings

Source Viewer Tab displaying HTML source in a tab

1. 1. IE View Lite

IE View Lite is fairly self explanatory. It allows you to view a page in IE. It has a couple of added benefits vs. similar addons. 1) It’s smaller and 2) It allows you specify Safari instead of IE if you’re using OS X.
Right-click a blank spot on any web page and select View This Page in IE to do just that.

To use Safari instead of IE (OS X only), change the Internet Explorer Location to/usr/bin/open and add -a Safari to the Parameters field.

IE View Lite set to use Safari

1. 1. Firebug

Firebug is without question the most advanced addon in this list. Though it’s capable of doing a lot of “expert level” things, it’s also very handy for figuring out basic stuff. I’ve been using it a lot lately (new theme on Simple Help) to determine which part of the .css file is causing things to render the way they do. Webmonkey has a good tutorial on getting started with Firebug if the interface seems a bit daunting. For what it’s worth, Firebug has saved me hours of frustration over the last week alone.