21 Comments

When presenting on JavaScript or jQuery I'll typically spend a lot of time in the Chrome Developer Tools window at the console. The problem is that, depending on the projection facilities and the resolution the fonts can be too small to read.

The Chrome devtools themselves are built out of HTML and CSS so I started digging for how I could edit the stylesheet. You can view the default devtool stylesheet by navigating to chrome-devtools://devtools/devTools.css. You can't easily edit this though (it's probably buried as a resource within Chrome), but you can override its styles using the standard custom user stylesheet Custom.css!

Custom.css lives at:

  • Windows: C:\Users\<user>\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets
  • Mac OS X: ~/Library/Application Support/Google/Chrome/Default/User Stylesheets/

The style(s) to add and override in Custom.css are:

body.platform-mac .monospace, body.platform-mac .source-code {
    font-family: Monaco, monospace;
}

/* 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;
}

body.platform-windows .monospace, body.platform-windows .source-code {
    font-size: 12px !important;
    font-family: Consolas, Lucida Console, monospace;
}

body.platform-linux .monospace, body.platform-linux .source-code {
    font-size: 11px !important;
    font-family: dejavu sans mono, monospace;
}

A nice touch is that the styles update automatically as you save Custom.css so you can tweak it on the fly to get the right font-size for your audience.

Chrome DevTools with a larger font-size

Hope that helps!

Comments

Comment by Duncan Smart

@Vlad Sorry, the path was slightly wrong for OSX - it should have been ~/Library/Application Support/Google/Chrome/Default

Comment by Vlad

I am on Mac Lion. Followed your recipe. Created folders in path and Custom.css file. No effect.

Vlad
Comment by Duncan Smart

@Hsin - add an "!important" to your font-size as shown.

Comment by Hsin Huang

You are AWESOME!!! I thought !Important is a comment. Works really great now!! THANKS!!!

Hsin Huang
Comment by Hsin Huang

Hi,
I tried to use the same trick. Edit Custom.css like it was displayed up there. Even though
I'm using windows 7, but I still have mac/linux style. And after I save the file. I click on reload
of the page, the font is still the same. Is there something else I need to do?

====================================================
body.platform-mac .monospace, body.platform-mac .source-code {
font-family: Monaco, monospace;
}

/* 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;
}

body.platform-windows .monospace, body.platform-windows .source-code {
font-size: 15px;
font-family: Consolas, Lucida Console, monospace;
}

body.platform-linux .monospace, body.platform-linux .source-code {
font-size: 11px !important;
font-family: dejavu sans mono, monospace;
}
===============================================================

Hsin Huang
Comment by cbke

Great !
on linux for chromium this is:
~/.config/chromium/Default/User\ StyleSheets/Custom.css

Comment by Vlad

That's it! Thanks.

Vlad
Comment by Mark Lyon

Thanks, you're a legend!

Comment by Rowan

In case anyone gets stuck: On Mac, Custom.css appears to have moved to the following folder:
~/Library/Application Support/Google/Chrome/Default/User Stylesheets/

Rowan
Comment by Duncan Smart

Thanks Rowan, updated.

Comment by soenke

very nice! thanks! helped a lot! wonder why there is no easier way to change this. i mean we're talking about developer tools right?

soenke
Comment by Matt Kemp

Chrome 19 now zooms in and out with Ctrl++ and Ctrl+-. Ctrl + mousewheel does not work though. Might save a bit of time...

Matt Kemp
Comment by doubleyouuu

On Linux I found it under

~/.config/chromium/Default/User StyleSheets

Comment by Jon Newcomb

Great.. but I prefer my fonts insanely small - you can override the line hight problem like this..
font-size: 10px !important;
line-height: 100% !important;
font-family: Consolas, Lucida Console, monospace;

Comment by Dave Merrill

For some time the Chrome dev tools have been way huge, and I could never figure out why. After upgrading to 24, they were impractically big. Editing the custom stylesheet worked, but 9px there was still way bigger than 9px on an actual page. Then I saw @Matt Kemp's tip about the zoom shortcuts, and that appears to have been it. No doubt I hit those keys while the focus was in dev-tools-land, anve zoomed them in. Unfortunately, ctrl-0 doesn't work there, so there's no absolute reset, but you can do fine by eye. Thanks all for the infos!

Dave Merrill
Comment by ygerasimov

Thank you a lot! On Ubuntu the file is /home/{username}/.config/chromium/Default/User\ StyleSheets/Custom.css