Menu
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.
780
To bring up the Ruler, right-click on the page where you would like to use a ruler and click “Inspect Element”. Next, you need to enable it for the first time, click on the 3 vertical dots in the top-right and Settings. A new window will open, under the Elements section select Show Ruler option.
Mac Cmd + Shift + C or Windows: Ctrl + Shift + C . Now we can use the Elements inspector where we can see all the elements in there you will see the [grid] block behind grid elements; this was the existing feature. This little toggle will show us the grid overview, but that is about it.
#How to use: - drag from main vertical/horizontal ruler to create grids. - click on intersection of vertical ruler and horizontal ruler to go into ruler mode. - while in ruler mode, hold <Shift> key to get a straight line.
Right-click anywhere on the screen, "Inspect Element", gear-wheel in the lower left (Windows) or in the lower right (Mac), "General" tab, scroll down at the bottom "Show Rulers". Check it on/off to liking.
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.
108
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
