MeasureIt – Browser add-on to check page display


MeasureIt is a very nice and useful extension to add in your browser.

It helps us measure elements displayed on the web page – their height, their width, or the spaces between them, their alignment… all the n number of measurements (in pixels) that the requirements team wanted for the page display, and that we had to implement. Hence, this extension will be helpful to both the developers and the testers, for checking if the website elements are displayed as per requirement.

measure_it_horizontal_spacingmeasure_it_vertical_spacingmeasure_it_element_size

Sure, there are already existing tools like the ‘Ruler’ in the ‘Web Developer tools’ of IE browser, and Firefox browser. But, this one seems more convenient to me, because it displays dimensions next to the selected area (at all times, not just on hover), and because of this very convenient feature – I  can make a horizontal ruler, and see if two page sections are evenly spaced by just scrolling the page. The ruler will move along with the page scroll.

I faced some issues while trying to view the installed extension (tool bar) in Firefox. These got cleared very easily by following the steps in the below link.

http://support.mozilla.org/en-US/questions/816486

Below given tips will be helpful while you are learning how to use the toolbar:

1. Just click the toolbar icon to turn the feature on/off.

2. Click and drag on the screen wherever you want to create the ruler

3. The ruler can be moved across the screen by selecting it, and then dragging it along to the preferred destination

4. ESC key can be pressed to turn off  MeasureIt

5. CTRL + Arrow keys combination can be used to move the ruler by 1 pixel (in preferred direction)

6. CTRL + SHIFT + Arrow keys combination can be used to move the ruler by 5 pixels (in preferred direction)

This extension is available for Chrome, Safari, and Firefox, and you can download from the below given link:

http://frayd.us/extensions/measureit/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s