vbsessa/chrome-devtools.md

Last active August 9, 2024 12:01

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/vbsessa/e337d0add70a71861b8c580d5e16996e.js"></script>
Save vbsessa/e337d0add70a71861b8c580d5e16996e to your computer and use it in GitHub Desktop.

Download ZIP

How to customize Chrome devtools fonts

Raw

chrome-devtools.md

Enable #enable-devtools-experiments flag in chrome://flags section.
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.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

body.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 extension and point to the folder containing all four files.

tr1ms commented May 24, 2021 •

edited

Loading

It works, but when minimizing browser width the toggle button to see more tabs disappear.

Before

After

daguitosama commented May 26, 2021

It has worked out nicely, thanks .

I have used this styles, no buttons dissapear.

:host-context(.platform-linux) .monospace,
:host-context(.platform-linux) .source-code,
.platform-linux .monospace, 
.platform-linux .source-code {
    font-size: 11px ;
    font-family: 'DM Mono', monospace ;
}

.platform-linux {
    font-family: 'SF Pro Text', sans-serif !important;
    font-size: 12px ; /* optional */
}

.monospace,
.source-code {
    font-size: 11px ;
    font-family: 'DM Mono', monospace ;
}

::shadow .monospace,
::shadow .source-code {
    font-size: 11px ;
    font-family: 'DM Mono', monospace ;
}

7ombie commented Jul 8, 2021

Does DevTools support ligatures? I'd like to use Fira Code.

arcanisgk commented Aug 7, 2021 •

edited

Loading

wich is the default fon of devtool used to dender the html code...??.??

Author

vbsessa commented Aug 9, 2021

Does DevTools support ligatures? I'd like to use Fira Code.

I don't know, i've never tried a such type of font. Google it...

wich is the default fon of devtool used to dender the html code...??.??

I think it uses the 'monospaced' font defined in your OS.

arcanisgk commented Aug 9, 2021

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

bpcw commented Feb 27, 2022 •

edited

Loading

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

nifanic commented May 19, 2022

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;
}

cnscorpions commented Oct 31, 2022

@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

https://github.com/chromium/chromium/tree/c124ab08959cc2bc98b6d335e63feb4341b9c552/third_party/blink/renderer/devtools/front_end/ui

Author

vbsessa commented Jan 13, 2023

@cnscorpions

But I fail to inspect the console UI

I think your devtools window should be in floating mode in order to be inspected.

chrillep commented Feb 23, 2023

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;

7ombie commented Apr 19, 2023

@chrillep - Thank you. Only saw this now.

lystormenvoy commented Feb 22, 2024

When I use Chrome 123 there are #enable-devtools-experiments flag. any other way?

Author

vbsessa commented Feb 22, 2024

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.

lystormenvoy commented Feb 23, 2024 •

edited

Loading

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?

3otis commented Apr 24, 2024

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;
}

fancysmartypants commented Apr 28, 2024

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."

3otis commented Apr 28, 2024

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
}

Author

vbsessa commented Apr 28, 2024

Updated.
Thanks to @3otis.

Author

vbsessa commented Apr 28, 2024

Updated the CSS and also created a repository with all files.
https://github.com/vbsessa/chrome-devtools

Author

vbsessa commented May 1, 2024 •

edited

Loading

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.

BryanFonseca commented Jun 24, 2024

Still working. Tried out on Fedora 40.
Thanks. Hero.

vbsessa/chrome-devtools.md

tr1ms commented May 24, 2021 • edited Loading

daguitosama commented May 26, 2021

7ombie commented Jul 8, 2021

arcanisgk commented Aug 7, 2021 • edited Loading

vbsessa commented Aug 9, 2021

arcanisgk commented Aug 9, 2021

bpcw commented Feb 27, 2022 • edited Loading

nifanic commented May 19, 2022

cnscorpions commented Oct 31, 2022

vbsessa commented Jan 13, 2023

chrillep commented Feb 23, 2023

7ombie commented Apr 19, 2023

lystormenvoy commented Feb 22, 2024

vbsessa commented Feb 22, 2024

lystormenvoy commented Feb 23, 2024 • edited Loading

3otis commented Apr 24, 2024

fancysmartypants commented Apr 28, 2024

3otis commented Apr 28, 2024

vbsessa commented Apr 28, 2024

vbsessa commented Apr 28, 2024

vbsessa commented May 1, 2024 • edited Loading

BryanFonseca commented Jun 24, 2024

tr1ms commented May 24, 2021 •

edited

Loading

arcanisgk commented Aug 7, 2021 •

edited

Loading

bpcw commented Feb 27, 2022 •

edited

Loading

lystormenvoy commented Feb 23, 2024 •

edited

Loading

vbsessa commented May 1, 2024 •

edited

Loading