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!

Chrome's Hidden 'Empty Cache and Hard Reload" Feature

Sick of having to clear your cache in Chrome while developing? Going through the Chrome option menu takes much too long. There is an easier way!

1. Open Developer Tools by pressing the F12 key
2. Click and hold Chrome's reload button
3. You will get a sub-menu with 3 options
1. Normal Reload (ctrl + r)
2. Hard Reload (ctrl + shft+ r)
3. Empty Cache and Hard Reload (no shortcut unfortunately)
4. Select the 3rd option and enjoy a fresh page load with the cache cleared all in one simple click

There is also an easy way to clear your cookies:

1. Open Developer Tools by pressing the F12 key
2. Click the Network tab
3. Right click anywhere inside the Network display area
4. The last 2 options are:
1. Clear browser cache
2. Clear browser cookies

Hopefully this makes things even better for your Chrome development!

This write-up was done on Chrome version 22