Here’s a list of 5 ruler extensions for Google Chrome which you can use to measure width and height of elements of websites that you have open inside Chrome. Measuring distances inside a web browser is something that web developers do on a regular basis. If for some reason you need to measure how much of a distance is there between objects on websites, you can use ruler extensions available in the Chrome Web Store to do that in just a few mouse clicks.
Here’s a list of 5 such extensions and apps which we hand picked so you don’t have to look for them yourself.
MeasureIt!
MeasureIt! is a ruler extension for Chrome which adds a measuring rectangle to your mouse cursor after activating MeasureIt! by left clicking on its top right corner icon.
With the measuring rectangle activated you’ll be able to start measuring objects on the website by holding down left click and drawing rectangles on top of the objects that you want to measure, see image above. Size of the box is showed in a pop-up, both width and height of course.
Get MeasureIt!.
ruul. Screen ruler
ruul. Screen ruler offers a bit more functionality than MeasureIt!. You can see it in action on the image down below. With ruul you actually get rulers, 6 of them to be more precise.
Rulers have transparency and they can be repositioned so that every nook and cranny of the website is covered. To measure something you just need to align the ruler against the object and read out the width and length values from the ruler.
Get ruul. Screen ruler.
Page Ruler
Page Ruler works similarly to MeasureIt!, but instead of showing measured values in a pop-up it uses a toolbar.
A lot of additional information about the selected region are also showed, next to its size. For example you can see how big is the distance to the edges of the screen, top, bottom, left, right. Note that the toolbar is only active when you left click on the extension icon and when you activate it, it’s not active all the time. Its position can also be changed in the extension settings.
Get Page Ruler.
Tape
All the extensions that we covered until now aren’t that precise with their measurements, but Tape fixes that.
As you can see from the screenshot above Tape is a ruler extension that has a very powerful zoom tool. With this zoom tool you can zoom real close on edges of objects and that way increase the precision of the measurement.
Get Tape.
Measure Ruler
We’ll end things with Measure Ruler, which is basically a clone of the first extensions from the list, MeasureIt!.
The same selection rectangle can be seen here, and with a pop-up where the dimensions of the currently drawn rectangle can be seen.
Get Measure Ruler.
Conclusion
For maximum precision you should probably use Tape. All the other ruler extensions are all pretty much the same, so you don’t need to be overly precise, you can use pretty much any of them. Let us know what you think in the comments down below.
