Skip to content

Instantly share code, notes, and snippets.

@rhaseven7h

rhaseven7h/chrome-devtools.md

Forked from vbsessa/chrome-devtools.md
Created April 30, 2020 19:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rhaseven7h/ea3b9d802c71883a604a211f549c0806 to your computer and use it in GitHub Desktop.
Save rhaseven7h/ea3b9d802c71883a604a211f549c0806 to your computer and use it in GitHub Desktop.
Download ZIP
How to customize Chrome devtools fonts
Raw
chrome-devtools.md

  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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment