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.
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.
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: