Nachrichten in der Console protokollieren

Kayce Basques

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

Nachrichten in der Console.

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.

    Dieses Tutorial links und die Demo rechts.

  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.

    Die Entwicklertools werden 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: Die Entwicklertools sind unten in der Demo angedockt.

    In einem separaten Fenster vom Dock gelöste Entwicklertools: Die Entwicklertools wurden in einem separaten Fenster vom Dock gelöst.

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.

    Die Konsole nach dem Klicken auf Loginfo.

  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.

    In den Entwicklertools wird der Bereich „Quellen“ geöffnet, nachdem Sie auf „log.js:2“ geklickt haben.

    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.

    Die Konsole nach dem Klicken auf „Logwarnung“.

    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 Maximieren. vor Abandon Hope All Ye Who Enter. Die Entwicklertools zeigen den Stacktrace, der zum Aufruf führt.

    Ein Stacktrace.

    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.

    Eine Fehlermeldung.

  8. Klicken Sie auf Log-Tabelle. Eine Tabelle zu berühmten Künstlern wird in der Konsole protokolliert.

    Eine Tabelle in der Console.

    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.

    Eine Gruppe von Nachrichten in der Console.

  10. Klicken Sie auf Log Custom (Benutzerdefiniert protokollieren). Eine Nachricht mit rotem Rahmen und blauem Hintergrund wird in der Console protokolliert.

    Eine Nachricht mit benutzerdefinierter Formatierung in der Konsole.

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.

    In der Konsole wird ein 404-Fehler angezeigt.

  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.

    Ein TypeError in der Konsole

  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.

    Die ausführliche Protokollierungsebene aktivieren.

  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.

    Ein Verstoß in der Console.

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:

  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.

    Meldungen auf Fehlerebene in der Console werden deaktiviert.

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

  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.

    Herausfiltern aller Nachrichten, die „Dave“ nicht enthalten.

  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.

    Es werden alle Nachrichten herausgefiltert, die nicht dem Muster „/^[AH]/“ entsprechen.

  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.

  1. Klicken Sie auf Konsolenseitenleiste anzeigen Seitenleiste der Konsole anzeigen..

    Seitenleiste

  2. Klicken Sie auf das Symbol Maximieren 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.

    Quelle von Nachrichten in der Seitenleiste anzeigen lassen.

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.

    Herausfiltern von Browsernachrichten

  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.

    Tab **Konsole** in der Leiste

Nächste Schritte

Herzlichen Glückwunsch! Sie haben die Anleitung abgeschlossen. Klicke auf Trophäe spenden, um deine Trophäe zu erhalten.