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

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.

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:

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.

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.

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

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

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

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\

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.

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

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.

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

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