Nachrichten in der Console protokollieren

Kayce Basques

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.

1. Öffnen Sie die Demo.

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

   

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

   

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

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

   

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

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

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

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

6. 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 namens quoteDante aufgerufen hat. Mit anderen Worten, der Aufruf, der zuerst erfolgte, befindet sich unten im Stacktrace. Sie können Stacktraces jederzeit durch Aufrufen von console.trace() protokollieren.

7. Klicken Sie auf Log Error (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 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.

9. Klicken Sie auf Loggruppe. Die Namen von vier berühmten Schildkröten zur Verbrechensbekämpfung sind unter dem Label Adolescent Irradiated Espionage Tortoises zusammengefasst.

   

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

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

   

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

   

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

   

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

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

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.

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ü Logebenen und deaktivieren Sie Fehler. Eine Ebene wird deaktiviert, wenn kein Häkchen mehr daneben zu sehen ist. Die Error-Meldungen verschwinden.

   

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

Wichtiger Hinweis:In der Console wird immer der angewendete Drop-down-Filter gespeichert. Sie bleibt auf allen Seiten sowie auf Seiten, Entwicklertools und Chrome-Neuladevorgängen bestehen. Über die Seitenleiste können Sie schnell einen temporären Filter anwenden.

Nach Text filtern

Wenn Sie nur Nachrichten sehen möchten, die einen exakten 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, sind 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ä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.

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

   

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

Wichtiger Hinweis:Filter in der Seitenleiste sind nur vorübergehend verfügbar. In der Console werden solche Filter nicht für alle Seiten sowie für Seiten, Entwicklertools und Chrome-Neuladevorgänge gespeichert.

1. Klicken Sie auf Konsolenseitenleiste anzeigen .

   

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

1. Klicken Sie auf 9 Nutzermitteilungen. Die Browsermeldungen werden ausgeblendet.

   

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

1. Klicken Sie auf den Tab Elemente.

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