MeasureIt: Another Firefox Extension for Web Developers

Last week in our ongoing series on Firefox extensions we looked at Firebug. This week we’ll take a look at MeasureIt, a tool that enables developers to accurately measure items on a website.

The MeasureIt extension for Firefox is a handy tool to…this might surprise you…measure stuff. That’s it — no more, no less.

This is a built-in feature of the Internet Explorer Web Developer Toolbar, and comparable to the Ruler in the Firefox Web Developer extension. However, I prefer this ruler, as it displays the dimensions right next to the selected area. Moreover, if you elect not to install the Web Developer extension, you have the ruler functionality with this add-on.

Resize cursor handles allow you to adjust the selected area after drawing it, and a drag-n-drop handle lets you to move around the highlighted measurement area.

Reasons that you might use MeasureIt:

• To determine the width of an element that you want to center horizontally on a page as a block (DIV);
  
• To determine the height/width of an element for purpose of positioning other element(s) around it;
  
• To determine available space — such as between two fixed columns — for embedding another element(s);
  
• To visually estimate the best display size for an embedded graphic, photo, or video.
  

The latter example represents one of the more common ways that I use MeasureIt, when adding an element to an existing text-only article. Content creators often need to know this information, too. So, MeasureIt gives them the independence to determine this on their own.

Summary

MeasureIt is a simple tool, but it does just what it needs to do.

Installing the add-on is as simple as clicking the “Add to Firefox” (or “Download”) button of the MeasureIt download page, then clicking Firefox’s menubar {Tools | Add-ons} to complete the installation and enabling. To deploy, click the MeasureIt (toggle) icon on the browser taskbar.

Shoutout to developer Kevin Freitas.