In dieser interaktiven Anleitung erfahren Sie, wie Sie Nachrichten in der Chrome-Entwicklertools Console protokollieren und filtern.
Diese Anleitung soll in der richtigen Reihenfolge durchgearbeitet werden. Dabei wird vorausgesetzt, dass Sie die Grundlagen der Webentwicklung beherrschen, z. B. wie Sie einer Seite mit JavaScript Interaktivität hinzufügen.
Demo und Entwicklertools einrichten
Dieses Tutorial ist so konzipiert, dass Sie die Demo öffnen und alle Workflows selbst ausprobieren können. Wenn Sie die Schritte physisch befolgen, erinnern Sie sich wahrscheinlich später mit größerer Wahrscheinlichkeit an die Workflows.
- Öffnen Sie die Demo.
Optional: Verschieben Sie die Demo in ein separates Fenster. In diesem Beispiel befindet sich die Anleitung auf der linken Seite und die Demo auf der rechten Seite.
Fokussieren Sie sich auf die Demo und drücken Sie dann Strg + Umschalttaste + J oder Befehlstaste + Wahltaste + J (Mac), um die Entwicklertools zu öffnen. Standardmäßig wird die Entwicklertools rechts neben der Demo geöffnet.
Optional: Docken Sie die Entwicklertools unten im Fenster oder entfernen Sie sie in einem separaten Fenster.
Die Entwicklertools sind unten in der Demo angedockt:
In einem separaten Fenster vom Dock gelöste Entwicklertools:
Aus JavaScript protokollierte Nachrichten anzeigen
Die meisten Meldungen, die du in der Console siehst, stammen von den Webentwicklern, die den JavaScript-Code 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 (Loginformationen).
Hello, Console!
wird in der Console protokolliert.Klicken Sie in der Console neben der
Hello, Console!
-Meldung auf log.js:2. Der Bereich Quellen wird geöffnet und die Codezeile wird 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.Kehren Sie mithilfe der folgenden Workflows zur Console zurück:
- Klicken Sie auf den Tab Console.
- Drücken Sie Strg + [ oder Befehlstaste + [ (Mac), bis die Konsole im Fokus ist.
- Öffnen Sie das Befehlsmenü, geben Sie
Console
ein, wählen Sie den Befehl Konsolenfeld anzeigen aus und drücken Sie die Eingabetaste.
Klicken Sie in der Demo auf die Schaltfläche Log Warning (Warnung protokollieren).
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 sich den Code anzusehen, der dazu geführt hat, dass die Meldung so formatiert wurde. Kehren Sie anschließend zu Console zurück. Sie können dies 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 auf das Symbol Maximieren vor
Abandon Hope All Ye Who Enter
. Die Entwicklertools zeigen den Stacktrace, der zum Aufruf führt.Der Stacktrace teilt Ihnen mit, dass eine Funktion namens
logWarning
aufgerufen wurde, die wiederum eine Funktion namensquoteDante
aufgerufen hat. Mit anderen Worten, der Aufruf, der zuerst erfolgte, befindet sich unten im Stacktrace. Sie können Stacktraces jederzeit durch Aufrufen vonconsole.trace()
protokollieren.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 Log-Tabelle. Eine Tabelle zu berühmten Künstlern wird in der Konsole protokolliert.
Die Spalte
birthday
wird nur für eine Zeile gefüllt. Sehen Sie sich den Code an, um den Grund dafür herauszufinden.Klicken Sie auf Loggruppe. Die Namen von vier berühmten Schildkröten zur Verbrechensbekämpfung sind unter dem Label
Adolescent Irradiated Espionage Tortoises
zusammengefasst.Klicken Sie auf Log Custom (Benutzerdefiniert protokollieren). Eine Nachricht mit rotem Rahmen und blauem Hintergrund wird in der Console protokolliert.
Wenn Sie Nachrichten aus Ihrem JavaScript-Code in der Console erfassen möchten, müssen Sie eine der console
-Methoden verwenden. Jede Methode formatiert Nachrichten unterschiedlich.
Es gibt noch mehr Methoden als in diesem Abschnitt beschrieben. Am Ende der Anleitung erfahren Sie, wie Sie die anderen Methoden kennenlernen.
Vom Browser protokollierte Nachrichten ansehen
Der Browser protokolliert auch Meldungen in der Konsole. Dies geschieht meist, wenn ein Problem mit der Seite auftritt.
Klicken Sie auf Ursache 404. Der Browser protokolliert einen
404
-Netzwerkfehler, da über den JavaScript-Code der Seite versucht wurde, eine nicht vorhandene Datei abzurufen.Klicken Sie auf Fehler verursachen. Der Browser protokolliert ein nicht abgefangenes
TypeError
-Element, da der JavaScript-Code versucht, einen nicht vorhandenen DOM-Knoten zu aktualisieren.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. Dies ist erforderlich, damit die nächste von Ihnen protokollierte Meldung sichtbar ist. Hinweis:Wenn das Drop-down-Menü „Standardebenen“ deaktiviert ist, müssen Sie möglicherweise die Seitenleiste der Console schließen. Filtern Sie unten nach Nachrichtenquelle, um weitere Informationen über die Seitenleiste der Console zu erhalten.
Klicken Sie auf Ursache Verstoß. 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 wird die Konsole mit Nachrichten überschwemmt. Die Entwicklertools bieten viele verschiedene Möglichkeiten, Nachrichten herauszufiltern, die für die jeweilige Aufgabe nicht relevant sind.
Nach Logebene filtern
Jeder console.*
-Methode ist eine Wichtigkeitsstufe zugewiesen: Verbose
, Info
, Warning
oder Error
. console.log()
ist beispielsweise 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 wird deaktiviert, wenn kein Häkchen mehr daneben zu sehen ist. Die
Error
-Meldungen verschwinden.Klicken Sie noch einmal auf das Drop-down-Menü Logebenen und aktivieren Sie Fehler wieder. Die Meldungen der Ebene
Error
werden wieder angezeigt.
Nach Text filtern
Wenn Sie nur Nachrichten sehen möchten, die einen exakten 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, sind 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ärem Ausdruck filtern
Wenn Sie alle Nachrichten anzeigen lassen möchten, die statt eines bestimmten Strings ein Textmuster enthalten, 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 der Funktionsweise zu erhalten.Löschen Sie
/^[AH]/
aus dem Textfeld Filter. Alle Nachrichten werden wieder angezeigt.
Nach Nachrichtenquelle filtern
Wenn Sie nur Nachrichten sehen möchten, die von einer bestimmten URL stammen, verwenden Sie die Seitenleiste.
Klicken Sie auf Konsolenseitenleiste anzeigen .
Klicken Sie auf das Symbol Maximieren neben 12 Nachrichten. Die Seitenleiste enthält eine Liste der URLs, die zur Protokollierung von Meldungen geführt haben. Zum Beispiel hat
log.js
11 Nachrichten verursacht.
Nach Nutzermitteilungen filtern
Als Sie zuvor auf Log Info geklickt haben, wurde ein Skript namens console.log('Hello, Console!')
verwendet, um die Meldung in der Console zu protokollieren. Meldungen, die aus JavaScript protokolliert werden, werden als Nutzernachrichten bezeichnet. Wenn Sie dagegen auf Ursache 404 geklickt haben, hat der Browser eine Error
-Meldung protokolliert, dass die angeforderte Ressource nicht gefunden werden konnte. Solche Nachrichten werden als Browsernachrichten betrachtet. Über die Seitenleiste können Sie Browsermeldungen herausfiltern und nur Nutzermitteilungen anzeigen.
Klicken Sie auf 9 Nutzermitteilungen. Die Browsermeldungen werden ausgeblendet.
Klicken Sie auf 12 Nachrichten, damit wieder alle Nachrichten angezeigt werden.
Verwenden Sie die Konsole zusammen mit den anderen Bereichen
Was ist, wenn Sie Stile bearbeiten, aber schnell im Console-Protokoll nachsehen möchten, ob etwas vorhanden ist? Verwende die Leiste.
- Klicken Sie auf den Tab Elemente.
Drücken Sie die Esc-Taste. Der Tab Console (Konsole) im Drawer wird geöffnet. Sie umfasst 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 spenden, um deine Trophäe zu erhalten.
- In der Referenz zur Konsole finden Sie weitere Funktionen und Workflows im Zusammenhang mit der Benutzeroberfläche der Console.
- In der Console API-Referenz finden Sie weitere Informationen zu allen
console
-Methoden, die unter Aus JavaScript protokollierte Nachrichten abrufen gezeigt wurden, sowie zu den anderenconsole
-Methoden, die in dieser Anleitung nicht behandelt wurden. - Unter Jetzt starten erfährst du, was du noch mit den Entwicklertools tun kannst.
- Weitere Informationen zu allen
console
-Formaten und Stilmethoden finden Sie unter Nachrichten in der Konsole formatieren und gestalten.