Referenz zu Console-Funktionen

Kayce Basques

Sofia Emelianova

Auf dieser Seite finden Sie eine Übersicht über die Funktionen der Chrome DevTools-Konsole. Es wird davon ausgegangen, dass Sie bereits mit der Verwendung der Console vertraut sind, um protokollierte Nachrichten aufzurufen und JavaScript auszuführen. Falls nicht, lesen Sie den Hilfeartikel Einstieg.

Eine API-Referenz zu Funktionen wie console.log() finden Sie in der Console API-Referenz. Eine Referenz zu Funktionen wie monitorEvents() finden Sie in der Console Utilities API-Referenz.

Konsole öffnen

Sie können die Console als Steuerfeld oder als Tab im Navigationsbereich öffnen.

Console-Steuerfeld öffnen

Drücken Sie Strg + Umschalt + J oder Befehlstaste + Optionstaste + J (Mac).

Wenn Sie die Konsole über das Befehlsmenü öffnen möchten, geben Sie Console ein und führen Sie dann den Befehl Show Console (Konsole anzeigen) aus, neben dem das Symbol Steuerfeld angezeigt wird.

Console im Steuerfeld öffnen

Drücken Sie die Esc-Taste oder klicken Sie auf DevTools anpassen und steuern und wählen Sie dann Console-Schieberegler anzeigen aus.

Der Schieberegler wird unten im DevTools-Fenster eingeblendet, wenn der Tab Konsole geöffnet ist.

Wenn Sie den Tab „Konsole“ über das Befehlsmenü öffnen möchten, geben Sie Console ein und führen Sie dann den Befehl Show Console (Konsole anzeigen) aus, neben dem das Symbol Schublade zu sehen ist.

Konsoleneinstellungen öffnen

Klicken Sie rechts oben in der Console auf  Console-Einstellungen.

Wichtig:Nicht zu verwechseln mit den DevTools-Einstellungen über und neben dem Dreipunkt-Menü .

Unter den folgenden Links finden Sie eine Erläuterung der einzelnen Einstellungen:

• Netzwerk ausblenden
• Protokoll beibehalten
• Nur ausgewählter Kontext
• Ähnliche Nachrichten in der Konsole gruppieren
• CORS-Fehler in der Konsole anzeigen
• XMLHttpRequests protokollieren
• Eager Evaluation
• Automatische Vervollständigung aus dem Verlauf

Seitenleiste der Console öffnen

Klicken Sie auf Seitenleiste „Konsole“ anzeigen , um die Seitenleiste zu öffnen. Sie ist nützlich zum Filtern.

Nachrichten ansehen

Dieser Abschnitt enthält Funktionen, mit denen sich die Darstellung von Meldungen in der Console ändern lässt. Eine detaillierte Anleitung finden Sie unter Nachrichten ansehen.

Nachrichtengruppierung deaktivieren

Öffnen Sie die Konsoleneinstellungen und deaktivieren Sie Ähnliche Nachrichten gruppieren, um das standardmäßige Gruppierungsverhalten von Nachrichten in der Konsole zu deaktivieren. Ein Beispiel finden Sie unter XHR- und Fetch-Anfragen protokollieren.

Nachrichten von Haltepunkten ansehen

In der Console werden Nachrichten, die durch Haltestellen ausgelöst werden, so gekennzeichnet:

• console.* ruft bedingte Haltepunkte mit einem orangefarbenen Fragezeichen ? auf
• Logpoint-Nachrichten mit zwei rosafarbenen Punkten ..

Wenn Sie im Bereich Quellen zum Inline-Editor für Unterbrechungen springen möchten, klicken Sie auf den Ankerlink neben der Unterbrechungsmeldung.

Stack-Traces ansehen

In der Konsole werden automatisch Stack-Traces für Fehler und Warnungen erfasst. Ein Stack-Trace ist ein Verlauf von Funktionsaufrufen (Frames), die zum Fehler oder zur Warnung geführt haben. In der Console werden sie in umgekehrter Reihenfolge angezeigt: Der aktuelle Frame ist oben.

Wenn Sie einen Stack-Trace aufrufen möchten, klicken Sie neben einem Fehler oder einer Warnung auf das Erweiterungssymbol .

Fehlerursachen in Stack-Traces ansehen

In der Console können Sie im Stacktrace gegebenenfalls Ketten von Fehlerursachen sehen.

