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.

@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