Skip to content

Instantly share code, notes, and snippets.

@holehan

holehan/chrome-devtools.md

Forked from vbsessa/chrome-devtools.md
Created December 10, 2018 16:59
Show Gist options
  • Save holehan/e6354dd9909acc64fc17119eb84fd24b to your computer and use it in GitHub Desktop.
Save holehan/e6354dd9909acc64fc17119eb84fd24b 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