In dieser interaktiven Anleitung erfahren Sie, wie Sie Nachrichten in der Chrome-Entwicklertools protokollieren und filtern.
Diese Anleitung sollte der Reihe nach durchgearbeitet werden. Dabei wird vorausgesetzt, dass Sie die Grundlagen der Webentwicklung verstehen, z. B. wie Sie JavaScript verwenden können, um einer Seite Interaktivität hinzuzufügen.
Demo und Entwicklertools einrichten
In dieser Anleitung können Sie die Demo öffnen und alle Workflows selbst ausprobieren. Wenn Sie die Schritte persönlich mitverfolgen, erinnern Sie sich später eher an die Workflows.
- Öffnen Sie die Demo.
Optional: Verschieben Sie die Demo in ein separates Fenster. In diesem Beispiel befindet sich die Anleitung links und die Demo rechts.
Fokussieren Sie den Fokus auf die Demo und drücken Sie dann Strg + Umschalttaste + J oder Befehlstaste + Wahltaste + J (Mac), um die Entwicklertools zu öffnen. Die Entwicklertools werden standardmäßig rechts in der Demo geöffnet.
Optional: Dock DevTools am unteren Rand des Fensters an oder lösen Sie es in einem separaten Fenster.
Die Entwicklertools sind unten an der Demo angedockt:
Vom Dock gelöste Entwicklertools in separatem Fenster:
Von JavaScript protokollierte Nachrichten ansehen
Die meisten Nachrichten, die Sie in der Console sehen, stammen von den Webentwicklern, die den JavaScript-Code der Seite geschrieben haben. In diesem Abschnitt werden die verschiedenen Nachrichtentypen vorgestellt, die wahrscheinlich in der Console angezeigt werden. Außerdem wird erklärt, wie Sie die einzelnen Nachrichtentypen mit Ihrem eigenen JavaScript-Code selbst protokollieren können.
Klicken Sie in der Demo auf die Schaltfläche Log Info (Protokollinformationen).
Hello, Console!
wird in der Console protokolliert.Klicken Sie in der Console neben der Meldung
Hello, Console!
auf log.js:2. Im Bereich Quellen wird die Codezeile hervorgehoben, durch die die Meldung in der Console protokolliert wurde.Die Meldung wurde protokolliert, als der JavaScript-Code der Seite
console.log('Hello, Console!')
aufgerufen hat.Gehen Sie mithilfe eines der folgenden Workflows zurück zur Console:
- Klicken Sie auf den Tab Console.
- Drücken Sie Strg + [ oder Command + [ (Mac), bis die Konsole im Fokus ist.
- Öffnen Sie das Befehlsmenü, geben Sie
Console
ein, wählen Sie den Befehl Show Console Panel (Konsolenbereich anzeigen) aus und drücken Sie die Eingabetaste.
Klicken Sie in der Demo auf die Schaltfläche Protokollwarnung.
Abandon Hope All Ye Who Enter
wird in der Console protokolliert.Nachrichten, die so formatiert sind, sind Warnungen.
Optional: Klicken Sie auf log.js:12, um den Code zu sehen, der dazu geführt hat, dass die Nachricht so formatiert wurde. Gehen Sie dann zurück zur Konsole, wenn Sie fertig sind. Dies sollten Sie immer dann tun, wenn Sie den Code sehen möchten, der dazu geführt hat, dass eine Nachricht auf bestimmte Weise protokolliert wurde.
Klicken Sie vor
Abandon Hope All Ye Who Enter
auf das Symbol Maximieren . Entwicklertools zeigen den Stacktrace vor dem Aufruf an.Der Stacktrace gibt an, dass eine Funktion namens
logWarning
aufgerufen wurde, die wiederum eine Funktion namensquoteDante
genannt wurde. Mit anderen Worten, der erste Aufruf befindet sich unten im Stacktrace. Sie können Stacktraces jederzeit protokollieren, indem Sieconsole.trace()
aufrufen.Klicken Sie auf Log Error (Fehler protokollieren). Die folgende Fehlermeldung wird protokolliert:
I'm sorry, Dave. I'm afraid I can't do that.
Klicken Sie auf Protokolltabelle. Eine Tabelle mit berühmten Künstlern wird in der Console protokolliert.
Beachten Sie, dass die Spalte
birthday
nur für eine Zeile ausgefüllt wird. Überprüfen Sie den Code, um den Grund dafür herauszufinden.Klicken Sie auf Protokollgruppe. Die Namen von vier berühmten kriminellen Schildkröten sind unter dem Label
Adolescent Irradiated Espionage Tortoises
gruppiert.Klicken Sie auf Log Custom (Benutzerdefiniertes Log). Eine Nachricht mit rotem Rand und blauem Hintergrund wird in der Console protokolliert.
Die Grundidee besteht darin, dass Sie zum Protokollieren von Nachrichten aus JavaScript an die Console eine der console
-Methoden verwenden. Jede Methode formatiert Nachrichten unterschiedlich.
Es gibt noch mehr Methoden als in diesem Abschnitt beschrieben. Am Ende dieser Anleitung lernen Sie die restlichen Methoden kennen.
Vom Browser protokollierte Meldungen ansehen
Der Browser protokolliert Nachrichten auch in der Konsole. Dies tritt normalerweise auf, wenn es ein Problem mit der Seite gibt.
Klicken Sie auf Ursache 404. Der Browser protokolliert einen
404
-Netzwerkfehler, da das JavaScript der Seite versucht hat, eine nicht vorhandene Datei abzurufen.Klicken Sie auf Ursache des Fehlers. Der Browser protokolliert einen nicht erfassten
TypeError
, weil über JavaScript ein nicht vorhandener DOM-Knoten aktualisiert werden soll.Klicken Sie auf das Drop-down-Menü Logebenen und aktivieren Sie die Option Ausführlich, falls sie deaktiviert ist. Im nächsten Abschnitt erfahren Sie mehr über das Filtern. So können Sie dafür sorgen, dass die nächste protokollierte Nachricht sichtbar ist. Hinweis:Wenn das Drop-down-Menü „Standardstufen“ deaktiviert ist, müssen Sie möglicherweise die Seitenleiste der Konsole schließen. Filtern Sie unten nach Nachrichtenquelle, um weitere Informationen zur Seitenleiste der Console zu erhalten.
Klicken Sie auf Ursacheverstoß. Die Seite reagiert einige Sekunden lang nicht mehr und der Browser protokolliert dann die Meldung
[Violation] 'click' handler took 3000ms
in der Console. Die genaue Dauer kann variieren.
Nachrichten filtern
Auf einigen Seiten sehen Sie, dass die Console mit Nachrichten überschwemmt wird. Die Entwicklertools bieten viele verschiedene Möglichkeiten, Nachrichten herauszufiltern, die für die jeweilige Aufgabe nicht relevant sind.
Nach Logebene filtern
Jeder console.*
-Methode wird ein Schweregrad zugewiesen: Verbose
, Info
, Warning
oder Error
. Beispiel: console.log()
ist eine Nachricht auf Info
-Ebene, während console.error()
eine Nachricht auf Error
-Ebene ist.
So filtern Sie nach Logebene:
Klicken Sie auf das Drop-down-Menü Logebenen und deaktivieren Sie Fehler. Eine Ebene ist deaktiviert, wenn sich daneben kein Häkchen mehr befindet. Die Nachrichten der Ebene
Error
verschwinden.Klicken Sie noch einmal auf das Drop-down-Menü Logebenen und aktivieren Sie Fehler wieder. Die Nachrichten der
Error
-Ebene werden wieder angezeigt.
Nach Text filtern
Wenn nur Nachrichten mit einem bestimmten String angezeigt werden sollen, geben Sie diesen 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
im Textfeld Filter. Alle Nachrichten werden wieder angezeigt.
Nach regulärem Ausdruck filtern
Wenn Sie alle Nachrichten anzeigen möchten, die ein Textmuster anstelle eines bestimmten Strings enthalten, verwenden Sie einen regulären Ausdruck.
Geben Sie
/^[AH]/
in das Textfeld Filter ein. Geben Sie dieses Muster in RegExr ein, um die Funktionsweise zu erklären.Löschen Sie
/^[AH]/
im 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 der Console anzeigen .
Klicken Sie auf das Symbol Maximieren neben 12 Nachrichten. In der Seitenleiste wird eine Liste der URLs angezeigt, durch die Nachrichten protokolliert wurden. Beispielsweise hat
log.js
11 Nachrichten verursacht.
Nach Nutzernachrichten filtern
Als Sie zuvor auf Loginformationen geklickt haben, wurde ein Skript namens console.log('Hello, Console!')
erstellt, mit dem die Nachricht in der Console protokolliert wird. Von JavaScript protokollierte Nachrichten werden als Nutzernachrichten bezeichnet. Im Gegensatz dazu hat der Browser beim Klicken auf Ursache 404 eine Meldung auf der Ebene Error
protokolliert, die besagt, dass die angeforderte Ressource nicht gefunden wurde. Solche Nachrichten werden als Browsernachrichten betrachtet. Mit der Seitenleiste können Sie Browsermeldungen herausfiltern und nur Nutzernachrichten anzeigen.
Klicken Sie auf 9 Nutzernachrichten. Die Browsermeldungen werden ausgeblendet.
Klicken Sie auf 12 Nachrichten, um wieder alle Nachrichten zu sehen.
Konsole zusammen mit allen anderen Steuerfeldern verwenden
Was ist, wenn Sie Stile bearbeiten, aber schnell im Console-Protokoll nachsehen möchten? Verwende die Schublade.
- Klicken Sie auf den Tab Elemente.
Drücken Sie die Esc-Taste. Der Tab Console in der Leiste wird geöffnet. Sie enthält alle Funktionen der Console, die Sie in dieser Anleitung verwendet haben.
Nächste Schritte
Herzlichen Glückwunsch! Sie haben die Anleitung abgeschlossen. Klicke auf Trophäe ausgeben, um deine Trophäe zu erhalten.
- In der Referenz zur Console finden Sie weitere Funktionen und Workflows im Zusammenhang mit der Console-Benutzeroberfläche.
- In der Console API-Referenz finden Sie weitere Informationen zu allen
console
-Methoden, die unter Von JavaScript protokollierte Nachrichten ansehen beschrieben wurden. Außerdem können Sie sich die anderenconsole
-Methoden ansehen, die in dieser Anleitung nicht behandelt wurden. - Unter Erste Schritte erfahren Sie, was Sie noch mit den Entwicklertools tun können.
- Weitere Informationen zu den Format- und Stilmethoden von
console
finden Sie unter Nachrichten in der Konsole formatieren und gestalten.