What are the best tools for measuring web elements in the browser?

Question

DevelopmentDesign

What are the best tools for measuring web elements in the browser?

4

Options
Considered

50

User
Recs.

Nov 7, 2023

Last
Updated

4 Options Considered

Best tools for measuring web elements in the browser	Price	Last Updated
-- Tape	-	Aug 23, 2022
-- Chrome DevTools	-	Oct 10, 2022
-- Dimensions	-	Apr 14, 2022
-- Command-Shift-4	0	May 21, 2018

See Full List

Built By the Slant team

Find the best product instantly.

4.7 star rating

Try it now - it's free

score 30 · Answer 1

Tape

Top Pro

Measures between multiple objects simultaneously

Tape allows creating a custom grid to measure distance between all set rules. It snaps to sides of elements (can be turned off) and font baselines, allows setting horizontal and vertical rules manually, generate them automatically and have a custom origin point. See More

Top Pro

Grid is kept as the page is scrolled through and browser window manipulated

Once a grid rule is placed, it stays in place as the page is scrolled through and browser window manipulated. Items snapped to elements will stay with elements. See More

score 11 · Answer 2

Chrome DevTools

Top Con

Limited to the box model of elements

DevTools only displays measurements of the HTML element's box that means that it can't measure, for example, relative to text's baseline or objects within a canvas element. See More

Top Pro

No need for a separate tool

Chrome comes with DevTools baked in. So if Chrome is used for development and it fills the need, there's no need for a separate tool. See More

Top Con

Does not measure distance between elements

DevTools measure dimensions of HTML elements only. See More

See All

score 4 · Answer 3

Dimensions

Top Pro

Measures visible not HTML elements

Dimensions takes a screenshot of the page and uses that to create a contour map via edge detection that can then be used to measure actual page elements instead of HTML elements. For example, Dimensions measures against contours of letters in text, through transparent backgrounds, etc See More

Top Con

Doesn't work well with gradients and textured backgrounds

Since Dimensions is based on color edge detection, color gradients and patterns tend to mess with the results. A simple workaround is to open Chrome's DevTools (or equivalent) and remove the offending DOM object. See More

score 1 · Answer 4

Command-Shift-4

Top Pro

Available natively on any Mac

It's already built in to the OS. See More

The Slant team built an AI & it’s awesome

Find the best product instantly

What are the best tools for measuring web elements in the browser?

4 Options Considered

Tape

My Recommendation for Tape

My Recommendation for Tape

Measures between multiple objects simultaneously

Grid is kept as the page is scrolled through and browser window manipulated

Chrome DevTools

My Recommendation for Chrome DevTools

My Recommendation for Chrome DevTools

Limited to the box model of elements

No need for a separate tool

Does not measure distance between elements

Dimensions

My Recommendation for Dimensions

My Recommendation for Dimensions

Measures visible not HTML elements

Doesn't work well with gradients and textured backgrounds

Command-Shift-4

My Recommendation for Command-Shift-4

My Recommendation for Command-Shift-4

Available natively on any Mac

Don't see your favorite option? Add it.

One sec!