Web-Konsole

Die Web-Konsole

  1. zeichnet Informationen auf, die mit einer Webseite verkn├╝pft sind: alle Netzwerkanfragen, JavaScript, CSS und Sicherheitsfehler, sowie Fehler-, Warn- und Informationsmeldungen, die speziell von JavaScript-Code auf einer Seite verursacht werden
  2. erlaubt es Ihnen, mit einer Webseite zu interagieren, indem Sie JavaScript-Befehle auf einer Seite ausf├╝hren

Es ist ein Ersatz f├╝r die alte Fehlerkonsole, die in Firefox eingebaut war: sie hat Fehler, Warnungen und Nachrichten von allen Internetseiten, vom Browser-Code und Add-ons angezeigt. Das machte es viel schwerer zu sehen, welche Nachrichten zu welcher Internetseite geh├Âren. Die Web-Konsole ist immer mit einer spezifischen Internetseite verkn├╝pft und zeigt Informationen an, die mit dieser Seite zusammenh├Ąngen.

Der andere Teil der Fehlerkonsole ist die Browserkonsole, die Fehler, Warnungen und Meldungen vom Browser-Code und von Add-ons anzeigt.

Die Web-Konsole ├Âffnen

Um die Web-Konsole zu ├Âffnen, w├Ąhlen Sie "Web-Konsole" vom Web-Entwickler Untermen├╝ im Firefox-Men├╝ (oder Extras-Men├╝, wenn Sie die Men├╝leiste aktiviert haben oder Mac OS X benutzen) aus, oder halten Sie die Tasten Steuerung-Umschalt-K (Befehl-Wahl-K auf einem Mac) gedr├╝ckt.

https://developer.mozilla.org/de/docs/Tools/Web_Konsole$edit

Die Browser-Werkzeuge werden zusammen mit der Web-Konsole (sie wird in der DevTools Werkzeugleiste nur "Konsole" genannt) am unteren Teil des Browser-Fensters angezeigt:

Unter der Symbolleiste der Entwicklerwerkzeuge ist die Oberfl├Ąche der Web-Konsole in drei Abschnitte eingeteilt:

  • Symbolleiste: oben ist eine Symbolleiste, die Schaltfl├Ąchen mit Beschriftungen wie "Netz", "CSS" und "JS" beinhaltet. Diese Symbolleiste wird verwendet, um die Nachrichten zu filtern
  • Kommandozeile: unten ist eine Kommandozeile, in der Sie JavaScript-Befehle eingeben k├Ânnen
  • Meldungsansicht: zwischen der Symbolleiste und der Kommandozeile zeigt die Web-Konsole Meldungen im gr├Â├čten Teil des Fensters an

Meldungsansicht

Der Gro├čteil der Web-Konsole wird von der Meldungsansicht genutzt:

Die Meldungsanzeige zeigt folgende Meldungen an:

Jede Nachricht wird in einer neuen Zeile angezeigt:

Zeit Die Zeit, zu der die Meldung aufgezeichnet wurde. Ab Firefox 28 wird sie standardm├Ą├čig nicht angezeigt, jedoch k├Ânnen Sie Zeitstempel mit einer Einstellung in der Werkzeugleiste anzeigen lassen.
Kategorie

Kategorie: zeigt an, um welche Art von Meldung es sich handelt:

  • Schwarz: HTTP-Anfrage
  • Blau: CSS-Warnung/Fehler/Meldung
  • Orange: JavaScript-Warnung/Fehler
  • Gr├╝n: Sicherheitswarnung/-fehler
  • Hellgrau: Meldungen, die explizit durch von der console-API ausgef├╝hrtem JavaScript-Code stammen
  • Dunkelgrau: Eingaben/Ausgaben von der interaktiven Kommandozeile
Typ F├╝r alle Meldungen au├čer HTTP-Anfragen und interaktiven Eingaben/Ausgaben, ein Symbol das anzeigt, ob es sich um ein Fehler(X), eine Warnung(!) oder eine Meldung (i) handelt.
Meldung Die Meldung an sich.
Anzahl der Meldungen Wenn eine Zeile, die eine Warnung oder ein Fehler erzeugt, mehrmals ausgef├╝hrt wird, wird sie nur einmal aufgezeichnet und der Z├Ąhler zeigt die Anzahl an Meldungen an.
Dateiname und Zeilennummer JavaScript-, CSS- und console API-Meldungen k├Ânnen zu einer spezifischen Codezeile zur├╝ckverfolgt werden. Die Konsole gibt den Dateinamen und Zeilennummer des Codeabschnitts an, das die Meldung erzeugt hat.

