How to Set the Chrome Console Font

Thursday, August 18th, 2011

Introduction

Lately I've become a bigger fan of the Google Chrome dev channel. The WebKit Web Inspector hasn't quite stolen my heart but I can no longer claim total fidelity to FireBug and its swarms. After spending more and more time in Chrome's console I have developed a mean squint, though. The default console font is just too small for my liking. What can I say? I like big fonts, and I cannot lie.

"There must be a setting somewhere in Chrome to modify the font in the console," I thought to myself. I checked basic settings at chrome://settings. Nothing. I checked advanced settings at chrome://settings/advanced. Nope. I looked through experimental settings at chrome://flags. Nada. After an hour or so of hacking around I discovered a solution that seems to work.

Open the Web Inspector

Right click in any web page → Inspect Element

Undock the Web Inspector into a separate window

undock.png

If the Web Inspector opens as a portion of the main Chrome window, it is docked and you'll need to undock it. Click the button at the lower left of the Web Inspector to do this.

Inspect the Inspector

A little meta-inspection will help reveal the CSS rules that are responsible for styling the console. The trick at this point is that Right clickInspect Element is not available to open up the Inspector Inspector. With the first Inspector window undocked and focused, use the key binding for opening the Inspector to open a second Inspector window. On OS X, that key binding is ⌥⌘I. On Windows and Linux, it is Ctrl-Alt-I.

This Inspector Inspector can be used to learn more about the structure and styling behind the Inspector itself. In particular, I was interested in overriding the following CSS rules.

/* Keep .platform-mac to make the rule more specific than the general one above. */
body.platform-mac.platform-mac-snowleopard .monospace,
body.platform-mac.platform-mac-snowleopard .source-code {
    font-size: 11px !important;
    font-family: Menlo, monospace;
}

Squinting… 11px, there's the problem!

Override the styling in Custom.css

It is possible to edit devTools.css right there in the Inspector Inspector and that is a great way to test out live styling changes, as it is on any web page. The problem with this technique is that those changes will not persist. The solution is to place them in a Custom.css file located in the Chrome User Data Directory.

Once you have located your Custom.css file and you have dropped in all of your custom rules, you're done! Those changes will persist and every time that you open up the Inspector you will see your custom styles applied!

In Summary

I have focused on changing the font-family and font-size in this article but you can override anything you'd like with the correct CSS selectors. A good effort could even solarize the Web Inspector Console.

If you are interested, my Custom.css is available on github. I have chosen to bump up the font size to avoid squinting and prefer Consolas over Menlo for more enjoyable web development.