Nachrichten in der Console protokollieren

Kayce Basques

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.

1. Öffnen Sie die Demo.

2. Optional: Verschieben Sie die Demo in ein separates Fenster. In diesem Beispiel ist die Anleitung links und die Demo rechts zu sehen.

   

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

   

4. Optional: Docken Sie die DevTools am unteren Rand des Fensters an oder lösen Sie das Andocken, um sie in einem separaten Fenster zu öffnen.

   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.

1. Klicken Sie in der Demo auf die Schaltfläche Log Info (Informationen protokollieren). Hello, Console! wird in der Console protokolliert.

   

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

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

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

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

6. 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 namens quoteDante aufgerufen hat. Mit anderen Worten: Der erste Aufruf befindet sich am Ende des Stack-Traces. Sie können jederzeit Stack-Traces erfassen, indem Sie console.trace() aufrufen.

7. Klicken Sie auf Fehler protokollieren. Die folgende Fehlermeldung wird protokolliert: I'm sorry, Dave. I'm afraid I can't do that.

   

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

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

   

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

1. Klicken Sie auf 404-Fehler. Der Browser protokolliert einen 404-Netzwerkfehler, weil das JavaScript der Seite versucht hat, eine Datei abzurufen, die nicht existiert.

   

2. Klicken Sie auf Fehler verursachen. Der Browser protokolliert einen nicht aufgefangenen TypeError, da JavaScript versucht, einen nicht vorhandenen DOM-Knoten zu aktualisieren.

   

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

   

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

Wichtig:Die Console filtert nur die Ausgabemeldungen heraus. Alle Eingaben, die Sie in die Console eingegeben haben, bleiben dort.

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.

Hinweis:Eine vollständige Liste der console.*-Methoden und ihrer Schweregrade finden Sie in der Console API-Referenz.

So filtern Sie nach Logebene:

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

   

2. Klicken Sie noch einmal auf das Drop-down-Menü Lobenebenen und aktivieren Sie Fehler wieder. Die Nachrichten auf Error-Ebene werden wieder angezeigt.

Wichtig:In der Konsole wird der von Ihnen angewendete Drop-down-Filter immer gespeichert. Sie bleibt auf allen Seiten erhalten und auch nach dem Aktualisieren von Seiten, der Entwicklertools und Chrome. Wenn Sie einen temporären Filter schnell anwenden möchten, verwenden Sie die Seitenleiste.

Nach Text filtern

Wenn Sie nur Nachrichten sehen möchten, die einen bestimmten String enthalten, geben Sie diesen String in das Textfeld Filter ein.

1. Geben Sie Dave in das Textfeld Filter ein. Alle Nachrichten, die den String Dave nicht enthalten, werden ausgeblendet. Möglicherweise wird auch das Label Adolescent Irradiated Espionage Tortoises angezeigt. Das ist ein Fehler.

   

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

1. Geben Sie /^[AH]/ in das Textfeld Filter ein. Geben Sie dieses Muster in RegExr ein, um eine Erklärung zu erhalten.

   

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

Wichtig:Filter in der Seitenleiste sind temporär. In der Console werden solche Filter nicht für alle Seiten beibehalten und auch nicht bei Seiten-, DevTools- und Chrome-Neustarts.

1. Klicken Sie auf Seitenleiste „Konsole“ anzeigen .

   

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

1. Klicken Sie auf 9 Nutzernachrichten. Die Browsernachrichten sind ausgeblendet.

   

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

1. Klicken Sie auf den Tab Elemente.

2. 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 anderen console-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.