HTTP-Anfragen

HTTP-Anfragen werden in einer Zeile dargestellt, die folgenderma├čen aussieht:

Zeit Die Zeit, zu der die Meldung aufgezeichnet wurde.
Kategorie Zeigt an, dass die Meldung eine HTTP-Anfrage ist.
Methode Die Methode der HTTP-Anfrage
URI Die Ziel-URI
Zusammenfassung Die HTTP-Version, Status-Code und Laufzeit.

Wenn Sie auf eine Meldung klicken, sehen Sie so ein Fenster mit mehr Informationen ├╝ber die Anfrage und Antwort:

Durch Herunterscrollen sehen Sie die Antwort-Zeilen. Standardm├Ą├čig werden Anfrage- und Antwort-Inhalte nicht aufgezeichnet: um dies zu tun, w├Ąhlen Sie im Auswahlmen├╝ der Web-Konsole "Anfrage- und Antwort-Inhalte aufzeichnen" aus, laden Sie die Seite neu und ├Âffnen Sie das Fenster "Netzwerk-Request untersuchen".

Nur das erste Megabyte an Daten wird f├╝r alle Anfrage- und Antwort-Inhalte aufgezeichnet, weshalb sehr gro├če Anfragen und Antworten gek├╝rzt werden.

Ab Firefox 30 werden Netzwerk-Meldungen standardm├Ą├čig nicht angezeigt.

JavaScript-Fehler und Warnungen

JavaScript-Meldungen sehen folgenderma├čen aus:

Ab Firefox 30 werden JavaScript-Warnungen standardm├Ą├čig nicht angezeigt.

CSS-Fehler, -Warnungen und DOM-Neuberechnungen

CSS-Meldungen sehen folgenderma├čen aus:

Standardm├Ą├čig werden CSS-Warnungen und Meldungen nicht angezeigt.

DOM-Neuberechnungen

Die Web-Konsole zeichnet auch DOM-Neuberechnungen unter der CSS-Kategorie auf. Eine Neuberechnung bezeichnet der Vorgang, bei dem der Browser das Layout von der ganzen Seite oder von Teilen berechnet. Neuberechnungen treten auf, wenn ├änderungen auf einer Seite aufgetreten sind, von denen der Browser denkt, dass das Layout der Seite beeinflusst wurde. Viele Ereignisse k├Ânnen Neuberechnungen ausl├Âsen, inklusive: Skalieren des Browser-Fensters, Aktivieren von Pseudoklassen wie :hover oder Manipulieren des DOM in JavaScript.

Da Neuberechnungen manchmal Rechenaufwendig sind und die Benutzeroberfl├Ąche direkt beeinflussen, k├Ânnen sie einen gro├čen Einfluss auf die responsiveness einer Webseite oder Web-App haben. Indem Neuberechnungen in der Web-Konsole aufgezeichnet werden, k├Ânnen Sie sehen, wann Neuberechnungen erzwungen werden, wie lange es dauert, sie auszuf├╝hren, ob die Neuberechnungen synchrone Neuberechnungen sind und von welchem JavaScript-Code sie erzwungen werden.

Neuberechnungen werden als "Logbuch"-Meldungen angezeigt, im Gegensatz zu CSS-Fehlern oder Warnungen. Standardm├Ą├čig sind sie deaktiviert. Sie k├Ânnen sie aktivieren, indem Sie auf die "CSS"-Schaltfl├Ąche in der Symbolleiste klicken und "Logbuch" ausw├Ąhlen.

Jede Meldung wird mit "reflow" markiert und zeigt die Zeit an, die f├╝r die Neuberechnung gebraucht wurde:

Wenn die Neuberechnung synchron ist und von JavaScript-Code erzwungen wurde, wird auch ein Link zur Codezeile angezeigt, die die Neuberechnung erzwungen hat.

