How to enable view of rulers in Chrome DevTools?

Click on the Chrome setting, then:

1. Under Preferences, Enable DevTools and enable Ruler.
2. Go to your page and right click on it, then click inspect.
3. Click Toggle Device Toolbar icon (top-left of DevTools window.

1. Click Toggle Device Toolbar which is in the top-left of your DevTools window.

2. 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.

   

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.