Join the Mozilla’s Test Days event from 9–15 Jan to test the new Firefox address bar on Firefox Beta 135 and get a chance to win Mozilla swag vouchers! 🎁

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.

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

Cuireadh an snáithe seo sa chartlann. Cuir ceist nua má tá cabhair uait.

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

  • 4 fhreagra
  • 1 leis an bhfadhb seo
  • 41 views
  • Freagra is déanaí ó kensley.lewis

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!

Réiteach roghnaithe

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

What CSS code did you try ?

Read this answer in context 👍 0

All Replies (4)

Réiteach Roghnaithe

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

What CSS code did you try ?

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?

Athraithe ag kensley.lewis ar

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

Absolutely fantastic!

Thanks

Athraithe ag kensley.lewis ar