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.

Avatar for Username

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

Hierdie gesprek is in die argief. Vra asseblief 'n nuwe vraag as jy hulp nodig het.

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

  • 4 antwoorde
  • 1 het hierdie probleem
  • 1 view
  • Laaste antwoord deur kensley.lewis

kensley.lewis
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!

Gekose oplossing

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

What CSS code did you try ?

Lees dié antwoord in konteks 👍 0

All Replies (4)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Gekose oplossing

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

What CSS code did you try ?

kensley.lewis
kensley.lewis Vraag-eienaar
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?

Gewysig op deur kensley.lewis

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
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;
 }
}

kensley.lewis
kensley.lewis Vraag-eienaar
more options

Absolutely fantastic!

Thanks

Gewysig op deur kensley.lewis