Search code examples
google-chromegoogle-chrome-devtools

How to enable view of rulers in Chrome DevTools?


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.


Solution

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

    Show rulers