Question

Wątek został zarchiwizowany. Jeśli potrzebujesz pomocy, zadaj nowe pytanie.

The font for Develop Tools won't change?

17 odpowiedzi
3 osoby mają ten problem
1 wyświetlenie
Ostatnia odpowiedź od tgvita

6 lat temu

Ahu_Lee

6.01.2018, 04:07

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,

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,

Wybrane rozwiązanie

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 */
}

👍 1

Answer 1 · 2018-01-06 04:07:52

Shadow110

6.01.2018, 06:39

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.

Answer 2 · 2018-01-06 04:07:52

cor-el

Moderator
Top 10 Contributor

6.01.2018, 06:48

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:

https://dxr.mozilla.org/mozilla-release/source/devtools/client/themes/common.css

Zmodyfikowany przez cor-el w dniu 6 stycznia 2018 06:51:33 -0800

Answer 3 · 2018-01-06 04:07:52

Ahu_Lee Zadający pytanie

6.01.2018, 07:00

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.

Answer 4 · 2018-01-06 04:07:52

Shadow110

6.01.2018, 07:03

Ok, guess did not see the USSER CHROME URL's for your code : https://www.accessfirefox.org/Theme-Font-Size-Changer.php

Answer 5 · 2018-01-06 04:07:52

Ahu_Lee Zadający pytanie

6.01.2018, 07:15

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:

https://dxr.mozilla.org/mozilla-release/source/devtools/client/themes/common.css

cor-el, I tried your example code. It didn't work.

Answer 6 · 2018-01-06 04:07:52

cor-el

Moderator
Top 10 Contributor

6.01.2018, 08:01

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

Answer 7 · 2018-01-06 04:07:52

Ahu_Lee Zadający pytanie

6.01.2018, 10:41

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!

Answer 8 · 2018-01-06 04:07:52

cor-el

Moderator
Top 10 Contributor

6.01.2018, 11:06

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

Zmodyfikowany przez cor-el w dniu 6 stycznia 2018 11:36:14 -0800

Answer 9 · 2018-01-06 04:07:52

jscher2000 - Support Volunteer

Top 10 Contributor

6.01.2018, 11:50

Wybrane rozwiązanie

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 */
}

Answer 10 · 2018-01-06 04:07:52

Ahu_Lee Zadający pytanie

6.01.2018, 12:01

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!

Answer 11 · 2018-01-06 04:07:52

cor-el

Moderator
Top 10 Contributor

6.01.2018, 12:06

See:

https://developer.mozilla.org/Tools/Browser_Toolbox

Answer 12 · 2018-01-06 04:07:52

Ahu_Lee Zadający pytanie

6.01.2018, 12:12

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!

Answer 13 · 2018-01-06 04:07:52

Ahu_Lee Zadający pytanie

6.01.2018, 12:14

cor-el said

See:
https://developer.mozilla.org/Tools/Browser_Toolbox

cor-el, thank you very much for all you help!

Answer 14 · 2018-01-06 04:07:52

Ahu_Lee Zadający pytanie

6.01.2018, 12:18

Ahu_Lee said

cor-el said
See:
https://developer.mozilla.org/Tools/Browser_Toolbox

cor-el, thank you very much for all you help!

your

Answer 15 · 2018-01-06 04:07:52

Ahu_Lee Zadający pytanie

6.01.2018, 13:25

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 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!

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

}

Answer 16 · 2018-01-06 04:07:52

tgvita

12.03.2018, 15:06

Ahu_Lee said

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 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!

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.

Answer 17 · 2018-01-06 04:07:52

tgvita

12.03.2018, 15:49

@-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.

Przeszukaj pomoc

The font for Develop Tools won't change?

Wybrane rozwiązanie

Wszystkie odpowiedzi (17)

Wybrane rozwiązanie

Przeglądaj według produktu

Przeglądaj według tematu

Wybierz produkt

Przeglądaj wszystkie wątki na forum według tematów

Pytanie na temat

Przeszukaj pomoc

The font for Develop Tools won't change?

Wybrane rozwiązanie

Wszystkie odpowiedzi (17)

Wybrane rozwiązanie