Advertisement


Tool to help measure web page elements


Question

I'm wondering if there's a tool out there that can be used to measure all the elements of a web page. I find Chrome's element inspector very handy, and I'm curious if there is a tool that would enable me to measure each element of a web page at once. I tried using Instant Wireframe but that seems to be broken. Does anyone know of any other design tools that may help? For any browser...

Example:

Element measurements

2015/06/15
1
2
6/15/2015 5:40:00 AM

Accepted Answer

Web Developer for chrome does this:

example

2015/06/15
5
6/15/2015 8:54:00 PM

Check out a Chrome extension called Dimensions (demo too), download here.

enter image description here

Some info from the page:

A tool for designers to measure screen dimensions

Images & HTML Elements

Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser.

Mockups

Your designer handed you mockups as PNGs or JPEGs? Just drop them into Chrome, activate Dimensions and start measuring.

Keyboard Shortcut

For the best experience set a keyboard shortcut in the Extension Settings to quickly enable and disable Dimensions.

Open Source

Dimensions is Open Source and hosted on Github. Want to port it to Firefox? Go ahead and fork it. Pull requests are welcomed!

2015/06/16