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>\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!

About these ads

21 Responses to How to change the font size in Chrome Developer Tools

  1. Vlad says:

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

    • Duncan Smart says:

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

  2. Vlad says:

    That’s it! Thanks.

  3. Chris Miller says:

    Excellent! Thanks!

  4. cbke says:

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

  5. Thanks for blogging this. People are always asking and now I have the right place to point them. :)

  6. soenke says:

    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?

  7. Rowan says:

    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/

  8. Mark Lyon says:

    Thanks, you’re a legend!

  9. Hsin Huang says:

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

  10. Matt Kemp says:

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

  11. doubleyouuu says:

    On Linux I found it under

    ~/.config/chromium/Default/User StyleSheets

  12. Awesome tip. Thanks!

  13. Reblogged this on Scribblings and commented:
    Here is an awesome tip for those who use Chrome’s developer tools.

  14. Jon Newcomb says:

    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;

  15. ygerasimov says:

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

  16. Dave Merrill says:

    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!

Follow

Get every new post delivered to your Inbox.

Join 36 other followers

%d bloggers like this: