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:

chrome-devtools://devtools/devTools.css

2 comments:

  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

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

    ReplyDelete