How to enable view of rulers in Chrome DevTools?

Question

Chrome DevTools previously offered a setting to show rulers when inspecting elements. It had a pixel ruler at the sides of the view, and boundary lines for each element extending the full view of the page.

It used to be found (as I recall) in "DevTools Settings / General". There no longer is a General section, and I don't see it in "DevTools Settings / Appearance". Has this been moved, or removed? I'm not finding documentation or discussion of it.

Right Click > Inspect > Click Settings Icon > Preferences > Elements > Show rules — vikramvi, Sep 15 '20 at 14:20

score 172 · Accepted Answer · edited Jan 24 '23 at 12:33

172

You can enable it in DevTools Settings > Preferences, under the Elements section.

To use, open the console and hover over an element to view the ruler. Thanks @Brandito for mentioning in the comment.

edited Jan 24 '23 at 12:33

Lee Goddard

10,680
4
46
63

answered Jan 28 '18 at 21:15

Gideon Pyzer

22,610
7
62
68

17

Ok, but how to use it, I can`t see any ruler after enabling it. – Botond Vajna Jun 27 '18 at 11:48
15

@BotondVajna I just found out where they are today, they're visible when you hover over an element in the elements panel, pretty useless if you ask me. – brandito Jul 16 '18 at 06:41
1

I don't understand the point of having those rulers show up only when hovering an element, since element's dimensions are already printed in a handy popup. – DrLightman Jan 24 '20 at 15:50
2

@DrLightman I'd say to better discern how they line up with other elements on the page. I'm definitely finding it useful. – Drazen Bjelovuk May 28 '20 at 15:07
Right Click > Inspect > Click Settings Icon > Preferences > Elements > Show rules – vikramvi Sep 15 '20 at 14:17
1

I needed to restart Chrome to see rulers. – darmis Dec 09 '20 at 10:15
i needed to restart and yes 90% less useful since lines disappear before you can get exact pixel value – Muhammad Umer Apr 30 '21 at 13:27
`$0.getBoundingClientRect()` is more useful, ie. `document.documentElement.clientHeight - $0.getBoundingClientRect().right` – Muhammad Umer Apr 30 '21 at 13:33

score 34 · Answer 2 · answered Sep 29 '18 at 03:56

34

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.

answered Sep 29 '18 at 03:56

Kayce Basques

23,849
11
86
120

4

At first I was like, wow this is a really well formatted answer, great images! Then I saw who posted it... Mr 'What's new in Chrome / DevTools'! – brandito Oct 12 '18 at 02:36
1

@kayce-basques, so,what's up with the checkbox in the answer from @Gideon-Pyzer? Are the rulers that feature produce intended to only be shown when hovering the mouse over a element in the Elements tab in the devtools, or are we using it the wrong way? The "problem" with the rulers and features of the "Device toolbar" mode, is that when you use it, the page no longer look and render like it did right before you pressed the "Toggle device toolbar" button, and that can often be a problem. – NoOneSpecial Mar 17 '19 at 07:33
16

It would be great if this feature provided the ability to drag out guides and take measurements. Is there somewhere I can submit this suggestion? – Aaron Newton Apr 06 '19 at 09:08
1

I needed to restart Chrome to see rulers. – darmis Dec 09 '20 at 10:15
It's worth noting that if you have enabled the ruler in settings, when you toggle 'select element on page' and hover over elements, guide lines will show up. This occurs without enabling the mobile ruler, but when both settings are enabled, I find the combination to be useful. @AaronNewton ...I still think a full feature request should be submitted, if there's a way. – Shad Feb 03 '22 at 15:25

score 6 · Answer 3 · answered Jul 20 '21 at 09:43

6

In Developer Mode Press Ctrl+Shift+P then type Ruler

answered Jul 20 '21 at 09:43

Amir Reza

435
1
7
15

score 5 · Answer 4 · edited Mar 26 '20 at 02:28

5

Click on the Chrome setting, then:

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

enter image description here

edited Mar 26 '20 at 02:28

David Buck

3,752
35
31
35

answered Mar 25 '20 at 20:50

Hanan Fadel

107
2
3

How to enable view of rulers in Chrome DevTools?

4 Answers4