Tuesday, July 17, 2012

Change the font size in Chrome Developer Tools

Chrome dev tools default font sizes seem to have been set for fighter jet pilots but my eyesight is not what it used to be, which wasn't good to begin with.

You can find out how to reset the font sizes here with instructions for Mac and Linux.

In brief on Windows, you can to to this folder:

C:\Users\[user]\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets

...or, for Canary...

C:\Users\[user]\AppData\Local\Google\Chrome SxS\User Data\Default\User StyleSheets

Create a Custom.css stylesheet, add the css below changing the font size to whatever you want:

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

And you are good to go.

Here's an article on skinning the dev tools. and you can find all the styles, in case you want to do it yourself, at:



  1. Aloha! I created a small plugin which provides a selection of themes and editor settings (including font size adjustments) in Chrome Developer Tools: DevTools Author | http://mikeking.io/devtools-author

  2. thank you so much for this plugin...You are awesome

  3. Wow, very cool and useful advice, you helped me a lot! But then I found out that exists even easier method how to do it - just use Google Chrome Canary https://yumdownload.com/google-chrome-canary its usual Google Chrome, but with many great features and tools for developers!