Um die Fehlerbehebung zu erleichtern, können Sie Fehlerursachen angeben, wenn Sie Fehler abfangen und noch einmal werfen. Wenn die Console die Ursache der Fehlerkette ermittelt, wird jeder Fehlerstapel mit dem Präfix Caused by: ausgegeben, damit Sie den ursprünglichen Fehler finden können.

Async-Stacktraces ansehen

Wenn das von Ihrem Framework unterstützt wird oder Sie direkt Browser-Planungsprimitive wie setTimeout verwenden, können Sie in DevTools asynchrone Vorgänge erfassen, indem Sie beide Teile des asynchronen Codes verknüpfen.

In diesem Fall zeigt der Stack-Trace die „volle Geschichte“ des asynchronen Vorgangs.

Wichtiger Hinweis:In DevTools wird diese Funktion „Async Stack Tagging“ basierend auf der console.createTask() API-Methode implementiert. DevTools empfiehlt die Verwendung dieser API für Frameworks und Abstraktionsschichten. Angular unterstützt diese Funktion beispielsweise.

Bekannte Drittanbieter-Frames in Stack-Traces anzeigen

Wenn Quellkarten das Feld ignoreList enthalten, werden in der Console standardmäßig die Frames von Drittanbietern aus Quellen ausgeblendet, die von Bundlern (z. B. Webpack) oder Frameworks (z. B. Angular) generiert wurden.

Wenn Sie den vollständigen Stack-Trace einschließlich Drittanbieter-Frames sehen möchten, klicken Sie unten im Stack-Trace auf N weitere Frames anzeigen.

Wenn Sie immer den vollständigen Stack-Trace sehen möchten, deaktivieren Sie die Einstellung Einstellungen > Ignorieren-Liste > Bekannte Drittanbieterskripts automatisch der Ignorieren-Liste hinzufügen.

XHR- und Fetch-Anfragen protokollieren

Öffnen Sie die Console-Einstellungen und aktivieren Sie XMLHttpRequests protokollieren, um alle XMLHttpRequest- und Fetch-Anfragen in der Console zu protokollieren.

Die oberste Nachricht im Beispiel oben zeigt das standardmäßige Gruppierungsverhalten der Console. Im folgenden Beispiel sehen Sie, wie derselbe Log nach Deaktivierung der Nachrichtengruppierung aussieht.

Nachrichten über Seitenladevorgänge hinweg beibehalten

Standardmäßig wird die Console jedes Mal gelöscht, wenn Sie eine neue Seite laden. Wenn Nachrichten zwischen Seitenladevorgängen beibehalten werden sollen, öffnen Sie die Konsoleneinstellungen und aktivieren Sie das Kästchen Protokoll beibehalten.

Netzwerk-Benachrichtigungen ausblenden

Standardmäßig protokolliert der Browser Netzwerknachrichten in der Console. Die oberste Meldung im folgenden Beispiel steht beispielsweise für einen 404-Fehler.

So blenden Sie Netzwerk-Benachrichtigungen aus:

1. Konsoleneinstellungen öffnen
2. Aktivieren Sie das Kästchen Netzwerk ausblenden.

CORS-Fehler ein- oder ausblenden

In der Konsole können CORS-Fehler angezeigt werden, wenn Netzwerkanfragen aufgrund von Cross-Origin Resource Sharing (CORS) fehlschlagen.

So blenden Sie CORS-Fehler ein oder aus:

1. Konsoleneinstellungen öffnen
2. Klicken Sie das Kästchen CORS-Fehler in der Konsole anzeigen an oder deaktivieren Sie es.

Wenn in der Console CORS-Fehler angezeigt werden, können Sie neben den Fehlern auf die folgenden Schaltflächen klicken:

• , um die Anfrage mit einem CORS-bezogenen TypeError im Bereich Netzwerk zu öffnen.
• , um auf dem Tab Probleme eine mögliche Lösung zu erhalten.

Nachrichten filtern

Es gibt viele Möglichkeiten, Nachrichten in der Console herauszufiltern.

Browsernachrichten herausfiltern

Öffnen Sie die Konsolen-Seitenleiste und klicken Sie auf Nutzernachrichten, um nur Nachrichten anzuzeigen, die aus dem JavaScript der Seite stammen.

Nach Logebene filtern

In DevTools werden den meisten console.*-Methoden Schweregrade zugewiesen.

Es gibt vier Stufen:

• Verbose
• Info
• Warning
• Error

