-
Enable
#enable-devtools-experimentsflag inchrome://flagssection. -
Open Chorme Devtools and check
Settings > Experiments > Allow extensions to load custom stylesheets. -
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.jsvar x = new XMLHttpRequest(); x.open('GET', 'style.css'); x.onload = function() { chrome.devtools.panels.applyStyleSheet(x.responseText); }; x.send();
3.3.
style.cssbody.platform-windows, body.platform-linux, :host-context(.platform-windows), :host-context(.platform-linux) { --monospace-font-size: 12px !important; --monospace-font-family: "Consolas", monospace !important; --source-code-font-size: 12px !important; --source-code-font-family: "Consolas", monospace !important; } .monospace { font-size: var(--monospace-font-size); font-family: var(--monospace-font-family); } .source-code { font-size: var(--source-code-font-size); font-family: var(--source-code-font-family); }
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": 3 }
-
Open Chrome Extensions tab, click
Load expanded extensionand point to the folder containing all four files.
Last active
August 9, 2024 12:01
-
-
Save vbsessa/e337d0add70a71861b8c580d5e16996e to your computer and use it in GitHub Desktop.
How to customize Chrome devtools fonts
Thanks @vbsessa !
It works for me on Chromium ver.124.0.6367.60 - Ubuntu Linux & Chrome ver.124.0.6367.78 - Windows. (I have no bootable Mac.)
style.css
body {
font-size: 13px !important;
font-family: "Myrica M", Inconsolata !important;
}
.platform-windows, :host-context(.platform-windows) {
--default-font-size: 13px !important;
--default-font-family: "Myrica M", Inconsolata !important;
--monospace-font-size: 13px !important;
--monospace-font-family: "Myrica M", Inconsolata !important;
--source-code-font-size: 13px !important;
--source-code-font-family: "Myrica M", Inconsolata !important;
}
.platform-linux, :host-context(.platform-linux) {
--default-font-size: 13px !important;
--default-font-family: "Myrica M", Inconsolata !important;
--monospace-font-size: 13px !important;
--monospace-font-family: "Myrica M", Inconsolata !important;
--source-code-font-size: 13px !important;
--source-code-font-family: "Myrica M", Inconsolata !important;
}
How to update this to use Manifest 3? This is now throwing error: "Manifest version 2 is deprecated, and support will be removed in 2024. See https://developer.chrome.com/docs/extensions/develop/migrate/mv2-deprecation-timeline for details."
Accepted manifest.json with no error
{
"name": "Custom Chrome Devtools Theme",
"version": "1.0.0",
"description": "A customized theme for Chrome Devtools.",
"devtools_page": "devtools.html",
"manifest_version": 3
}
Updated.
Thanks to @3otis.
Updated the CSS and also created a repository with all files.
https://github.com/vbsessa/chrome-devtools
Dropped mac support for now.
If someone uses a mac, could please share which class is being used by chrome? Using .platform-mac is breaking things, at least for me.
Still working. Tried out on Fedora 40.
Thanks. Hero.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
it work
do you know how to set network details's response style and source code style?