Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to customize Chrome devtools fonts
  1. Enable #enable-devtools-experiments flag in chrome://flags section.

  2. Open Chorme Devtools and check Settings > Experiments > Allow custom UI themes.

  3. Create the following four files in a dedicated folder.

    3.1. devtools.html

    <html>
    <head></head>
    <body><script src="devtools.js"></script></body>
    </html>

    3.2. devtools.js

    var x = new XMLHttpRequest();
    x.open('GET', 'style.css');
    x.onload = function() {
        chrome.devtools.panels.applyStyleSheet(x.responseText);
    };
    x.send();

    3.3. style.css

    :host-context(.platform-linux) .monospace,
    :host-context(.platform-linux) .source-code,
    .platform-linux .monospace, 
    .platform-linux .source-code {
        font-size: 11px !important;
        font-family: Consolas, monospace !important;
    }
    
    .monospace,
    .source-code {
        font-size: 11px !important;
        font-family: Consolas, monospace !important;
    }
    
    ::shadow .monospace,
    ::shadow .source-code {
        font-size: 11px !important;
        font-family: Consolas, monospace !important;
    }

    3.4. manifest.json

    {
        "name": "Custom Chrome Devtools Theme",
        "version": "1.0.0",
        "description": "A customized theme for Chrome Devtools.",
        "devtools_page": "devtools.html",
        "manifest_version": 2
    }
  4. Open Chrome Extensions tab, click Load expanded extension and point to the folder containing all four files.

@itamud

This comment has been minimized.

Copy link

itamud commented Jul 25, 2018

What about macOS platform?
Is there any source from which I can check all the customizable styles?

@tejasjadhav

This comment has been minimized.

Copy link

tejasjadhav commented Aug 27, 2018

Great! Worked for me on Chrome 68 on Arch Linux. Changed font to Iosevka. Thanks @vbsessa

@tejasjadhav

This comment has been minimized.

Copy link

tejasjadhav commented Aug 27, 2018

@itamud try replacing .platform-linux with .platform-mac in the stylesheet. For more information, check the official source of these styles in Chromium for reference.

@ouweiya

This comment has been minimized.

Copy link

ouweiya commented Sep 18, 2018

What about macOS platform?
Is there any source from which I can check all the customizable styles?

You can view the elements by pressing ctrl + shift + i in the Chrome Devtools standalone interface. You can use the Chrome Devtools UI as a web page debugging, in fact it is a web page.

chrome

@timtim7373

This comment has been minimized.

Copy link

timtim7373 commented Oct 25, 2018

Hello to all
Do not tell me how to change the font size in the menu in devtools?
8

@blackdrago

This comment has been minimized.

Copy link

blackdrago commented Apr 17, 2019

This is excellent! I set this up in my Mac (running Mojave) and it works perfectly.

Is there any resource available for changing other fonts sizes in Chrome DevTools (e.g., the console window)? The inspect window and source text are much better, but my console log still makes me squint and/or lean forward...

@ozanakman

This comment has been minimized.

Copy link

ozanakman commented Apr 23, 2019

Thanks man!!! That's awesome

@Measureless

This comment has been minimized.

Copy link

Measureless commented Jun 14, 2019

Thank you very much! It works on Windows 10. I changed consolas to source code pro.

@vbsessa

This comment has been minimized.

Copy link
Owner Author

vbsessa commented Jun 14, 2019

This is excellent! I set this up in my Mac (running Mojave) and it works perfectly.

Is there any resource available for changing other fonts sizes in Chrome DevTools (e.g., the console window)? The inspect window and source text are much better, but my console log still makes me squint and/or lean forward...

Sorry, i haven't tried this kind of change yet. If you find it out, message me and i'll update the tutorial.

@vbsessa

This comment has been minimized.

Copy link
Owner Author

vbsessa commented Aug 7, 2019

Hello to all
Do not tell me how to change the font size in the menu in devtools?
8

What's your OS?
In Linux, just add this to your style.css:

.platform-linux {
    font-family: 'Your font here', sans-serif !important;
    font-size: 'Your size here' !important; /* optional */
}

Linux default is font-family: Roboto, Ubuntu, Arial, sans-serif;

For other, just replace the word linux everywhere in style.css by mac or windows according to your platform.

@abrhambas01

This comment has been minimized.

Copy link

abrhambas01 commented Dec 21, 2019

How about changing the fonts here ?

image

@vbsessa

This comment has been minimized.

Copy link
Owner Author

vbsessa commented Jan 2, 2020

How about changing the fonts here ?

image

My previous answer is just about how to do it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.