Beispielsweise gehört console.log() zur Gruppe Info, während console.error() zur Gruppe Error gehört. In der Console API-Referenz wird die Schwere der einzelnen Methoden beschrieben.

Jede Meldung, die der Browser in der Console protokolliert, hat auch einen Schweregrad. Sie können alle Nachrichtenebenen ausblenden, die Sie nicht interessieren. Wenn Sie beispielsweise nur an Error-Nachrichten interessiert sind, können Sie die anderen drei Gruppen ausblenden.

Klicken Sie auf das Drop-down-Menü Logebenen, um Verbose-, Info-, Warning- oder Error-Nachrichten zu aktivieren oder zu deaktivieren.

Sie können auch nach Protokollebene filtern. Öffnen Sie dazu die Console-Seitenleiste und klicken Sie dann auf Fehler, Warnungen, Informationen oder Ausführlich.

Nachrichten nach URL filtern

Geben Sie url: gefolgt von einer URL ein, um nur Nachrichten anzusehen, die von dieser URL stammen. Nachdem Sie url: eingegeben haben, werden in den DevTools alle relevanten URLs angezeigt.

Domains funktionieren auch. Wenn https://example.com/a.js und https://example.com/b.js beispielsweise Logging-Meldungen sind, können Sie sich mit url:https://example.com auf die Meldungen aus diesen beiden Scripts konzentrieren.

Wenn Sie alle Nachrichten von einer bestimmten URL ausblenden möchten, geben Sie -url: gefolgt von der URL ein, z. B. https://b.wal.co. Dies ist ein Negativ-URL-Filter.

Sie können auch Nachrichten von einer einzelnen URL anzeigen lassen. Öffnen Sie dazu die Konsolen-Seitenleiste, maximieren Sie den Bereich Nutzernachrichten und klicken Sie dann auf die URL des Scripts mit den Nachrichten, die Sie sich ansehen möchten.

Nachrichten aus verschiedenen Kontexten herausfiltern

Angenommen, Sie haben eine Anzeige auf Ihrer Seite. Die Anzeige ist in einem <iframe> eingebettet und generiert viele Nachrichten in Ihrer Console. Da sich diese Anzeige in einem anderen JavaScript-Kontext befindet, können Sie die Nachrichten beispielsweise ausblenden, indem Sie die Konsoleneinstellungen öffnen und das Kästchen Nur ausgewählter Kontext aktivieren.

Nachrichten herausfiltern, die nicht mit einem regulären Ausdruck übereinstimmen

Geben Sie einen regulären Ausdruck wie /[foo]\s[bar]/ in das Textfeld Filter ein, um alle Nachrichten herauszufiltern, die nicht mit diesem Muster übereinstimmen. Leerzeichen werden nicht unterstützt. Verwenden Sie stattdessen \s. In den DevTools wird geprüft, ob das Muster im Nachrichtentext oder im Script gefunden wird, das dazu geführt hat, dass die Nachricht protokolliert wurde.

Mit dem folgenden Filter werden beispielsweise alle Nachrichten herausgefiltert, die nicht mit /[gm][ta][mi]/ übereinstimmen.

In Protokollen nach Text suchen

So suchen Sie in Protokollnachrichten nach Text:

1. Drücken Sie Befehlstaste + F (Mac) oder Strg + F (Windows, Linux), um eine integrierte Suchleiste zu öffnen.
2. Geben Sie Ihre Suchanfrage in die Leiste ein. In diesem Beispiel ist das legacy. Optional:
   • Klicken Sie auf Groß- und Kleinschreibung beachten, damit bei der Abfrage zwischen Groß- und Kleinschreibung unterschieden wird.
   • Klicken Sie auf Regulären Ausdruck verwenden, um mit einem regulären Ausdruck zu suchen.
3. Drücken Sie die Eingabetaste. Wenn Sie zum vorherigen oder nächsten Suchergebnis springen möchten, drücken Sie die Auf- oder Ab-Taste.

JavaScript ausführen

Dieser Abschnitt enthält Funktionen zum Ausführen von JavaScript in der Console. Eine praktische Anleitung finden Sie unter JavaScript ausführen.

Optionen zum Kopieren von Strings

In der Konsole werden Strings standardmäßig als gültige JavaScript-Literale ausgegeben. Klicken Sie mit der rechten Maustaste auf eine Ausgabe und wählen Sie eine der drei Kopieroptionen aus:

