Nachrichten in der Console protokollieren

Kayce Basques

In dieser interaktiven Anleitung erfahren Sie, wie Sie Nachrichten in der Chrome-Entwicklertools Konsole protokollieren und filtern.

Diese Anleitung sollte in der angegebenen Reihenfolge durchgearbeitet werden. Sie setzt voraus, dass Sie die Grundlagen der Webentwicklung kennen, z. B. wie Sie mit JavaScript Interaktivität zu einer Seite hinzufügen.

Demo und Entwicklertools einrichten

Diese Anleitung ist so konzipiert, dass Sie die Demo öffnen und alle Workflows selbst ausprobieren können. Wenn Sie die Schritte selbst ausführen, können Sie sich später besser an die Workflows erinnern.

1. Öffnen Sie die Demo.

2. Optional: Verschieben Sie die Demo in ein separates Fenster. In diesem Beispiel befindet sich die Anleitung links und die Demo rechts.

   

3. Konzentrieren Sie sich auf die Demo und drücken Sie dann Strg+Umschalttaste+J oder Befehlstaste+Optionstaste+J (Mac), um die Entwicklertools zu öffnen. Standardmäßig werden die Entwicklertools rechts neben der Demo geöffnet.

   

4. Optional: Fixieren Sie die Entwicklertools unten im Fenster oder lösen Sie sie, um sie in einem separaten Fenster zu öffnen.

   Entwicklertools unten in der Demo fixiert:

   Entwicklertools in einem separaten Fenster geöffnet:

Von JavaScript protokollierte Nachrichten ansehen

Die meisten Nachrichten, die Sie in der Konsole sehen, stammen von den Webentwicklern, die das JavaScript der Seite geschrieben haben. In diesem Abschnitt werden die verschiedenen Nachrichtentypen vorgestellt, die Sie wahrscheinlich in der Konsole sehen werden. Außerdem wird erklärt, wie Sie die einzelnen Nachrichtentypen selbst aus Ihrem eigenen JavaScript protokollieren können.

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

   

2. Klicken Sie in der Konsole neben der Hello, Console! Nachricht auf log.js:2. Das Fenster Quellen wird geöffnet und die Codezeile hervorgehoben, die dazu geführt hat, dass die Nachricht in der Konsole protokolliert wurde.

   

   Die Nachricht wurde protokolliert, als das JavaScript der Seite console.log('Hello, Console!') aufgerufen hat.

