Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Auxiliary lines (measuring elements) in Chrome DevTools?

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

Auxiliary lines in Firefox

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

like image 509
volkflo Avatar asked Feb 12 '18 09:02

volkflo


People also ask

Does Chrome dev tools have a ruler?

which is in the top-left of your DevTools window. Click More Options and then select Show rulers. The rulers are to the left of and above your viewport. You can click on the numbers to set the width and height to that size.

How do I add the ruler to my browser?

You can enable element rulers in Chromium browsers. They are dope. Open Inspector and hit Escape to open Settings. Under Elements check “Show rulers”.


1 Answers

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

like image 198
ericd7 Avatar answered Sep 22 '22 09:09

ericd7