In dieser interaktiven Anleitung erfahren Sie, wie Sie Nachrichten in der Console der Chrome DevTools protokollieren und filtern.
Diese Anleitung sollte in der richtigen Reihenfolge durchgearbeitet werden. Es wird davon ausgegangen, dass Sie mit den Grundlagen der Webentwicklung vertraut sind, z. B. wie Sie einer Seite mit JavaScript Interaktivität hinzufügen.
Demo und DevTools einrichten
In dieser Anleitung können Sie die Demo öffnen und alle Workflows selbst ausprobieren. Wenn Sie die Schritte selbst ausführen, können Sie sich die Workflows später leichter merken.
- Öffnen Sie die Demo.
Optional: Verschieben Sie die Demo in ein separates Fenster. In diesem Beispiel ist die Anleitung links und die Demo rechts zu sehen.
Legen Sie den Fokus auf die Demo und drücken Sie dann Strg + Umschalttaste + J oder Befehlstaste + Wahltaste + J (Mac), um die DevTools zu öffnen. Die Entwicklertools werden standardmäßig rechts neben der Demo geöffnet.
-
Entwicklertools unten in der Demo angedockt:
Die Entwicklertools sind in einem separaten Fenster geöffnet:
Von JavaScript protokollierte Nachrichten ansehen
Die meisten Meldungen in der Console stammen von den Webentwicklern, die das JavaScript der Seite geschrieben haben. In diesem Abschnitt werden die verschiedenen Nachrichtentypen vorgestellt, die Sie wahrscheinlich in der Console sehen werden. Außerdem wird erläutert, wie Sie jeden Nachrichtentyp selbst über Ihr eigenes JavaScript protokollieren können.
Klicken Sie in der Demo auf die Schaltfläche Log Info (Informationen protokollieren).
Hello, Console!
wird in der Console protokolliert.Klicken Sie in der Konsole neben der
Hello, Console!
-Nachricht auf log.js:2. Der Bereich Quellen wird geöffnet und die Codezeile, die dazu geführt hat, dass die Meldung in der Console protokolliert wurde, wird hervorgehoben.Die Meldung wurde protokolliert, als das JavaScript der Seite
console.log('Hello, Console!')
aufgerufen hat.Kehren Sie mit einem der folgenden Workflows zur Console zurück:
- Klicken Sie auf den Tab Console.
- Drücken Sie Strg + [ oder Befehlstaste + [ (Mac), bis die Konsole den Fokus erhält.
- Öffnen Sie das Befehlsmenü, geben Sie
Console
ein, wählen Sie den Befehl Konsolenbereich anzeigen aus und drücken Sie die Eingabetaste.
Klicken Sie in der Demo auf die Schaltfläche Warnung protokollieren.
Abandon Hope All Ye Who Enter
wird in der Console protokolliert.So formatierte Nachrichten sind Warnungen.
Optional: Klicken Sie auf log.js:12, um den Code aufzurufen, der dazu geführt hat, dass die Meldung so formatiert wurde. Wenn Sie fertig sind, kehren Sie zur Konsole zurück. Führen Sie diesen Schritt aus, wenn Sie den Code sehen möchten, der dazu geführt hat, dass eine Nachricht auf eine bestimmte Weise protokolliert wurde.
Klicken Sie vor
Abandon Hope All Ye Who Enter
auf das Symbol Maximieren. In den Entwicklertools wird der Stack-Trace angezeigt, der zum Aufruf führt.
Der Stack-Trace gibt an, dass eine Funktion namens
logWarning
aufgerufen wurde, die wiederum eine Funktion namensquoteDante
aufgerufen hat. Mit anderen Worten: Der erste Aufruf befindet sich am Ende des Stack-Traces. Sie können jederzeit Stack-Traces erfassen, indem Sieconsole.trace()
aufrufen.Klicken Sie auf Fehler protokollieren. Die folgende Fehlermeldung wird protokolliert:
I'm sorry, Dave. I'm afraid I can't do that.
Klicken Sie auf Log-Tabelle. Eine Tabelle mit berühmten Künstlern wird in der Console protokolliert.
Die Spalte
birthday
ist nur für eine Zeile ausgefüllt. Sehen Sie sich den Code an, um herauszufinden, warum das so ist.Klicken Sie auf Log-Gruppe. Die Namen von vier berühmten, kriminelle Bösewichte bekämpfenden Schildkröten sind unter dem Label
Adolescent Irradiated Espionage Tortoises
gruppiert.Klicken Sie auf Benutzerdefiniert erfassen. In der Console wird eine Meldung mit rotem Rahmen und blauem Hintergrund protokolliert.
Wenn Sie Nachrichten aus Ihrem JavaScript in der Konsole protokollieren möchten, verwenden Sie eine der console
-Methoden. Jede Methode formatiert Nachrichten unterschiedlich.
Es gibt noch mehr Methoden als in diesem Abschnitt gezeigt. Am Ende des Tutorials erfahren Sie, wie Sie die restlichen Methoden ausprobieren.
Vom Browser protokollierte Nachrichten ansehen
Der Browser protokolliert auch Nachrichten in der Console. Das passiert in der Regel, wenn ein Problem mit der Seite vorliegt.
Klicken Sie auf 404-Fehler. Der Browser protokolliert einen
404
-Netzwerkfehler, weil das JavaScript der Seite versucht hat, eine Datei abzurufen, die nicht existiert.Klicken Sie auf Fehler verursachen. Der Browser protokolliert einen nicht aufgefangenen
TypeError
, da JavaScript versucht, einen nicht vorhandenen DOM-Knoten zu aktualisieren.Klicken Sie auf das Drop-down-Menü Protokollebenen und aktivieren Sie die Option Ausführlich, falls sie deaktiviert ist. Im nächsten Abschnitt erfahren Sie mehr über das Filtern. Andernfalls wird die nächste Nachricht, die Sie erfassen, nicht angezeigt. Hinweis:Wenn das Drop-down-Menü „Standardebenen“ deaktiviert ist, müssen Sie möglicherweise die Console-Seitenleiste schließen. Filtern Sie unten nach Nachrichtenquelle, um weitere Informationen zur Console-Seitenleiste zu erhalten.
Klicken Sie auf Verstoß verursachen. Die Seite reagiert einige Sekunden lang nicht und dann protokolliert der Browser die Meldung
[Violation] 'click' handler took 3000ms
in der Console. Die genaue Dauer kann variieren.
Nachrichten filtern
Auf einigen Seiten wird die Console mit Nachrichten überflutet. In den DevTools gibt es viele Möglichkeiten, Meldungen herauszufiltern, die für die jeweilige Aufgabe nicht relevant sind.
Nach Logebene filtern
Jede console.*
-Methode hat einen Schweregrad: Verbose
, Info
, Warning
oder Error
. console.log()
ist beispielsweise eine Meldung auf Info
-Ebene, während console.error()
eine Meldung auf Error
-Ebene ist.
So filtern Sie nach Logebene:
Klicken Sie auf das Drop-down-Menü Lobenebenen und deaktivieren Sie Fehler. Ein Level ist deaktiviert, wenn kein Häkchen mehr daneben angezeigt wird. Die Nachrichten auf
Error
-Ebene verschwinden.Klicken Sie noch einmal auf das Drop-down-Menü Lobenebenen und aktivieren Sie Fehler wieder. Die Nachrichten auf
Error
-Ebene werden wieder angezeigt.
Nach Text filtern
Wenn Sie nur Nachrichten sehen möchten, die einen bestimmten String enthalten, geben Sie diesen String in das Textfeld Filter ein.
Geben Sie
Dave
in das Textfeld Filter ein. Alle Nachrichten, die den StringDave
nicht enthalten, werden ausgeblendet. Möglicherweise wird auch das LabelAdolescent Irradiated Espionage Tortoises
angezeigt. Das ist ein Fehler.Löschen Sie
Dave
aus dem Textfeld Filter. Alle Nachrichten werden wieder angezeigt.
Nach regulären Ausdrücken filtern
Wenn Sie alle Nachrichten anzeigen lassen möchten, die ein Textmuster enthalten, anstatt einen bestimmten String, verwenden Sie einen regulären Ausdruck.
Geben Sie
/^[AH]/
in das Textfeld Filter ein. Geben Sie dieses Muster in RegExr ein, um eine Erklärung zu erhalten.Löschen Sie
/^[AH]/
aus dem Textfeld Filter. Alle Nachrichten sind wieder sichtbar.
Nach Nachrichtenquelle filtern
Wenn Sie nur die Nachrichten sehen möchten, die von einer bestimmten URL stammen, verwenden Sie die Seitenleiste.
Klicken Sie auf Seitenleiste „Konsole“ anzeigen
.
Klicken Sie neben 12 Nachrichten auf das Symbol Maximieren
. In der Seitenleiste wird eine Liste der URLs angezeigt, auf die sich die protokollierten Meldungen beziehen. Beispiel:
log.js
hat 11 Nachrichten verursacht.
Nach Nutzernachrichten filtern
Als Sie zuvor auf Informationen protokollieren geklickt haben, wurde ein Script namens console.log('Hello, Console!')
aufgerufen, um die Nachricht in der Konsole zu protokollieren. So protokollierte Nachrichten werden als Nutzernachrichten bezeichnet. Wenn Sie dagegen auf Ursache für 404 geklickt haben, hat der Browser eine Meldung auf Error
-Ebene protokolliert, dass die angeforderte Ressource nicht gefunden werden konnte. Solche Nachrichten werden als Browsernachrichten betrachtet. In der Seitenleiste können Sie Browsermeldungen herausfiltern und nur Nutzermeldungen anzeigen lassen.
Klicken Sie auf 9 Nutzernachrichten. Die Browsernachrichten sind ausgeblendet.
Klicken Sie auf 12 Nachrichten, um alle Nachrichten wieder anzuzeigen.
Console zusammen mit anderen Steuerfeldern verwenden
Was ist, wenn Sie gerade Stile bearbeiten, aber schnell etwas im Console-Protokoll nachsehen müssen? Verwenden Sie den Navigationsbereich.
- Klicken Sie auf den Tab Elemente.
Drücken Sie die Esc-Taste. Der Tab Console im Schieberegler wird geöffnet. Sie bietet alle Funktionen der Konsole, die Sie in dieser Anleitung verwendet haben.
Nächste Schritte
Herzlichen Glückwunsch, Sie haben die Anleitung abgeschlossen. Klicke auf Trophäe erhalten, um deine Trophäe zu erhalten.
- Weitere Informationen zu den Funktionen und Workflows der Console-Benutzeroberfläche finden Sie in der Console-Referenz.
- Weitere Informationen zu allen
console
-Methoden, die im Abschnitt Mit JavaScript protokollierte Nachrichten ansehen veranschaulicht wurden, sowie zu den anderenconsole
-Methoden, die in dieser Anleitung nicht behandelt wurden, finden Sie in der Console API-Referenz. - Weitere Informationen zu den Funktionen der DevTools finden Sie unter Einstieg.
- Weitere Informationen zu allen Format- und Stilmethoden für
console
finden Sie unter Mitteilungen in der Console formatieren und formatieren.