3. Kehren Sie mit einem der folgenden Workflows zur Konsole zurück:

   • Klicken Sie auf den Tab Konsole.
   • Drücken Sie Strg + [ oder Befehlstaste + [ (Mac), bis die Konsole im Vordergrund ist.
   • Öffnen Sie das Befehlsmenü, geben Sie Console ein, wählen Sie den Befehl Konsole anzeigen aus, und drücken Sie dann die Eingabetaste.

4. Klicken Sie in der Demo auf die Schaltfläche Log Warning. Abandon Hope All Ye Who Enter wird in der Konsole protokolliert.

   

   Nachrichten, die so formatiert sind, sind Warnungen.

5. Optional: Klicken Sie auf log.js:12 , um den Code aufzurufen, der dazu geführt hat, dass die Nachricht so formatiert wurde. Kehren Sie dann zur Konsole zurück. Führen Sie diesen Schritt immer 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 Stacktrace angezeigt, der zum Aufruf geführt hat.

   

   Der Stacktrace zeigt, dass eine Funktion namens logWarning aufgerufen wurde, die wiederum eine Funktion namens quoteDante aufgerufen hat. Mit anderen Worten: Der erste Aufruf befindet sich unten im Stacktrace. Sie können Stacktraces jederzeit protokollieren, indem Sie console.trace() aufrufen.

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

   

8. Klicken Sie auf Log Table. In der Konsole wird eine Tabelle mit berühmten Künstlern protokolliert.

   

   Beachten Sie, dass die Spalte birthday nur für eine Zeile ausgefüllt ist. Sehen Sie sich den Code an, um herauszufinden, warum.

9. Klicken Sie auf Log Group. Die Namen von vier berühmten, verbrechensbekämpfenden Schildkröten sind unter dem Label Adolescent Irradiated Espionage Tortoises gruppiert.

   

10. Klicken Sie auf Log Custom. In der Konsole wird eine Nachricht mit einem roten Rahmen und blauem Hintergrund protokolliert.

    

Die Hauptidee ist, dass Sie eine der console-Methoden verwenden, wenn Sie Nachrichten aus Ihrem JavaScript in der Konsole protokollieren möchten. Jede Methode formatiert Nachrichten anders.

Es gibt noch mehr Methoden als die, die in diesem Abschnitt gezeigt wurden. Am Ende der Anleitung erfahren Sie, wie Sie die restlichen Methoden kennenlernen können.

Vom Browser protokollierte Nachrichten ansehen

Der Browser protokolliert auch Nachrichten in der Konsole. Das geschieht in der Regel, wenn es ein Problem mit der Seite gibt.

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

   

2. Klicken Sie auf Cause Error. Der Browser protokolliert einen nicht abgefangenen TypeError, weil das JavaScript versucht, einen nicht vorhandenen DOM-Knoten zu aktualisieren.

   

3. Klicken Sie auf das Drop-down-Menü Logebenen und aktivieren Sie die Option Ausführlich , falls sie deaktiviert ist. Weitere Informationen zum Filtern finden Sie im nächsten Abschnitt. Sie müssen dies tun, damit die nächste Nachricht, die Sie protokollieren, sichtbar ist. Hinweis:Wenn das Drop-down-Menü „Standardebenen“ deaktiviert ist, müssen Sie möglicherweise die Seitenleiste der Konsole schließen. Weitere Informationen zur Seitenleiste der Konsole finden Sie unter Nach Nachrichtenquelle filtern.

   

4. Klicken Sie auf Cause Violation. Die Seite reagiert einige Sekunden lang nicht und der Browser protokolliert die Nachricht [Violation] 'click' handler took 3000ms in der Konsole. Die genaue Dauer kann variieren.

   

Nachrichten filtern

Auf einigen Seiten wird die Konsole mit Nachrichten überflutet. In den Entwicklertools gibt es viele verschiedene Möglichkeiten, Nachrichten herauszufiltern, die für die aktuelle Aufgabe nicht relevant sind.

Wichtig:In der Konsole werden nur die Ausgabenachrichten herausgefiltert. Alle Eingaben, die Sie in die Konsole eingegeben haben, bleiben dort.

Nach Logebene filtern

Jeder console.*-Methode ist eine Schweregradstufe zugewiesen: Verbose, Info, Warning oder Error. console.log() ist beispielsweise eine Nachricht der Stufe Info, während console.error() eine Nachricht der Stufe Error ist.

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

So filtern Sie nach Logebene:

1. Klicken Sie auf das Drop-down-Menü Logebenen und deaktivieren Sie Fehler. Eine Ebene ist deaktiviert, wenn daneben kein Häkchen mehr zu sehen ist. Die Nachrichten der Stufe Error werden ausgeblendet.

   

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

Wichtig:In der Konsole wird der angewendete Drop-down-Filter immer gespeichert. Er bleibt auf allen Seiten sowie bei Seiten-, Entwicklertools- und Chrome-Neuladevorgängen erhalten. Wenn Sie schnell einen temporären Filter 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 Feld Filter ein.

1. Geben Sie Dave in das Feld Filter ein. Alle Nachrichten, die den String Dave nicht enthalten, werden ausgeblendet.

   

2. Löschen Sie Dave aus dem Feld Filter. Alle Nachrichten werden wieder angezeigt.

Nach regulärem Ausdruck filtern

Wenn Sie alle Nachrichten anzeigen möchten, die ein bestimmtes Textmuster enthalten, anstatt eines bestimmten Strings, verwenden Sie einen regulären Ausdruck.

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

   

2. Löschen Sie /^[AH]/ aus dem Feld 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:Seitenleistenfilter sind temporär. In der Konsole werden solche Filter nicht auf allen Seiten sowie bei Seiten-, Entwicklertools- und Chrome-Neuladevorgängen beibehalten.

1. Klicken Sie auf Seitenleiste der Konsole anzeigen .

   

2. Klicken Sie neben 12 Nachrichten auf das Symbol Maximieren . In der Seitenleiste wird eine Liste der URLs angezeigt, die dazu geführt haben, dass Nachrichten protokolliert wurden. Beispielsweise hat log.js 11 Nachrichten verursacht.

   

Nach Nutzernachrichten filtern

Als Sie vorhin auf Log Info geklickt haben, wurde ein Skript namens console.log('Hello, Console!') aufgerufen, um die Nachricht in der Konsole zu protokollieren. So protokollierte Nachrichten aus JavaScript werden als Nutzernachrichten bezeichnet. Als Sie hingegen auf Cause 404 geklickt haben, hat der Browser eine Nachricht der Stufe Error protokolliert, in der angegeben wurde, dass die angeforderte Ressource nicht gefunden wurde. Solche Nachrichten werden als Browsernachrichten bezeichnet. Mit der Seitenleiste können Sie Browsernachrichten herausfiltern und nur Nutzernachrichten anzeigen.

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

   

2. Klicken Sie auf 12 Nachrichten , um alle Nachrichten wieder anzuzeigen.

Die Konsole zusammen mit einem anderen Fenster verwenden

Was ist, wenn Sie Stile bearbeiten, aber schnell das Konsolenprotokoll auf etwas überprüfen müssen? Verwenden Sie das Drawer.

1. Klicken Sie auf den Tab Elemente.

2. Drücken Sie die Escape-Taste. Der Tab Konsole des Drawers wird geöffnet. Er enthält alle Funktionen der Konsole , die Sie in dieser Anleitung verwendet haben.

   

Nächste Schritte

Herzlichen Glückwunsch, Sie haben die Anleitung abgeschlossen. Klicken Sie auf Trophäe ausgeben , um Ihre Trophäe zu erhalten.

• In der Console-Referenz finden Sie weitere Funktionen und Workflows im Zusammenhang mit der Konsole -UI.
• In der Console API-Referenz finden Sie weitere Informationen zu allen console Methoden, die unter Von JavaScript protokollierte Nachrichten ansehen gezeigt wurden, und zu den anderen console Methoden, die in dieser Anleitung nicht behandelt wurden.
• Unter Erste Schritte erfahren Sie, was Sie sonst noch mit den Entwicklertools tun können.
• Unter Nachrichten in der Konsole formatieren und gestalten finden Sie weitere Informationen zu allen console Methoden zum Formatieren und Gestalten.