How to enable view of rulers in Chrome DevTools?
You can enable it in DevTools Settings > Preferences, under the Elements section.
Update: Most of them might be confused on how to use it. To use, open console and hover on an element to view the ruler. Thanks @Brandito for mentioning in the comment.
Click Toggle Device Toolbar
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.
