We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Wannan tattunawa ta zama daɗaɗɗiya. Yi sabuwar tambaya idan ka na bukatar taimako.

What is the modern way to style the Dev Tools area through userChrome.css

  • 4 amsoshi
  • 1 yana da wannan matsala
  • 1 view
  • Amsa ta ƙarshe daga kensley.lewis

more options

What is the modern way to style the Dev Tools area through userChrome.css? It appears that whatever techniques were used in 2018, don't apply today because I tried them all.

How should the CSS syntax look for styling the inspector, debugger, etc... (i.e. change the font size and font family types).

I'm on FireFox 97.0

Many thanks!

What is the modern way to style the Dev Tools area through userChrome.css? It appears that whatever techniques were used in 2018, don't apply today because I tried them all. How should the CSS syntax look for styling the inspector, debugger, etc... (i.e. change the font size and font family types). I'm on FireFox 97.0 Many thanks!

Mafitar da aka zaɓa

It likely doesn't work because you need to place the code in userContent.css.

What CSS code did you try ?

Karanta wannan amsa a matsayinta 👍 0

All Replies (4)

more options

Zaɓi Mafita

It likely doesn't work because you need to place the code in userContent.css.

What CSS code did you try ?

more options

Before you answered, I originally tried the following...

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

@-moz-document url-prefix(chrome: //devtools/content/) {

 .devtools-monospace {
   font-family:arial !important;
   font-size: 20px !important;
   line-height:3;
 }

}

Any recommendations?

An gyara daga kensley.lewis

more options

This code in userContent.css should work. Do not add the @namespace line.

@-moz-document url-prefix(chrome://devtools/content/) {
 .devtools-monospace {
   font-family:arial !important;
   font-size: 20px !important;
   line-height:3;
 }
}

more options

Absolutely fantastic!

Thanks

An gyara daga kensley.lewis