• Als JavaScript-Literal kopieren Passende Sonderzeichen werden maskiert und der String wird je nach Inhalt in einfache, doppelte oder Backticks gesetzt.
• Kopieren Sie den Stringinhalt. Der genaue Rohstring wird einschließlich neuer Zeilen und anderer Sonderzeichen in die Zwischenablage kopiert.
• Als JSON-Literal kopieren Formatiert den String in gültiges JSON.

Ausdrücke aus dem Verlauf noch einmal ausführen

Drücken Sie die Aufwärtstaste, um durch den Verlauf der JavaScript-Ausdrücke zu blättern, die Sie zuvor in der Konsole ausgeführt haben. Drücken Sie die Eingabetaste, um den Ausdruck noch einmal auszuführen.

Wert eines Ausdrucks in Echtzeit mit Live-Ausdrücken beobachten

Wenn Sie immer wieder denselben JavaScript-Ausdruck in die Konsole eingeben, ist es möglicherweise einfacher, einen Live-Ausdruck zu erstellen. Mit Live-Ausdrücken geben Sie einen Ausdruck einmal ein und pinnen ihn dann oben in der Console an. Der Wert des Ausdrucks wird nahezu in Echtzeit aktualisiert. Weitere Informationen finden Sie unter JavaScript-Ausdruckswerte in Echtzeit mit Live-Ausdrücken ansehen.

Vorzeitige Auswertung deaktivieren

Wenn Sie JavaScript-Ausdrücke in die Console eingeben, wird unter Sofortige Auswertung eine Vorschau des Rückgabewerts dieses Ausdrucks angezeigt. Öffnen Sie die Konsoleneinstellungen und deaktivieren Sie das Kästchen Eager Evaluation, um die Vorschau des Rückgabewerts zu deaktivieren.

Nutzeraktivierung durch Auswertung auslösen

Die Nutzeraktivität ist der Status einer Browser-Sitzung, der von Nutzeraktionen abhängt. Ein Status „aktiv“ bedeutet, dass der Nutzer derzeit mit der Seite interagiert oder seit dem Laden der Seite interagiert hat.

Wenn Sie die Nutzeraktivierung mit einer beliebigen Bewertung auslösen möchten, öffnen Sie die Console-Einstellungen und aktivieren Sie die Option Codeevaluierung als Nutzeraktion behandeln.

Automatische Vervollständigung aus dem Verlauf deaktivieren

Während Sie einen Ausdruck eingeben, werden im Pop-up für die automatische Vervollständigung der Console die zuvor ausgeführten Ausdrücke angezeigt. Diese Ausdrücke werden mit dem Zeichen > vorangestellt. Im folgenden Beispiel wurden document.querySelector('a') und document.querySelector('img') bereits in DevTools ausgewertet.

Öffnen Sie die Konsoleneinstellungen und deaktivieren Sie das Kästchen Automatisch aus dem Verlauf vervollständigen, damit keine Ausdrücke mehr aus Ihrem Verlauf angezeigt werden.

JavaScript-Kontext auswählen

Standardmäßig ist das Drop-down-Menü JavaScript-Kontext auf top (oben) festgelegt. Das entspricht dem Browserkontext des Hauptdokuments.

Angenommen, auf Ihrer Seite ist eine Anzeige in einem <iframe> eingebettet. Sie möchten JavaScript ausführen, um das DOM der Anzeige anzupassen. Wählen Sie dazu zuerst im Drop-down-Menü JavaScript-Kontext den Browserkontext der Anzeige aus.

Objekteigenschaften prüfen

In der Konsole können Sie eine interaktive Liste der Eigenschaften eines von Ihnen angegebenen JavaScript-Objekts aufrufen.

Wenn Sie die Liste durchsuchen möchten, geben Sie den Objektnamen in die Console ein und drücken Sie die Eingabetaste.

Wenn Sie die Eigenschaften von DOM-Objekten prüfen möchten, folgen Sie der Anleitung unter Eigenschaften von DOM-Objekten ansehen.

Eigene und übernommene Properties erkennen

In der Console werden eigene Objekteigenschaften zuerst sortiert und fett formatiert.

Eigenschaften, die aus der Prototypenkette übernommen wurden, sind in normaler Schrift geschrieben. In der Konsole werden sie direkt im Objekt angezeigt, indem die entsprechenden nativen Zugriffsmethoden der integrierten Objekte ausgewertet werden.

Benutzerdefinierte Zugriffsmethoden bewerten

Standardmäßig werden in den DevTools keine von Ihnen erstellten Zugriffsobjekte ausgewertet. Klicken Sie auf (...), um einen benutzerdefinierten Zugriffsmethode für ein Objekt zu bewerten.

