Skip to content

Instantly share code, notes, and snippets.

@vbsessa

vbsessa/chrome-devtools.md

Last active April 24, 2024 23:45
Show Gist options
  • Star 65 You must be signed in to star a gist
  • Fork 10 You must be signed in to fork a gist
  • Save vbsessa/e337d0add70a71861b8c580d5e16996e to your computer and use it in GitHub Desktop.
Save vbsessa/e337d0add70a71861b8c580d5e16996e 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.

@tejasjadhav
Copy link

@itamud try replacing .platform-linux with .platform-mac in the stylesheet. For more information, check the official source of these styles in Chromium for reference.

@ouweiya
Copy link

ouweiya commented Sep 18, 2018

What about macOS platform?
Is there any source from which I can check all the customizable styles?

You can view the elements by pressing ctrl + shift + i in the Chrome Devtools standalone interface. You can use the Chrome Devtools UI as a web page debugging, in fact it is a web page.

chrome

@timtim7373
Copy link

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

@blackdrago
Copy link

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

@akmandev
Copy link

Thanks man!!! That's awesome

@Measureless
Copy link

Thank you very much! It works on Windows 10. I changed consolas to source code pro.

@vbsessa
Copy link
Author

vbsessa commented Jun 14, 2019 •
edited

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.

@vbsessa
Copy link
Author

vbsessa commented Aug 7, 2019 •
edited

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

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
Copy link

How about changing the fonts here ?

image

@vbsessa
Copy link
Author

vbsessa commented Jan 2, 2020

How about changing the fonts here ?

image

My previous answer is just about how to do it.

@aviav
Copy link

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
Copy link

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
Copy link

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

Screenshot 2021-03-24 at 11 03 10

@vbsessa
Copy link
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
Copy link

tr1ms commented May 24, 2021 •
edited

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

Before

Screenshot 2021-05-24 15:17:00

After

Screenshot 2021-05-24 15:16:22

@daguitosama
Copy link

It has worked out nicely, thanks .
Screenshot from 2021-05-26 14-41-21

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
Copy link

7ombie commented Jul 8, 2021

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

@arcanisgk
Copy link

arcanisgk commented Aug 7, 2021 •
edited

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

@vbsessa
Copy link
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
Copy link

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
Copy link

bpcw commented Feb 27, 2022 •
edited

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
Copy link

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
Copy link

@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

@vbsessa
Copy link
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
Copy link

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
Copy link

7ombie commented Apr 19, 2023

@chrillep - Thank you. Only saw this now.

@lystormenvoy
Copy link

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

@vbsessa
Copy link
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.

Captura de tela 2024-02-22 132325

@lystormenvoy
Copy link

lystormenvoy commented Feb 23, 2024 •
edited

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.

Captura de tela 2024-02-22 132325

it work
do you know how to set network details's response style and source code style?
image
image

@3otis
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment