Skip to content

Instantly share code, notes, and snippets.

@theangkko

theangkko/chrome-devtools.md

Forked from vbsessa/chrome-devtools.md
Created February 15, 2024 23:04
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 theangkko/4ec6e80bd097b2bf5005fe77b3f11c8a to your computer and use it in GitHub Desktop.
Save theangkko/4ec6e80bd097b2bf5005fe77b3f11c8a 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