Erhöhen Sie die Code-Schriftgröße im Firefox-Entwicklertool

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.

LDMdev
quelle
1
Ein Hinweis für diejenigen, die nach einer Antwort suchen: Verschwenden Sie zum aktuellen Zeitpunkt keine Zeit damit, die Antworten mit userChrome.cssOptimierungen zu versuchen. Keine dieser Aufgaben funktioniert.
Mikhail V

Antworten:

20

Sie müssen sich ändern userChrome.cssunter ~/.mozilla/firefox/[profile-name]/chromemit 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:

Feuerfuchs

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.

Nan Zou
quelle
Es klappt! :] chome / userChrome.css fehlte in meinem Profil, aber nachdem ich es erstellt habe, boom! Es klappt! :]
LDMdev
Dadurch wird auch die Markup-Ansicht formatiert: / * Stile für Webentwickler-Tools * / @namespace url ( w3.org/1999/xhtml ); .CodeMirror, body.theme-body.devtools-monospace {Schriftfamilie: "Ubuntu Mono", monospace! Wichtig; Schriftgröße: 15pt! wichtig; }
Mike Ratcliffe
Sie können die Stile der Entwicklertools auch mit dem Addon "Stilvoll" bearbeiten. UserChrome muss nicht bearbeitet werden, und die Ergebnisse sind sofort verfügbar. :) Die letzten Kommentare auf dieser Seite sehen: forum.userstyles.org/discussion/40767/...
ingredient_15939
Beachten Sie, dass neuere Versionen von Firefox userChrome nicht mehr standardmäßig unterstützen (es ist veraltet). Daher ist die derzeit gültige Antwort die Verwendung der Tastenkombination Strg + Plus (+).
KERR
205
  1. Öffnen Sie die Firefox Developer Tools
  2. Drücken Sie Ctrl+ +unter Unix / Win oder Cmd+ +unter Mac.

Um es klar zu sagen, ich meine den +Schlüssel. Sie müssen das nicht halten, Shiftwährend Sie es tun.

John Karahalis
quelle
10
Großartig, es funktioniert, aber ist es nicht seltsam, dass Control + Mausrad dies nicht tut?
Exebook
14
Dies sollte die akzeptierte Antwort sein!
Kombinieren Sie den
5
@Combine, in meiner Frage sage ich "Ich möchte die Schriftgröße nur für den Code festlegen", daher ist dies nicht die richtige Antwort, da STRG + die Größe des gesamten Fensters erhöht, auch die Steuerelemente, nicht nur den Code. .
LDMdev
2
Ich verstehe ... Trotzdem ist dies eine einfachere und sexy Antwort.
Kombinieren Sie
3
Dies sollte als Antwort ausgewählt werden.
Vitaliy Terziev
16

Ö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 keinen chromeOrdner gibt, erstellen Sie ihn. Gehen Sie danach in diesen chromeOrdner und erstellen Sie eine userChrome.cssDatei, ö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.

Kanake
quelle
Da Snap populär wurde, versuchen Sie es mit Firefox. Der Drowback ist: Es sieht so aus, als ob die Antwort, die ich gegeben habe, in diesem Fall nicht funktioniert (ich habe einen Chrome-Ordner unter ~ / snap / Firefox / common / .mozilla / Firefox / myProfile.default / erstellt).
daGo
12

Vielleicht ist es einfacher, einen größeren Wert zu öffnen about:configund einzustellen devtools.toolbox.zoomValue.

vaklinzi
quelle
1
Hat perfekt funktioniert!
Alexpotato
Dies sollte jetzt die beste Lösung sein! Weil einfaches Zoomen mit Strg und [+] oder Strg und [-] die Schriftgröße von devtools nur für die aktuelle Sitzung beeinflusst! Eine dauerhafte Lösung ist wie hier beschrieben. Sie müssen sich nicht mit zusätzlichen CSS-Dateien herumschlagen, wie die meisten Antworten vermuten lassen! Deshalb haben wir ungefähr: config in FF.
Amarok24
das ist die lösung !! Danke Kumpel!! zB 1,5 ist ein schöner Wert!
Hartmut P.
9

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 majzuerst 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):

  • Wechseln Sie zum US-Tastaturlayout und drücken Sie cmd+=
  • Suchen Sie ein Tastaturlayout mit dem +direkt zugänglichen, wechseln Sie zu diesem und drücken Sie cmd++

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

loic.jaouen
quelle
5

Sie können einen Stil für die devtools-monospaceKlassenauswahl angeben . Bearbeiten userChrome.cssSie dazu das chromeVerzeichnis 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.cssmuss sich im chromeOrdner Ihres Firefox-Profils befinden. Wenn der Ordner nicht vorhanden ist, erstellen Sie ihn. Ihr userChrome.cssWille 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:

%APPDATA%\Mozilla\Firefox\Profiles\
Joschi
quelle
1
Willkommen bei Stack Overflow! Obwohl dieser Code zur Lösung des Problems beitragen kann, erklärt er nicht, warum und / oder wie er die Frage beantwortet. Die Bereitstellung dieses zusätzlichen Kontextes würde den langfristigen Bildungswert erheblich verbessern. Bitte bearbeiten Sie Ihre Antwort, um eine Erklärung hinzuzufügen, einschließlich der Einschränkungen und Annahmen.
Toby Speight
1
@TobySpeight wovon redest du? Joschis Antwort ist die einzige, die in der aktuellen Version von Firefox funktioniert. +1
Tobia
1
@Tobia, die Antwort wurde bearbeitet, seit ich diesen Kommentar abgegeben habe. Es ist jetzt merklich besser (obwohl es eher zum Rezept als zur Erklärung tendiert).
Toby Speight
5

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:

@-moz-document url-prefix("chrome://devtools/content/") {
    * { font-size: 13px !important; }
}

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.

Ovichiro
quelle
1

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

Thal
quelle
Willkommen bei Stack Overflow! Dies beantwortet die Frage nicht wirklich. Nehmen Sie sich eine Minute Zeit, um zu lesen, wie man antwortet
Timothy Truckle
Nun, das war die Antwort, nach der ich gesucht habe :) Aber Sie haben Recht, diese Antwort ist nicht die Antwort auf "Wie kann man die Schriftgröße erhöhen?" aber "wie bekomme ich die Schriftgröße auf die Originalgröße?".
Loic.jaouen
0

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.

pbrosset
quelle
Und gibt es eine einfache Möglichkeit, um sicherzustellen, dass devtools den Fokus hat? Es scheint sehr schwer, es auszuwählen!
Matthew Wilcoxson
Klicken Sie auf die Registerkarte Konsole und dann auf eine Konsolennachricht, damit sie hervorgehoben wird. Dann Strg +
Michael Cole
0

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 @namespaceRegeln 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;
}
Bass
quelle
0

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

Sie können alle Variablen in dieser Datei finden (einfach kopieren, unter URL in FF einfügen, um die Quelle anzuzeigen)

resource://devtools/client/themes/variables.css

Für den userChrome.cssTeil hier ist, was es für mich gelöst hat.

/* @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); */

:root {
  /* Text sizes */
  --theme-code-font-size: 13px !important;
}
anithegregorian
quelle