The font for Develop Tools won't change?
My userChrome.css file is in the right place and is working.
The code I'm using in order to change my font (make it bigger):
.devtools-monospace {
font-family: "Consolas" !important; font-size: 12px !important;
}
But nothing happens. Why?
Thank you very much,
Chosen solution
This may have unintended consequences, but if all the same rules are applicable to all the developer tools panels, you could try:
@-moz-document url-prefix(chrome://devtools/content/) {
/* Some rules */
}
Read this answer in context
👍 1
All Replies (17)
Sorry no idea but try this : https://addons.mozilla.org/en-US/firefox/addon/theme-font-size-changer/
USSER CHROME URL'S
https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/ http://techdows.com/2017/09/classic-theme-restorer-userchrome-css-modify-firefox-57-photon-ui.html https://github.com/Aris-t2/CustomCSSforFx/issues/1 https://www.accessfirefox.org/Theme-Font-Size-Changer.php https://www.userchrome.org/ https://www.accessfirefox.org/Firefox_Accessibility_Themes.php https://www.userchrome.org/what-is-userchrome-css.html http://kb.mozillazine.org/UserChrome.css https://github.com/axydavid/FirefoxUI/blob/master/README.md https://github.com/wilfredwee/photon-australis https://www.reddit.com/r/FirefoxCSS/ Note not all code in one place.
Please let us know if this solved your issue or if need further assistance.
Where in the developer tools is this selector used? I see it in some body tags if I search on DXR. Modifying the developer tools isn't easy and straightforward and can be a lot of trial and error (@namespace issues).
I use an @import rule in userChrome.css to import a separate devtools.css file for all changes made. This file doesn't have the default @namespace rule at the start.
This is an example:
/* inspector: tree */
@-moz-document url(chrome://devtools/content/markupview/markup-view.xhtml){
*|* {font-size:10pt!important; font-weight:bold}
}
See also:
Modified by cor-el
Pkshadow said
Sorry no idea but try this : https://addons.mozilla.org/en-US/firefox/addon/theme-font-size-changer/ USSER CHROME URL'S https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/ http://techdows.com/2017/09/classic-theme-restorer-userchrome-css-modify-firefox-57-photon-ui.html https://github.com/Aris-t2/CustomCSSforFx/issues/1 https://www.accessfirefox.org/Theme-Font-Size-Changer.php https://www.userchrome.org/ https://www.accessfirefox.org/Firefox_Accessibility_Themes.php https://www.userchrome.org/what-is-userchrome-css.html http://kb.mozillazine.org/UserChrome.css https://github.com/axydavid/FirefoxUI/blob/master/README.md https://github.com/wilfredwee/photon-australis https://www.reddit.com/r/FirefoxCSS/ Note not all code in one place. Please let us know if this solved your issue or if need further assistance.
Pkshadow, thank you very much but I would prefer not to use any addons for such a basic task as changing the font-size.
Ok, guess did not see the USSER CHROME URL's for your code : https://www.accessfirefox.org/Theme-Font-Size-Changer.php
cor-el said
Where in the developer tools is this selector used? I see it in some body tags if I search on DXR. Modifying the developer tools isn't easy and straightforward and can be a lot of trial and error (@namespace issues). I use an @import rule in userChrome.css to import a separate devtools.css file for all changes made. This file doesn't have the default @namespace rule at the start. This is an example:/* inspector: tree */ @-moz-document url(chrome://devtools/content/markupview/markup-view.xhtml){ *|* {font-size:10pt!important; font-weight:bold} }See also:
cor-el, I tried your example code. It didn't work.
Note that the code won't work directly in userChrome.css You really need to use a separate file via @import url(devtools.css); in userChrome.css.
This code is for the left panel in the Inspector that shows the markup code. the body has this class name.
<body xmlns="http://www.w3.org/1999/xhtml" class="theme-body devtools-monospace" role="application">
I can see that the code is applied.
@-moz-document url(chrome://devtools/content/inspector/markup/markup.xhtml){
body {
font-family: "Consolas" !important;
font-size: 12px !important;
font-weight: bold;
}
}
cor-el said
Note that the code won't work directly in userChrome.css You really need to use a separate file via @import url(devtools.css); in userChrome.css. This code is for the left panel in the Inspector that shows the markup code. the body has this class name.<body xmlns="http://www.w3.org/1999/xhtml" class="theme-body devtools-monospace" role="application">I can see that the code is applied.
@-moz-document url(chrome://devtools/content/inspector/markup/markup.xhtml){ body { font-family: "Consolas" !important; font-size: 12px !important; font-weight: bold; } }
cor-el, yes that changed font in the inspector left pane thank you! But how do I reach the other panes (Debugger, Style Editor, Console etc.)? You also provided this line of code: <body xmlns="http://www.w3.org/1999/xhtml" class="theme-body devtools-monospace" role="application"> And I don't understand what to make of it. It's not CSS. What is it for?
Thank you!
That is the HTML code of the left panel in the Inspector, so you can see that it has the class name you posted above (.devtools-monospace)
Each of the panels has it own chrome URI.
@-moz-document
url(chrome://devtools/content/framework/toolbox-options.xhtml),
url(chrome://devtools/content/inspector/inspector.xhtml),
url(chrome://devtools/content/webconsole/webconsole.xhtml),
url(chrome://devtools/content/debugger/new/index.html),
url(chrome://devtools/content/memory/memory.xhtml),
url(chrome://devtools/content/netmonitor/index.html),
url(chrome://devtools/content/dom/dom.html) {
body {
font-family: "Consolas" !important;
font-size: 12px !important;
font-weight: bold;
}
}
@-moz-document
url(chrome://devtools/content/styleeditor/styleeditor.xul),
url(chrome://devtools/content/performance/performance.xul),
url(chrome://devtools/content/storage/storage.xul),
url(chrome://devtools/content/scratchpad/scratchpad.xul){
* {
font-family: "Consolas" !important;
font-size: 12px !important;
font-weight: bold;
}
}
Modified by cor-el
Chosen Solution
This may have unintended consequences, but if all the same rules are applicable to all the developer tools panels, you could try:
@-moz-document url-prefix(chrome://devtools/content/) {
/* Some rules */
}
cor-el said
That is the HTML code of the left panel in the Inspector, so you can see that it has the class name you posted above (.devtools-monospace)
I knew it was the HTML code. I didn't understand why you posted it. And I still don't understand. You said "so you can see that it has the class name you posted above". So what? What's the use of it? The class .devtools-monospace didn't work for me, it changed nothing as you could see from my first post. So, I was quite perplexed obviously.
cor-el said
@-moz-document url(chrome://devtools/content/framework/toolbox-options.xhtml), url(chrome://devtools/content/inspector/inspector.xhtml), url(chrome://devtools/content/webconsole/webconsole.xhtml), url(chrome://devtools/content/debugger/new/index.html), url(chrome://devtools/content/styleeditor/styleeditor.xul), url(chrome://devtools/content/performance/performance.xul), url(chrome://devtools/content/memory/memory.xhtml), url(chrome://devtools/content/netmonitor/index.html), url(chrome://devtools/content/storage/storage.xul), url(chrome://devtools/content/dom/dom.html), url(chrome://devtools/content/scratchpad/scratchpad.xul)
Thank you for those. May I ask you where do you get them from? Is there any reference that describes how to reach all the elements of Web developer tools in FF in plain English? Or maybe there's some other way to find it other than asking it here? That would be really useful to me, because your examples are great but they don't do exactly what I want (i.e. they don't reach all the element where I want to change the font-size).
Thank you!
jscher2000 said
This may have unintended consequences, but if all the same rules are applicable to all the developer tools panels, you could try: @-moz-document url-prefix(chrome://devtools/content/) { /* Some rules */ }
That worked like a charm! jscher2000, thank you very much. That was a great help!
Ahu_Lee said
My userChrome.css file is in the right place and is working. The code I'm using in order to change my font (make it bigger): .devtools-monospace { font-family: "Consolas" !important; font-size: 12px !important; } But nothing happens. Why? Thank you very much,
Ahu_Lee said
jscher2000 saidThis may have unintended consequences, but if all the same rules are applicable to all the developer tools panels, you could try: @-moz-document url-prefix(chrome://devtools/content/) { /* Some rules */ }That worked like a charm! jscher2000, thank you very much. That was a great help!
Update
I would like to add that jscher2000's example changed font-size everywhere I wanted except for the debugger code pane. I've found out that it could be changed via CodeMirror-line class. So, the whole thing now looks like this (just in case it may be useful to someone else):
@-moz-document url-prefix(chrome://devtools/content/) {
body, .CodeMirror-line {
font-family: "Consolas" !important;
font-size: 14px !important;
font-weight: normal;
}
}
Ahu_Lee said
Ahu_Lee saidMy userChrome.css file is in the right place and is working. The code I'm using in order to change my font (make it bigger): .devtools-monospace { font-family: "Consolas" !important; font-size: 12px !important; } But nothing happens. Why? Thank you very much,Ahu_Lee said
jscher2000 saidThis may have unintended consequences, but if all the same rules are applicable to all the developer tools panels, you could try: @-moz-document url-prefix(chrome://devtools/content/) { /* Some rules */ }That worked like a charm! jscher2000, thank you very much. That was a great help!
Update
I would like to add that jscher2000's example changed font-size everywhere I wanted except for the debugger code pane. I've found out that it could be changed via CodeMirror-line class. So, the whole thing now looks like this (just in case it may be useful to someone else):
@-moz-document url-prefix(chrome://devtools/content/) {
body, .CodeMirror-line { font-family: "Consolas" !important; font-size: 14px !important; font-weight: normal; }}
this piece works for Inspectors and Debuggers and CSS editors, but not Console.
@-moz-document url-prefix(chrome://devtools/content/) {
body, .CodeMirror-line {
font-family: "InconsolataGo" !important;
font-size: 16px !important;
font-weight: normal;
}
}
div, [platform="linux"]:root .devtools-monospace{
font-size: 16px !important;
}
add the above codes to userChrome.css fixed all of my issue, all fonts in the dev tool will be modified.