How to change the font size in Chrome Developer Tools

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.

Chrome DevTools with a larger font-size

Hope that helps!

21 thoughts on “How to change the font size in Chrome Developer Tools

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

  1. 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?

  2. 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/

  3. 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;
    }
    ===============================================================

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

  5. 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;

  6. 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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s