Klicken Sie auf den Link um die Datei im Debugger zu ├Âffnen.

Synchrone and asynchrone Neuberechnungen

Wenn eine ├änderung das aktuelle Layout ung├╝ltig macht - zum Beispiel, wenn der Browser-Fenster skaliert wird oder JavaScript-Code das CSS eines Elements ├Ąndert - wird das Layout nicht augenblicklich neu berechnet. Stattdessen geschieht die Neuberechnung asynchron, sobald der Browser entscheidet, dass es notwendig ist (├╝blicherweise, wenn das Aussehen des Browser-Fensters neu gezeichnet wird). So kann der Browser mehrere ung├╝ltig machende ├änderungen sammeln und alle auf einmal neuberechnen.

Wenn ein JavaScript-Code jedoch CSS ausliest, das ge├Ąndert wurde, muss der Browser eine synchrone Neuberechnung durchf├╝hren um das berechnete Aussehen zur├╝ckzugeben. Folgender Code-Beispiel l├Âst beim Aufruf von window.getComputedStyle(thing).height sofort eine synchrone Neuberechnung aus:

var thing = document.getElementById("the-thing");
thing.style.display = "inline-block";
var thingHeight = window.getComputedStyle(thing).height;

Deshalb ist es eine gute Idee, Verschachtelungen von Schreib- und Leseanfragen zu vermeiden, da bei jedem Lesen eines durch eine vorangegangene Schreibanfrage ung├╝ltig gemachten Stils eine synchrone Neuberechnung erzwungen wird.

Sicherheitswarnungen und -fehler

Sicherheitswarnungen und -fehler sehen folgenderma├čen aus:

Die Sicherheitsmeldungen in der Web-Konsole helfen Ihnen dabei, (potentielle) Sicherheitsl├╝cken in Ihren Seiten zu finden. Au├čerdem helfen diese Meldungen Entwickler dabei, zu lernen, da sie mit einem Link "Weitere Informationen" enden, womit Sie zu einer Seite mit Hintergrundinformationen und Hilfestellungen zur Probleml├Âsung gef├╝hrt werden.

Die folgende Liste f├╝hrt alle Sicherheitsmeldungen auf:

