vbsessa/firefox-devtools.md

Last active August 31, 2024 12:59

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/6150f39d1e92699e9c2f49e58fcbcc03.js"></script>
Save vbsessa/6150f39d1e92699e9c2f49e58fcbcc03 to your computer and use it in GitHub Desktop.

Download ZIP

How to customize Firefox devtools fonts

Raw

firefox-devtools.md

Open ~/.mozilla/firefox/<your_profile>/chrome/userContent.css (create it if does not exist).

Paste the following content in it.

 @namespace url(http://www.w3.org/1999/xhtml);
 @-moz-document regexp("chrome://browser/content/devtools/**/.*"){
     .devtools-monospace {
         font-family: Consolas, monospace !important;
         font-size: 8pt !important;
     }
 }

Restart Firefox.

Fenex commented Feb 11, 2020 •

edited

Loading

@vbsessa yup, i did it and FF loads my userChrome.css. I tested the below code and the style has been applied to the FF window.

* {
    color: yellow !important;
}

Howerver the code on the top post don't work on my FF.

Author

vbsessa commented Feb 11, 2020 •

edited

Loading

This is my userChrome.css and it's working i think.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document
    url("chrome://devtools/markup-view.xhtml"),
    url("chrome://devtools/cssruleview.xhtml"),
    url("chrome://devtools/computedview.xhtml"),
    url("chrome://devtools/fontinspector/font-inspector.xhtml"),
    url("chrome://devtools/webconsole.xul") {
    * {
        font-size: 9pt !important;
        font-family: 'Consolas', monospace !important;
    }
}

Tested on firefox 72.

vbsessa commented Feb 27, 2020

Not working T.T
win10 / 73.01

Sorry i can't help any further, i'm running linux.
Did you try this?

Mikhail22 commented Apr 28, 2020 •

edited

Loading

Not working, Win 10, Firefox 75

sh4rov commented Jun 10, 2020

Not working, Linux Manjaro, Firefox 77.0

Flashwalker commented Nov 27, 2020

Works with Pale Moon

anithegregorian commented Jul 3, 2021

This one works on FF => 68.0 Linux with userChrome.css or userContent.css. Inspector tools are now using CSS variables and the inspector tree itself is loaded in an iframe so none of the tweaks actually worked esp. with .CodeMirror classes.

You can find all the variables in this file (just copy paste below URL in FF to view source)

resource://devtools/client/themes/variables.css

For the userChrome.css part here's what solved it for me.

/* @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); */

:root {
  /* Text sizes */
  --theme-code-font-size: 13px !important;
}

If userChrome.css is not loaded create userContent.css and add the same rulesets. Tried and tested on FF Mac/Linux 89

ghost commented May 15, 2022

No longer works on firefox 102

jgentil commented May 26, 2022

Works fine but you have to put it in userContent.css and NOT userChrome.css as devtools are considered content panes.

Author

vbsessa commented May 26, 2022

Updated according to @jgentil words.

aleclarson commented Nov 5, 2022 •

edited

Loading

I recommend perusing this link if you're having troubles:
https://www.userchrome.org/how-create-userchrome-css.html

And as @jgentil said, replace userChrome.css with userContent.css for devtools customization.

kidzgy commented Aug 30, 2024

@-moz-document url-prefix("chrome://devtools/content"){
.devtools-monospace {
font-family: "Cascadia Mono", "Consolas", "Sarasa Gothic SC", "Microsoft Yahei UI" !important;
}
}

put it in userContent.css