One of the most useful tools that I’ve been introduced to since starting work in the web development field last year is a simple little Firefox extension called MeasureIt. I have used this extension extensively for the past few months, and although it is simple, it has helped me tremendously with my web design work.
What the MeasureIt extension does is add a button in the bottom left corner of your Firefox browser, which can be clicked at any time to enable ruler functionality. Once you’ve enabled MeasureIt, the contents of the browser are frozen, and your mouse becomes a pixel ruler. Clicking and dragging the mouse creates a box highlighted in blue, and a popup attached to the top right corner of the box tells you how many pixels tall and wide your box is. This information has been invaluable, as I no longer have to guess and use trial and error for placing elements on a web page.
The one flaw that I’ve found with MeasureIt, and I am not positive it can be considered a flaw necessarily, is it’s behavior when the browser is refreshed. I will often use MeasureIt to determine a pixel amount, make a quick adjustment to my code, and then refresh Firefox in order to see the difference, without toggling MeasureIt off. Instead of maintaining the ruler overlay, the browser returns to normal functionality, which wouldn’t normally be a problem, but MeasureIt’s button stays “on” instead of switching to “off.” This causes a problem if I need to make another quick measurement right away because I have to toggle the extension off and then back on before getting to use it again. What I would prefer more than anything else is to have the ruler overlay maintain it’s control, even after a refresh, until I toggle it off.
Despite the one minor flaw that I’ve found in my use of MeasureIt, I can’t help but give it a great rating, as it has saved me a ton of time and made my job a lot easier.
4.5/5
Have any other really useful web development Firefox extensions I should try out? What do you think of MeasureIt? Know of something better?
If you enjoyed this post, Please consider subscribing to my full-post feed, or subscribing to receive my posts by email. Also, please check out my contribute and get reviewed pages. Have anything to say? Please comment!
Pearl Crescent Page Saver is a nice plugin that lets you take screen captures of your pages. You can capture the entire page (visible and off screen portion), so no need to splice multiple screen shots to get a view of the whole page.
Firebug is supposed to be good too for CSS and JS debugging.
MeasureIt is super handy indeed. An example of simple software that does what it does extremely well without becoming bogged down in needless features. Great Review.
SB