Meldung Details
Laden von gemischten aktiven Inhalten wurde blockiert. Die Seite besitzt gemischte aktive Inhalte: die Hauptseite wurde ├╝ber HTTPS bereitgestellt, hat den Browser aber gebeten, "aktive Inhalte" wie Skripte ├╝ber HTTP zu laden. Der Browser hat diesen aktiven Inhalt blockiert. Siehe Gemischte Inhalte f├╝r mehr Details.
Laden von gemischten Ansichtsinhalten wurde blockiert. Die Seite besitzt gemischte Ansichtsinhalte: die Hauptseite wurde ├╝ber HTTPS bereitgestellt, hat den Browser aber gebeten, "Ansichtsinhalte" wie Bilder ├╝ber HTTP zu laden. Der Browser hat diesen aktiven Inhalt blockiert. Siehe Gemischte Inhalte f├╝r mehr Details.
Lade gemischte (unsichere) aktive Inhalte auf einer sicheren Seite Die Seite besitzt gemischte aktive Inhalte: die Hauptseite wurde ├╝ber HTTPS bereitgestellt, hat den Browser aber gebeten, "aktive Inhalte" wie Skripte ├╝ber HTTP zu laden. Der Browser hat diesen aktiven Inhalt geladen. Siehe Gemischte Inhalte f├╝r mehr Details.
Lade gemischte (unsichere) anzeige-Inhalte auf einer sicheren Seite Die Seite besitzt gemischte Ansichtsinhalte: die Hauptseite wurde ├╝ber HTTPS bereitgestellt, hat den Browser aber gebeten, "Ansichtsinhalte" wie Bilder ├╝ber HTTP zu laden. Der Browser hat diesen aktiven Inhalt geladen. Siehe Gemischte Inhalte f├╝r mehr Details.
Diese Website hat Kopfzeilen sowohl mit X-Content-Security-Policy/Report-Only als auch Content-Security-Policy/Report-Only angegeben. Jene mit X-Content-Security-Policy/Report-Only werden ignoriert. Siehe Content Security Policy f├╝r mehr Details.
Die Kopfzeilen X-Content-Security-Policy und X-Content-Security-Report-Only werden in Zukunft nicht mehr unterst├╝tzt. Verwenden Sie bitte stattdessen die Kopfzeilen Content-Security-Policy und Content-Security-Report-Only mit CSP-Spezifikations-kompatibler Syntax. Siehe Content Security Policy f├╝r mehr Details.
Passwort-Felder sind auf einer unsicheren (http://) Seite vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden k├Ânnen. Seiten mit Anmeldeformularen m├╝ssen ├╝ber HTTPS, nicht HTTP, bereitgestellt werden.
Passwort-Felder sind in einem Formular mit einer unsicheren (http://) Formular-aktion vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden k├Ânnen. Formulare mit Passwortfeldern m├╝ssen diese ├╝ber HTTPS, nicht HTTP, absenden.
Passwort-Felder sind in einem unsicheren (http://) Iframe vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden k├Ânnen. iframes, die Anmeldeformulare beinhalten, m├╝ssen ├╝ber HTTPS, nicht HTTP, bereitgestellt werden.
Diese Website hat eine ung├╝ltige Strict-Transport-Security-Kopfzeile angegeben. Siehe HTTP Strict Transport Security f├╝r mehr Details.

Bug 863874 ist ein Problembericht um f├╝r Sicherheit relevante Meldungen in der Web-Konsole zu sammeln. Wenn Sie mehr Ideen f├╝r n├╝tzliche Funktionen wie diese haben, oder einfach nur mitmachen wollen, schauen Sie sich den Fehlerbericht und die davon abh├Ąngigen an.

console API-Meldungen


Dieser Abschnitt beschreibt die Ausgaben der Web-Konsole f├╝r die console API-Aufrufe, die Ausgaben erzeugen. F├╝r mehr oberfl├Ąchliche Informationen ├╝ber die console API, siehe folgende Dokumentationsseite.

Fehlermeldungen

API Meldungsinhalt
error()

Argument f├╝r error().

console.error("an error");
exception() Alias f├╝r error().
assert()

Neu in Firefox 29.

Wenn die Aussage erfolgreich ist, nichts. Wenn die Aussage fehlschl├Ągt, Argument:

console.assert(false, "My assertion always fails");

Warnmeldungen

API Meldungsinhalt
warn()

Argument f├╝r warn().

console.warn("a warning");

Informationsmeldungen

API Meldungsinhalt
info()

Argument f├╝r info().

console.info("some info");

Meldungen

API Meldungsinhalt
count()

Diese Meldung ist neu in Firefox 30.

Diese Beschreibung gibt an, ob und wie oft  count() aufgerufen wurde mit der gegebenen Beschriftung:

console.count(user.value);

log()

Argument f├╝r log().

console.log("logged");
trace()

Stack-Trace:

console.trace();
dir()

Auflisten der Objekteigenschaften:

var user = document.getElementById('user');
console.dir(user);
time()

Benachrichtigung, dass der spezifische Timer gestartet wurde.

console.time("t");
timeEnd()

Dauer f├╝r den spezifischen Timer.

console.timeEnd("t");

Gruppieren von Meldungen

Sie k├Ânnen console.group() benutzen um einger├╝ckte Gruppen in der Konsolenausgabe zu erstellen. Siehe Gruppen in der Konsole benutzen f├╝r mehr Informationen.

Eingabe-/Ausgabemeldungen

Befehle, die dem Browser ├╝ber die Kommandozeile der Web-Konsole geschickt wurden und die dazugeh├Ârigen Antworten werden mit Zeilen wie diese aufgezeichnet:

Die dunkelgraue Leiste gibt an, dass es sich um Eingabe-/Ausgabemeldungen handelt, w├Ąhrend die Richtung, in die die Pfeile zeigen, zwischen Eingabe und Ausgabe unterscheidet.

Filtern und suchen

Sie k├Ânnen die Symbolleiste oben benutzen, um die angezeigten Ergebnisse zu verfeinern.

Sie k├Ânnen nur bestimmte Meldungen oder Meldungen, die einen bestimmten String enthalten, anzeigen lassen.

Zuletzt k├Ânnen Sie diese Symbolleiste benutzen um die Aufzeichnungen zu l├Âschen.

Der Kommandozeileninterpreter

Sie k├Ânnen JavaScript-Ausdr├╝cke mit der von der Web-Konsole bereitgestellten Kommandozeile in Echtzeit interpretieren.

Ausdr├╝cke eingeben

Um Ausdr├╝cke einzugeben, tippen Sie sie in die Kommandozeile ein und dr├╝cken Sie die Eingabetaste.

Die Eingabe, die Sie eintippen, wird in der Meldungsansicht zusammen mit dem Ergebnis angezeigt:

Auf Variablen zugreifen

Sie k├Ânnen auf Variablen, die auf der Seite definiert werden, zugreifen, egal ob eingebaute Variablen wie window oder Variablen, die von JavaScript-Code erstellt wurden, wie jQuery:

Automatische Vervollst├Ąndigung

Die Kommandozeile hat eine automatische Vervollst├Ąndigung: geben Sie die ersten Buchstaben ein und ein Dialogfenster mit m├Âglichen Vervollst├Ąndigungen erscheint:

Dr├╝cken Sie die Eingabe- oder Tabulatortaste um den Vorschlag zu ├╝bernehmen, benutzen Sie die Pfeiltasten um zu einem anderen Vorschlag zu gelangen, oder tippen Sie einfach weiter, wenn Ihnen keines der Vorschl├Ąge gef├Ąllt.

Die Konsole schl├Ągt Vervollst├Ąndigungen im Umfang des momentan ausgef├╝hrten Stack-Frames vor. Das hei├čt, wenn Sie ein Haltepunkt erreichen, bekommen Sie Vervollst├Ąndigungen f├╝r f├╝r die Funktion lokale Objekte.

Ab Firefox 30 k├Ânnen auch Array-Elemente automatisch verv├Âllst├Ąndigt werden:

Elemente untersuchen

Falls das Ergebnis ein Objekt ist, wird es kursiv dargestellt. Beim Anklicken erscheint eine Ansicht mit weiteren Informationen zum Objekt:

Um diese Ansicht zu schlie├čen, dr├╝cken Sie die Escape-Taste.

Vor Firefox 30 erscheinen untersuchbare Objekte in eckigen Klammern und sind unterstrichen, wie [Objekt Funktion].

Variablen festlegen

Sie k├Ânnen Ihre eigenen Variablen festlegen und auf diese zugreifen:

Knoten hervorheben und untersuchen

Diese Funktion ist neu in Firefox 30.

Wenn Sie mit dem Mauszeiger ├╝ber ein DOM-Element in der Konsolenausgabe fahren, wird es auf der Seite hervorgehoben:

In dem oberen Bildschirmfoto k├Ânnen Sie auch ein "Ziel"-Symbol in blau neben dem Knoten in der Konsolenausgabe sehen: klicken Sie darauf um den Knoten zu untersuchen.

Befehlsverlauf

Die Kommandozeile merkt sich Ihre eingegebenen Befehle: um durch den Verlauf zu navigieren, benutzen Sie die Pfeiltasten.

Mit iframes arbeiten

Diese Funktion ist neu in Firefox 30.

Wenn eine Seite ├╝ber eingebettete iframes verf├╝gt, k├Ânnen Sie den cd()-Befehl benutzen um den Umfang der Konsole auf einen spezifischen iframe zu setzen und Funktionen, die im iframe-Dokument definiert werden, auszuf├╝hren. Es gibt drei Wege um ein iframe mit cd() auszuw├Ąhlen:

Sie k├Ânnen das iframe DOM-Element ├╝bergeben:

var frame = document.getElementById("frame1");
cd(frame);

Sie k├Ânnen einen CSS-Selektor ├╝bergeben, der zum iframe geh├Ârt:

cd("#frame1");

Sie k├Ânnen den globalen Fensterobjekt des iframes ├╝bergeben:

var frame = document.getElementById("frame1");
cd(frame.contentWindow);

Um zum ├╝bergeordneten Fenster zu wechseln, rufen Sie cd() ohne Argumente auf:

cd();

Nehmen wir beispielsweise an, wir haben ein Dokument, das ein iframe einbettet:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
  </body>
</html>

Der iframe definiert eine neue Funktion:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script>
      function whoAreYou() {
        return "I'm frame1";
      }
   </script>
  </head>
  <body>
  </body>
</html>

So k├Ânnen Sie den Umfang zum iframe wechseln:

cd("#frame1");

Nun werden Sie sehen, dass das Dokument des globalen Fensters der iframe ist:

Sie k├Ânnen auch die Funktion, die in dem iframe definiert wird, aufrufen:

Hilfsbefehle

Die geteilte Konsole

Die geteilte Konsole ist neu in Firefox 28.

Ab Firefox 28 k├Ânnen Sie die Konsole zusammen mit anderen Werkzeugen benutzen. W├Ąhrend Sie in einem anderen Werkzeug in der Werkzeugkiste sind, dr├╝cken Sie die Escape-Taste oder die Schaltfl├Ąche "Erzwingen der Anzeige der Konsole umschalten, gegebenenfalls zus├Ątzlich zum aktuellen Entwicklerwerkzeug" in der Werkzeugleiste. Die Werkzeugkiste wird nun geteilt dargestellt, mit dem urspr├╝nglichen Werkzeug ├╝ber der Web-Konsole.

Wie ├╝blich funktioniert $0 als Abk├╝rzung f├╝r das in der Ansicht "Element unterschen" ausgew├Ąhlte Element:

Wenn Sie die geteilte Konsole zusammen mit dem Debugger benutzen, wird der Umfang der Konsole auf den momentan ausgef├╝hrten Stack-Frame beschr├Ąnkt. Wenn Sie einen Haltepunkt einer Funktion erreichen, wird der Umfang auf diese Funktion beschr├Ąnkt. Sie k├Ânnen in der Funktion definierte Objekte automatisch vervollst├Ąndigen und spontan ├Ąndern:

Tastenk├╝rzel

Command Windows macOS Linux
Open the Web Console Ctrl + Shift + K Cmd + Opt + K Ctrl + Shift + K
Search in the message display pane Ctrl + F Cmd + F Ctrl + F
Open the object inspector pane Ctrl + Click Ctrl + Click Ctrl + Click
Clear the object inspector pane Esc Esc Esc
Focus on the command line Ctrl + Shift + K Cmd + Opt + K Ctrl + Shift + K
Clear output

Ctrl + Shift + L

Ctrl + L

From Firefox 67:

Cmd + K

Ctrl + Shift + L

Command line interpreter

These shortcuts apply when you're in the command line interpreter.

Command Windows macOS Linux
Scroll to start of console output (only if the command line is empty) Home Home Home
Scroll to end of console output (only if the command line is empty) End End End
Page up through console output Page up Page up Page up
Page down through console output Page down Page down Page down
Go backward through command history Up arrow Up arrow Up arrow
Go forward through command history Down arrow Down arrow Down arrow
Initiate reverse search through command history/step backwards through matching commands F9 Ctrl + R F9
Step forward through matching command history (after initiating reverse search) Shift + F9 Ctrl + S Shift + F9
Move to the beginning of the line Home Ctrl + A Ctrl + A
Move to the end of the line End Ctrl + E Ctrl + E
Execute the current expression Enter Return Enter
Add a new line, for entering multiline expressions Shift + Enter Shift + Return Shift + Enter

Autocomplete popup

These shortcuts apply while the autocomplete popup is open:

Command Windows macOS Linux
Choose the current autocomplete suggestion Tab Tab Tab
Cancel the autocomplete popup Esc Esc Esc
Move to the previous autocomplete suggestion Up arrow Up arrow Up arrow
Move to the next autocomplete suggestion Down arrow Down arrow Down arrow
Page up through autocomplete suggestions Page up Page up Page up
Page down through autocomplete suggestions Page down Page down Page down
Scroll to start of autocomplete suggestions Home Home Home
Scroll to end of autocomplete suggestions End End End

Allgemeine Tastenk├╝rzel

These shortcuts work in all tools that are hosted in the toolbox. Command Windows macOS Linux Increase font size Ctrl + + Cmd + + Ctrl + + Decrease font size Ctrl + - Cmd + - Ctrl + - Reset font size Ctrl + 0 Cmd + 0 Ctrl + 0