Nachrichten in der Console protokollieren

Kayce Basken

Twitter GitHub Glitch

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.

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

   

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

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

   

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

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

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

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

6. 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 namens quoteDante genannt wurde. 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 (Fehler protokollieren). Die folgende Fehlermeldung wird protokolliert: I'm sorry, Dave. I'm afraid I can't do that.

   

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

9. Klicken Sie auf Protokollgruppe. Die Namen von vier berühmten kriminellen Schildkröten sind unter dem Label Adolescent Irradiated Espionage Tortoises gruppiert.

   

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

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

   

2. Klicken Sie auf Ursache des Fehlers. Der Browser protokolliert einen nicht erfassten TypeError, weil über JavaScript ein nicht vorhandener DOM-Knoten aktualisiert werden soll.

   

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

   

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

Wichtiger Hinweis:Die Console filtert nur die Ausgabenachrichten heraus. Alle Eingaben, die Sie in die Console eingegeben haben, bleiben dort.

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.

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

So filtern Sie nach Logebene:

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

   

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

Wichtiger Hinweis:In der Console wird immer der ausgewählte Drop-down-Filter gespeichert. Er wird für alle Seiten sowie für das Neuladen von Seiten, Entwicklertools und Chrome beibehalten. Über die Seitenleiste können Sie schnell einen temporären Filter anwenden.

Nach Text filtern

Wenn nur Nachrichten mit einem bestimmten String angezeigt werden sollen, geben Sie diesen 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 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.

1. Geben Sie /^[AH]/ in das Textfeld Filter ein. Geben Sie dieses Muster in RegExr ein, um die Funktionsweise zu erklären.

   

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

Wichtiger Hinweis:Filter in der Seitenleiste sind temporär. Solche Filter werden in der Console nicht auf allen Seiten, Seiten, in den Entwicklertools und beim Neuladen von Chrome beibehalten.

1. Klicken Sie auf Seitenleiste der Console anzeigen .

   

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

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

   

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

1. Klicken Sie auf den Tab Elemente.

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