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.

Author

vbsessa commented Jun 14, 2019 •

edited

Loading

This is excellent! I set this up in my Mac (running Mojave) and it works perfectly.

Is there any resource available for changing other fonts sizes in Chrome DevTools (e.g., the console window)? The inspect window and source text are much better, but my console log still makes me squint and/or lean forward...

Sorry, i haven't tried this kind of change yet. If you find it out, message me and i'll update the tutorial.

Author

vbsessa commented Aug 7, 2019 •

edited

Loading

Hello to all
Do not tell me how to change the font size in the menu in devtools?

What's your OS?
In Linux, just add this to your style.css:

.platform-linux {
    font-family: 'Your font here', sans-serif !important;
    font-size: 'Your size here' !important; /* optional */
}

Linux default is font-family: Roboto, Ubuntu, Arial, sans-serif;

For other, just replace the word linux everywhere in style.css by mac or windows according to your platform.

abrhambas01 commented Dec 21, 2019

How about changing the fonts here ?

Author

vbsessa commented Jan 2, 2020

How about changing the fonts here ?

My previous answer is just about how to do it.

aviav commented Jun 3, 2020

This is excellent! I set this up in my Mac (running Mojave) and it works perfectly.
Is there any resource available for changing other fonts sizes in Chrome DevTools (e.g., the console window)? The inspect window and source text are much better, but my console log still makes me squint and/or lean forward...

Sorry, i haven't tried this kind of change yet. If you find it out, message me and i'll update the tutorial.

For me, it works to prepend body to make the selector more specific. For example,

:host-context(.platform-linux) .monospace,
:host-context(.platform-linux) .source-code,
body.platform-linux .monospace,
body.platform-linux .source-code {
  font-size: 12px !important;
  font-family: Source Code Pro Semibold, monospace !important;
}

MSRhmn commented Sep 25, 2020

I was using some custom devtool extension but it wasn't effecting on console text. Now it works just fine. Thank you.

thatsthat commented Mar 24, 2021

It works well in my Mac OS but the menu UI is not resized accordingly, does anyone know how to fix it?

Author

vbsessa commented Mar 27, 2021

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

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

vbsessa commented Jun 14, 2019 • edited Loading

vbsessa commented Aug 7, 2019 • edited Loading

abrhambas01 commented Dec 21, 2019

vbsessa commented Jan 2, 2020

aviav commented Jun 3, 2020

MSRhmn commented Sep 25, 2020

thatsthat commented Mar 24, 2021

vbsessa commented Mar 27, 2021

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

vbsessa commented Jun 14, 2019 •

edited

Loading

vbsessa commented Aug 7, 2019 •

edited

Loading

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