Wie kann man Code-Schriftarten in Firefox-Entwicklertools erhöhen? Ich weiß, dass es eine Zoomfunktion gibt, aber ich möchte die Schriftgröße nur für den Code einstellen.
74
Wie kann man Code-Schriftarten in Firefox-Entwicklertools erhöhen? Ich weiß, dass es eine Zoomfunktion gibt, aber ich möchte die Schriftgröße nur für den Code einstellen.
userChrome.css
Optimierungen zu versuchen. Keine dieser Aufgaben funktioniert.Antworten:
Sie müssen sich ändern
userChrome.css
unter~/.mozilla/firefox/[profile-name]/chrome
mit diesem:/* Styles for Web developer tools */ @namespace url(http://www.w3.org/1999/xhtml); .CodeMirror { font-family: "Ubuntu Mono", monospace !important; font-size: 15pt !important; }
Das Ergebnis sieht folgendermaßen aus:
Dies ändert nur den Debugger und den Stileditor. Es gibt einen anderen Selektor für den HTML-Inspektor. Ich bin mir noch nicht sicher, was das ist.
quelle
Um es klar zu sagen, ich meine den +Schlüssel. Sie müssen das nicht halten, Shiftwährend Sie es tun.
quelle
Öffnen Sie Firefox und geben Sie ein
about:support
. In Anwendung Basics Abschnitt wählte Profilordner - Ordner öffnen . Es wird Ihren Dateimanager auslösen. Wenn es keinenchrome
Ordner gibt, erstellen Sie ihn. Gehen Sie danach in diesenchrome
Ordner und erstellen Sie eineuserChrome.css
Datei, öffnen Sie sie in einem Texteditor und fügen.devtools-monospace {font-size: 12px!important;}
Sie hinzu: Speichern. Stellen Sie sicher, dass Sie Firefox neu starten.UPDATE : Eines hat mich gestört - beim Eingeben in die devtools-Konsole ist der Text tatsächlich etwas kleiner als bei der Ausgabe (nach Drücken der Eingabetaste). Um es gleich zu machen, müssen wir auch die Schriftgröße für die entsprechende CSS-Klasse ändern . Ich kenne den Klassennamen noch nicht, also habe ich ihn einfach eingestellt
* { font-size: 12px !important; }
global und es funktioniert.quelle
Vielleicht ist es einfacher, einen größeren Wert zu öffnen
about:config
und einzustellendevtools.toolbox.zoomValue
.quelle
Wie bereits erwähnt, lautet die kurze Antwort also cmd+ +.
Das +Schild ist jedoch möglicherweise nicht direkt auf Ihrer Tastatur zugänglich (kein Ziffernblock, Laptop, seltsames Layout).
Sie müssen dann
maj
zuerst drücken, um auf das +Schild zuzugreifen , wie zum Beispiel auf dem amerikanischen Tastaturlayout: maj+ =.Selbst wenn Sie sich richtig auf das Entwicklungswerkzeug konzentrieren, erhöht cmd+ maj+ leider =die Schriftart des Webansichtsfensters, während cmd+ + -die Schriftart im Entwicklungswerkzeugfenster verringert.
Am Ende erhalten Sie ein Web-Tool-Fenster mit einer Schriftgröße, die so klein ist, dass sie nicht lesbar ist und nicht vergrößert werden kann.
Dann @ Thal Antwort praktisch ist, konzentrierte sich einmal auf die Entwickler - Toolbereich cmd+ 0setzt die Schriftgröße des Entwickler - Tool zum Original.
Wenn Sie die Frage beantworten möchten, nach der @Timothy_Truckle fragt, sind hier einige davon (konzentrieren Sie sich natürlich immer noch auf den Entwickler-Tool-Bereich):
Das ist für euch, die euch fragen, warum es einigen schwer fällt, einfach cmd+ zu drücken, +oder warum es anderen schwer fällt, sich auf den Entwickler-Werkzeugbereich zu konzentrieren (weil sie sich tatsächlich auf den Entwickler-Werkzeugbereich konzentrieren, aber das Ergebnis ist, als ob sie sich auf das Web konzentrieren würden Ansichtsfenster).
quelle
Sie können einen Stil für die
devtools-monospace
Klassenauswahl angeben . BearbeitenuserChrome.css
Sie dazu daschrome
Verzeichnis Ihres Mozilla-Profils und geben Sie die gewünschten CSS-Eigenschaften an. Zum Beispiel:.devtools-monospace { font-family: "Source Code Pro",monospace !important; font-size: 16px !important; }
Die
userChrome.css
muss sich imchrome
Ordner Ihres Firefox-Profils befinden. Wenn der Ordner nicht vorhanden ist, erstellen Sie ihn. IhruserChrome.css
Wille dann überschreibt die CSS von Firefox Entwickler - Tool , nachdem Sie den Browser neu starten.Um Ihr Profil unter Windows zu finden, geben Sie Folgendes ein: Strg + R und geben Sie Folgendes ein:
quelle
Einige Elemente von Firefox können in der Datei userChrome.css im Chrome- Ordner Ihres Firefox-Profils gestaltet werden .
Ändern / erstellen Sie ab 2018 ~ / .mozilla / Firefox / [Profilname] /chrome/userChrome.css mit etwas ähnlichem wie:
Starten Sie dann Firefox neu.
Die Lösung in den Mozilla-Foren hat fast das Richtige: https://support.mozilla.org/en-US/questions/1198481
Die Verwendung von Ctrl+ =oder Cmd+ =war für mich nicht ideal, da dadurch die Schriftarten für alle Elemente des Fensters, einschließlich der Registerkartennamen, erhöht wurden.
Die Verwendung
.devtools-monospace { font-size: 13px !important;}
war fast in Ordnung, hatte jedoch keine Auswirkungen auf die Registerkarten Debugger und Netzwerk.Die Verwendung der Lösung von @ bohag_bihu hatte Nebenwirkungen für die Adressleiste und einige andere Texteingaben.
quelle
Ich hatte versehentlich die Größe meines Firefox-Entwicklerfensters auf das Minimum verkleinert (konnte es nicht einmal mehr lesen). "CMD +" (Mac) funktionierte nicht für mich, auch nicht für die Hauptwebseite, selbst wenn die Konsole fokussiert war drücke einfach: "CMD 0" und es wurde wieder normal, wenn es eine gute Alternative zu anderen sein kann;)
quelle
Wie John sagte, können Sie die Schriftgröße in den devtools erhöhen, indem Sie Strg / cmd + verwenden, genau wie auf einer Webseite. Tatsächlich ist das devtools eine Webseite. Sie müssen nur sicherstellen, dass der devtools-Frame zuerst fokussiert ist.
Ich fürchte, es gibt momentan keine Möglichkeit, nur die Schriftgröße für den Code zu erhöhen.
quelle
Für bestimmte Mozilla- Versionen (ich habe auf Mozilla SeaMonkey getestet , das Mozilla Firefox 52 ESR entspricht) ist ein explizit festgelegtes Root-Element erforderlich.
Das wird funktionieren:
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml");
während dies nicht wird :
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml");
Sobald
@namespace
Regeln festgelegt wurden,Sie müssen nur Selektoren und Stile hinzufügen:
.devtools-monospace, .CodeMirror, .CodeMirror pre { font-family: "Courier New", monospace !important; font-size: 10pt !important; }
quelle
Dieser funktioniert unter FF 68 Linux mit
userChrome.css
. Ich denke, Inspector-Tools verwenden jetzt CSS-Variablen und der Inspector-Baum selbst wird in einen Iframe geladen, sodass keine der Optimierungen tatsächlich funktioniert hat. mit.CodeMirror
Klassen.Sie können alle Variablen in dieser Datei finden (einfach kopieren, unter URL in FF einfügen, um die Quelle anzuzeigen)
Für den
userChrome.css
Teil hier ist, was es für mich gelöst hat.quelle