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>AppDataLocalGoogleChromeUser DataDefaultUser 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.
Hope that helps!
Duncan Smart's Blog 
I am on Mac Lion. Followed your recipe. Created folders in path and Custom.css file. No effect.
@Vlad Sorry, the path was slightly wrong for OSX – it should have been ~/Library/Application Support/Google/Chrome/Default
That’s it! Thanks.
Excellent! Thanks!
Great !
on linux for chromium this is:
~/.config/chromium/Default/User\ StyleSheets/Custom.css
Thank you
Thanks for blogging this. People are always asking and now I have the right place to point them. 🙂
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?
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/
Thanks Rowan, updated.
Thanks, you’re a legend!
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 – add an “!important” to your font-size as shown.
You are AWESOME!!! I thought !Important is a comment. Works really great now!! THANKS!!!
Chrome 19 now zooms in and out with Ctrl++ and Ctrl+-. Ctrl + mousewheel does not work though. Might save a bit of time…
On Linux I found it under
~/.config/chromium/Default/User StyleSheets
Awesome tip. Thanks!
Reblogged this on Scribblings and commented:
Here is an awesome tip for those who use Chrome’s developer tools.
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;
Thank you a lot! On Ubuntu the file is /home/{username}/.config/chromium/Default/User\ StyleSheets/Custom.css
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!