How to Hide the Ruler in Chrome Developer Tools

A few weeks ago I posted about Google Chrome v.23's New Ruler Feature however I have had some feedback that many users don't like it and want to disable it. Unfortunately, Google didn't include a toggle/disable option for the rules in this release but it is coming in a future release.

In a future Google Chrome release, the developer tools options menu General tab "Elements" section will have a "Show Rulers" checkbox which will allow you to hide the rulers. Check out the preview below.

The future Chrome developer tool options will include "Show Rulers"

The current Chrome developer tool options exclude "Show Rulers"

If you want to stay on the cutting edge of Chrome, you should download and use Google Chrome Canary which includes the newest features. By the nature of Chrome Canary, it is not production ready so it will have issues and may completely fail from time to time. It is a good way to see what sort of features Google has in the pipeline for Chrome however.

Google Chrome v.23: New Ruler Feature

With the release of Chrome version 23, you are in for a pleasant surprise! The developer tools (F12) now offer a horizontal and vertical rule built-in to the browser window when inspecting elements.

1. Right click an element on the page and click "Inspect Element"
2. Developer Tools will open at the bottom of your screen
3. Hover over any element in that window and you'll see it highlighted in your browser...
4. and there will be horizontal/vertical rules

Now guessing at positioning and sizing is made much easier. Thanks Google!