How to measure web page elements to get width and height in Chrome

*.Open Chrome then go the Web Store.
Search and download a free browser extension called “ruul.Screen ruler”.
Install the said extension on your web browser.

*.Once installed
The extension will immediately place its icon on the omnibar.
You can easily recognize its icon because it looks like a small white ruler.

*.Next, open a new tab or window then load any site or web page that you want.

*.Once the site is fully loaded
Choose an element that you want to measure.
For example, you can measure the width and height of the site’s logo or banner.

*.Now
Go ahead and click the shortcut icon for ruul. Screen ruler.
A list of on-screen rulers will be shown.
Just choose the ruler that you want.
You can choose a short static ruler or a long static ruler.
You can even choose colored ones.

*.If you want to choose a resizable ruler, just select the “Resizable” option.
You may also opt to show your measurements in pixels, inches or centimeters.

*.What’s next?
Simply drag and place the on-screen ruler over the web page elements that you want to measure.
Get the exact measurements.

Note them down and that’s it.
You’re done.

Remember that the size of a static ruler is fixed so if you want a ruler that youcan drag and adjust, choose the resizable one. You can also place multiple rulers on the same web page at the same time.

Link:ruul.Screen ruler

Possibly Related Threads…
How to sort extensions into groups in Chrome