Zählbare und nicht zählbare Properties erkennen

Eigenschaften, die gezählt werden können, sind hell. Nicht aufzählbare Properties werden ausgeblendet. Listbare Properties können mit der for … in-Schleife oder der Object.keys()-Methode durchlaufen werden.

Private Eigenschaften von Klasseninstanzen erkennen

In der Konsole werden private Properties von Klasseninstanzen mit dem Präfix # gekennzeichnet.

In der Konsole können auch private Eigenschaften automatisch vervollständigt werden, selbst wenn Sie sie außerhalb des Klassenbereichs auswerten.

Interne JavaScript-Properties prüfen

In Anlehnung an die ECMAScript-Notation werden in der Konsole einige interne JavaScript-Eigenschaften in doppelte eckige Klammern gesetzt. Sie können mit solchen Properties nicht in Ihrem Code interagieren. Es kann jedoch hilfreich sein, sie zu prüfen.

Die folgenden internen Properties können bei verschiedenen Objekten angezeigt werden:

• Jedes Objekt hat einen [[Prototype]].
• Primitive Wrapper haben das Attribut [[PrimitiveValue]].
• ArrayBuffer-Objekte haben die folgenden Eigenschaften:
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]], [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
    Wichtig:Wenn Sie den JavaScript-ArrayBuffer prüfen möchten, auf den sich ein Ansichtsobjekt bezieht, klicken Sie auf die Schaltfläche .
• Neben ArrayBuffer-spezifischen Properties haben WebAssembly.Memory-Objekte auch eine [[WebAssemblyMemory]]-Property.
• Mit Schlüsseln versehene Sammlungen (Zuordnungen und Sätze) haben eine [[Entries]]-Eigenschaft, die die Schlüsseleinträge enthält.
• Promise-Objekte haben die folgenden Eigenschaften:
  • [[PromiseState]]: ausstehend, erfüllt oder abgelehnt
  • [[PromiseResult]]: undefined, wenn ausstehend, <value>, wenn erfüllt, <reason>, wenn abgelehnt
• Proxy-Objekte haben die folgenden Eigenschaften: [[Handler]]-Objekt, [[Target]]-Objekt und [[isRevoked]] (an oder aus).

Funktionen prüfen

In JavaScript sind Funktionen auch Objekte mit Eigenschaften. Wenn Sie jedoch einen Funktionsnamen in die Console eingeben, wird die Funktion in DevTools aufgerufen, anstatt dass ihre Eigenschaften angezeigt werden.

Mit dem Befehl console.dir() können Sie sich interne JavaScript-Funktionseigenschaften ansehen.

Funktionen haben folgende Eigenschaften:

• [[FunctionLocation]]. Ein Link zur Zeile mit der Funktionsdefinition in einer Quelldatei.
• [[Scopes]]: Hier werden Werte und Ausdrücke aufgelistet, auf die die Funktion zugreifen kann. Informationen zum Prüfen von Funktionsbereichen während des Debuggens finden Sie unter Lokale, Closure- und globale Properties ansehen und bearbeiten.
• Gebundene Funktionen haben die folgenden Eigenschaften:
  • [[TargetFunction]]. Das Ziel von bind().
  • [[BoundThis]]: Der Wert von this.
  • [[BoundArgs]]. Ein Array von Funktionsargumenten.
• Generatorfunktionen sind mit einer [[IsGenerator]]: true-Property gekennzeichnet.
• Generatoren geben Iteratorobjekte zurück und haben die folgenden Eigenschaften:
  • [[GeneratorLocation]]. Ein Link zu einer Zeile mit der Generatordefinition in einer Quelldatei.
  • [[GeneratorState]]: suspended, closed oder running.
  • [[GeneratorFunction]]: Der Generator, der das Objekt zurückgegeben hat.
  • [[GeneratorReceiver]]: Ein Objekt, das den Wert empfängt.

Konsole löschen

Sie können die Console mit einem der folgenden Workflows leeren:

• Klicken Sie auf Console löschen .
• Klicken Sie mit der rechten Maustaste auf eine Nachricht und wählen Sie Konsole löschen aus.
• Geben Sie clear() in die Konsole ein und drücken Sie die Eingabetaste.
• Rufen Sie console.clear() über das JavaScript Ihrer Webseite auf.
• Drücken Sie Strg + L, während die Console den Fokus hat.