-
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
Hi,
I use Google chrome Version 98.0.4758.102 (Official Build) (64-bit) on Linux, and the above .css file does not switch the monospace/source code font everywhere in Chrome devtools, e. g. in the "Sources" tab, or in the "Computed" layout tab when examining CSS.
I had to add something like below to your current .css content in order to make this work:
.platform-linux, :host-context(.platform-linux) {
--monospace-font-size: 11px !important;
--monospace-font-family: <mypreferredfont>, monospace !important;
--source-code-font-size: 11px !important;
--source-code-font-family: <mypreferredfont>, monospace !important;
}
Maybe something to look into.
Thanks
Looks like !important is not necessary when overriding these CSS vars:
.platform-mac,
:host-context(.platform-mac) {
--monospace-font-family: "SF Mono", Monaco, Consolas, monospace;
--source-code-font-family: "SF Mono", Monaco, Consolas, monospace;
}
@eltriplet @abrhambas01
I took a quick look and it doesn't look like the width of these tabs is fixed in the css. They should grow according to the content. You could force a min-width or auto. Something like this:
.tabbed-pane-header-tab { min-width: 80px !important; width: auto !important; font-family: Arial !important; }Quick tip: to find out which class to modify, open a console (floating mode) on top of another console (floating mode) and inspect the elements in the same way that you would with a web page.
Hope this helps.
great work, thank you.
But I fail to inspect the console UI 🤣
If you guys want to customize other stuff, please read the official source code below
But I fail to inspect the console UI
I think your devtools window should be in floating mode in order to be inspected.
to use fira code
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
font-family: 'Fira Code', monospace;
@chrillep - Thank you. Only saw this now.
When I use Chrome 123 there are #enable-devtools-experiments flag. any other way?
When I use Chrome 123 there are #enable-devtools-experiments flag. any other way?
I'm not in my dev machine to try it out, but maybe this is the awnser.
When I use Chrome 123 there are #enable-devtools-experiments flag. any other way?
I'm not in my dev machine to try it out, but maybe this is the awnser.
it work
do you know how to set network details's response style and source code style?
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
I do not think so; I am investigating because it happens that the devtool html code viewer works correctly but when I try to use monospace in a web rendering ... the characters gain or lose space and everything is out of square ...
i find this in a spanish forum:
https://es.stackoverflow.com/questions/475551/no-consigo-los-fonts-adecuado-o-el-setting-css-adecuado-para-el-alineado-de-tex