What is the modern way to style the Dev Tools area through userChrome.css
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!
วิธีแก้ปัญหาที่เลือก
It likely doesn't work because you need to place the code in userContent.css.
What CSS code did you try ?
อ่านคำตอบนี้ในบริบท 👍 0การตอบกลับทั้งหมด (4)
วิธีแก้ปัญหาที่เลือก
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?
เปลี่ยนแปลงโดย kensley.lewis เมื่อ
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
เปลี่ยนแปลงโดย kensley.lewis เมื่อ