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. Informationen zu Funktionen wie monitorEvents() finden Sie in der Referenz zur Console Utilities API.
Console öffnen
Sie können die Console als Steuerfeld oder als Tab im Navigationsbereich öffnen.
Konsolenbereich ö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.
Unter den folgenden Links finden Sie eine Erläuterung der einzelnen Einstellungen:
- Netzwerk ausblenden
- Protokoll beibehalten
- Nur ausgewählten 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 praxisorientierte 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 Log-XHR- und Fetch-Anfragen.
Nachrichten von Haltepunkten ansehen
In der Konsole werden durch Haltepunkte ausgelöste Nachrichten wie folgt gekennzeichnet:
console.*ruft in bedingten Haltepunkten 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 Symbol .
Fehlerursachen in Stack-Traces ansehen
In der Console können im Stacktrace gegebenenfalls Verkettungen von Fehlerursachen angezeigt werden.
Sie können die Fehlerbehebung vereinfachen, indem Sie Fehlerursachen angeben, wenn Sie Fehler abfangen und noch einmal ausgeben. 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.
Asynchrone Stacktraces ansehen
Wenn das von Ihnen verwendete Framework dies unterstützt 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.
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 aufrufen 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 obigen Beispiel zeigt das Standard-Gruppierungsverhalten der Konsole. 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 stellt beispielsweise einen 404-Fehler dar.
So blenden Sie Netzwerk-Benachrichtigungen aus:
- Konsoleneinstellungen öffnen
- Klicken Sie das Kästchen Netzwerk ausblenden an.
CORS-Fehler ein- oder ausblenden
In der Console können CORS-Fehler angezeigt werden, wenn Netzwerkanfragen aufgrund von Cross-Origin Resource Sharing (CORS) fehlschlagen.
So blenden Sie CORS-Fehler ein oder aus:
- Konsoleneinstellungen öffnen
- Klicken Sie das Kästchen CORS-Fehler in der Konsole anzeigen an oder entfernen Sie das Häkchen.
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
TypeErrorim 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.
Browsermeldungen herausfiltern
Öffne die Seitenleiste der Console und klicke auf Nutzermitteilungen, um nur Nachrichten anzuzeigen, die vom JavaScript der Seite stammen.
Nach Logebene filtern
In den Entwicklertools werden die meisten der console.*-Methoden Schweregrade zugewiesen.
Es gibt vier Stufen:
VerboseInfoWarningError
console.log() befindet sich beispielsweise in der Gruppe Info, während sich console.error() in der Gruppe Error befindet. 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, auf Ihrer Seite wird eine Anzeige geschaltet. 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. Verwende stattdessen \s. In 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:
- Drücken Sie Befehlstaste + F (Mac) oder Strg + F (Windows, Linux), um eine integrierte Suchleiste zu öffnen.
- 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.
- Klicken Sie auf
- Drücken Sie die Eingabetaste. Wenn Sie zum vorherigen oder nächsten Suchergebnis springen möchten, drücken Sie die Auf- oder Abwärtstaste.
JavaScript ausführen
Dieser Abschnitt enthält Funktionen zum Ausführen von JavaScript in der Konsole. Eine praktische Anleitung finden Sie unter JavaScript ausführen.
Optionen zum Kopieren von Strings
Die Konsole gibt Strings standardmäßig als gültige JavaScript-Literale aus. 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.
- Stringinhalt kopieren Kopiert den exakten Rohstring einschließlich neuer Zeilen und anderer Sonderzeichen in die Zwischenablage.
- 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. Siehe 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 Nutzeraktivierung ist der Status einer Browsersitzung, der von Nutzeraktionen abhängig ist. Der Status „Aktiv“ bedeutet, dass der Nutzer derzeit mit der Seite interagiert oder seit dem Seitenaufbau 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. Diesen Ausdrücken wird das 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 zu optimieren. Dazu müssen Sie zuerst den Browserkontext der Anzeige im Drop-down-Menü JavaScript-Kontext auswählen.
Objektattribute prüfen
Die Console kann eine interaktive Liste mit Eigenschaften eines von Ihnen angegebenen JavaScript-Objekts anzeigen.
Wenn Sie die Liste durchsuchen möchten, geben Sie den Objektnamen in die Console ein und drücken Sie die Eingabetaste.
Um die Eigenschaften von DOM-Objekten zu überprüfen, führen Sie die Schritte unter Eigenschaften von DOM-Objekten ansehen aus.
Eigene und übernommene Properties erkennen
Die Console sortiert zuerst eigene Objekteigenschaften und hebt sie fett formatiert hervor.
Eigenschaften, die aus der Prototyp-Kette übernommen wurden, sind in normaler Schrift dargestellt. In der Konsole werden sie direkt im Objekt angezeigt, indem die entsprechenden nativen Zugriffsmethoden der vordefinierten 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 Unterkünfte erkennen
Aufzählbare Eigenschaften haben eine helle Farbe. Nicht aufzählbare Attribute 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-Attribute 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:- Neben
ArrayBuffer-spezifischen Properties habenWebAssembly.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 Attribute:[[PromiseState]]: ausstehend, erfüllt oder abgelehnt[[PromiseResult]]:undefinedbei ausstehender Genehmigung,<value>bei Ausführung,<reason>bei Ablehnung
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 er von DevTools aufgerufen, anstatt dass seine 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 folgende Eigenschaften:
[[TargetFunction]]. Das Ziel vonbind().[[BoundThis]]: Der Wert vonthis.[[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,closedoderrunning.[[GeneratorFunction]]: Der Generator, der das Objekt zurückgegeben hat.[[GeneratorReceiver]]: Ein Objekt, das den Wert empfängt.
Konsole löschen
Sie können einen der folgenden Workflows verwenden, um den Speicherinhalt der Console zu löschen:
- 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 Konsole im Fokus ist.