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.
- Click the MeasureIt button in the bottom right corner of Firefox
- Click and drag the area you want to measure.
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.
- 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).
- 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.
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.
- Quick Usage Instructions
Source Viewer Tab settings
Source Viewer Tab displaying HTML source in a tab
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.