When comparing Dimensions vs Chrome DevTools, the Slant community recommends Chrome DevTools for most people. In the question“What are the best tools for measuring web elements in the browser?” Chrome DevTools is ranked 2nd while Dimensions is ranked 3rd. The most important reason people chose Chrome DevTools is:
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.
Ranked in these QuestionsQuestion Ranking
Pros
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
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.
Cons
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.
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.
Con Does not measure distance between elements
DevTools measure dimensions of HTML elements only.