Auxiliary lines (measuring elements) in Chrome DevTools?

Question

In Firefox DevTools there are auxiliary lines if I hover over any CSS:

Are there settings in Google Chrome to get such auxiliary lines?

Cutlass

(Dev-tools) Settings => Elements => Show rulers – Beverly

@Beverly Oh so easy. Thanks a lot! – Cutlass

@Beverly Reads rather like an answer than a comment... :-) – Meggy

Answer 1

As Kaiido said in a comment, open the DevTools window and go to Settings → Elements → Show Rulers.

Barrister

Answer 2

Adding an answer to an older post since things/UI has changed in Chrome Devtools and this is the first post Google provides when searching for rules/lines being shown

Go to Settings -> (first section) Preferences -> Scroll way down to Elements -> Check the checkbox 'Show rulers on hover'.

Moorhead

still now showing – Kite

Answer 3

Click the "Grid" button for the grid element on the "Elements" tab. https://developer.chrome.com/docs/devtools/css/grid

Fuze

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Gab