Skip to content

Instantly share code, notes, and snippets.

@vbsessa

vbsessa/chrome-devtools.md

Last active August 9, 2024 12:01
Show Gist options
  • 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 extensions to load custom stylesheets.

  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

    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
}

  4. Open Chrome Extensions tab, click Load expanded extension and point to the folder containing all four files.

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

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

@fancysmartypants
Copy link

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

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
}

@vbsessa
Copy link
Author

vbsessa commented Apr 28, 2024

Updated.
Thanks to @3otis.

@vbsessa
Copy link
Author

vbsessa commented Apr 28, 2024

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

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

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