Auf dieser Seite finden Sie Informationen zu den Funktionen der Chrome-Entwicklertools-Konsole. Dabei wird davon ausgegangen, dass Sie mit der Konsole zum Anzeigen protokollierter Nachrichten und Ausführen von JavaScript vertraut sind. Ist dies nicht der Fall, lesen Sie unter Erste Schritte nach.
Die API-Referenz für Funktionen wie console.log() findest du in der Referenz zur Console API. Informationen zu Funktionen wie monitorEvents() finden Sie in der Referenz zur Console Utilities API.
Console öffnen
Sie können die Konsole als Bereich oder als Tab in der Leiste öffnen.
Konsolenbereich öffnen
Drücken Sie Strg + Umschalttaste + J oder auf einem Mac die Befehlstaste + Wahltaste + J.
Geben Sie zum Öffnen der Konsole über das Befehlsmenü Console ein und führen Sie den Befehl Konsole anzeigen aus, neben dem das Symbol Steuerfeld zu sehen ist.
Konsole in der Leiste öffnen
Drücken Sie die Esc-Taste oder klicken Sie auf Entwicklertools anpassen und steuern
und wählen Sie dann Konsolenleiste einblenden aus.
Die Leiste wird unten im Fenster „Entwicklertools“ eingeblendet und der Tab Console ist geöffnet.
Geben Sie zum Öffnen des Tabs „Konsole“ über das Befehlsmenü Console ein und führen Sie den Befehl Konsole anzeigen aus, neben dem das Symbol Drawer zu sehen ist.
Konsoleneinstellungen öffnen
Klicken Sie rechts oben in der Console (Konsole) auf 
Console Settings (Konsoleneinstellungen).
Die einzelnen Einstellungen werden unter den folgenden Links erläutert:
- Netzwerk ausblenden
- Protokoll beibehalten
- Nur ausgewählten Kontext
- Ähnliche Nachrichten in der Console gruppieren
- CORS-Fehler in der Konsole anzeigen
- XMLHttpRequests protokollieren
- Eifrige Auswertung
- Automatische Vervollständigung aus dem Verlauf
Seitenleiste der Console öffnen
Klicken Sie auf Seitenleiste der Console anzeigen
, um die Seitenleiste einzublenden, die zum Filtern hilfreich ist.
Nachrichten ansehen
Dieser Abschnitt enthält Funktionen, die die Darstellung von Nachrichten in der Konsole ändern. Unter Nachrichten ansehen finden Sie eine praktische Schritt-für-Schritt-Anleitung.
Nachrichtengruppierung deaktivieren
Öffnen Sie die Console-Einstellungen und deaktivieren Sie Ähnliche Gruppen, um das Standardverhalten für die Nachrichtengruppierung der Console zu deaktivieren. Ein Beispiel finden Sie unter XHR- und Abrufanfragen protokollieren.
Nachrichten an Haltepunkten ansehen
In der Console werden Nachrichten, die durch Haltepunkte ausgelöst werden, folgendermaßen markiert:
console.*-Aufrufe in bedingten Haltepunkten mit einem orangefarbenen Fragezeichen?- Logpoint-Meldungen mit zwei pinken Punkten
..
Wenn Sie im Bereich Quellen zum Inline-Haltepunkteditor wechseln möchten, klicken Sie auf den Ankerlink neben der Haltepunktnachricht.
Stacktraces ansehen
Die Console erfasst automatisch Stacktraces für Fehler und Warnungen. Ein Stacktrace 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 neueste Frame befindet sich oben.
Klicken Sie zum Aufrufen eines Stacktrace auf das Symbol zum Maximieren 
neben einem Fehler oder einer Warnung.
Asynchrone Stacktraces ansehen
Wenn das von Ihnen verwendete Framework unterstützt wird oder wenn Sie die Planungselemente des Browsers wie setTimeout direkt verwenden, können die Entwicklertools asynchrone Vorgänge verfolgen, indem beide Teile des asynchronen Codes miteinander verknüpft werden.
In diesem Fall zeigt der Stacktrace den vollständigen Überblick über den asynchronen Vorgang.
Bekannte Frames von Drittanbietern in Stacktraces anzeigen
Wenn Quellzuordnungen das Feld ignoreList standardmäßig enthalten, blendet die Console die Frames von Drittanbietern in Stacktraces aus Quellen aus, die von Bundlern (z. B. Webpack) oder Frameworks (z. B. Angular) generiert wurden.
Wenn Sie den vollständigen Stacktrace einschließlich Frames von Drittanbietern ansehen möchten, klicken Sie unten im Stacktrace auf N weitere Frames anzeigen.
Wenn Sie immer den vollständigen Stacktrace sehen möchten, deaktivieren Sie die Einstellung 
Einstellungen > Ignorieren-Liste > Bekannte Drittanbieter-Skripts automatisch zur Ignorieren-Liste hinzufügen.
XHR- und Fetch-Anfragen protokollieren
Öffnen Sie die Konsoleneinstellungen und aktivieren Sie XMLHttpRequests protokollieren, um alle XMLHttpRequest- und Fetch-Anfragen an die Console zu protokollieren.
Die oberste Nachricht im Beispiel oben zeigt das Standardverhalten der Console für die Gruppierung. Das folgende Beispiel zeigt, wie dasselbe Log nach der Deaktivierung der Nachrichtengruppierung aussieht.
Nachrichten über Seitenaufbau hinweg beibehalten
Standardmäßig wird die Konsole gelöscht, wenn Sie eine neue Seite laden. Damit Nachrichten auch nach mehreren Seitenaufbauvorgängen erhalten bleiben, öffnen Sie die Console-Einstellungen und klicken Sie das Kästchen Preserve Log an.
Netzwerknachrichten ausblenden
Standardmäßig protokolliert der Browser Netzwerkmeldungen in der Console. Die oberste Nachricht im folgenden Beispiel stellt einen 404-Fehler dar.
So blenden Sie Netzwerknachrichten aus:
- Öffnen Sie die Console-Einstellungen.
- Aktivieren Sie das Kontrollkästchen Netzwerk ausblenden.
CORS-Fehler ein- oder ausblenden
In der Console werden CORS-Fehler angezeigt, wenn Netzwerkanfragen aufgrund von Cross-Origin Resource Sharing (CORS) fehlschlagen.
So blenden Sie CORS-Fehler ein oder aus:
- Öffnen Sie die Console-Einstellungen.
- Klicken Sie das Kästchen CORS-Fehler in der Konsole anzeigen an oder entfernen Sie das Häkchen.
Wenn die Konsole so eingestellt ist, dass CORS-Fehler angezeigt werden und diese auftreten, können Sie auf die folgenden Schaltflächen neben den Fehlern 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
Öffnen Sie die Seitenleiste der Console und klicken Sie auf Nutzernachrichten, damit nur Nachrichten angezeigt werden, die vom JavaScript der Seite stammen.
Nach Logebene filtern
Die Entwicklertools weisen den meisten console.*-Methodenschweregraden zu.
Es gibt vier Ebenen:
VerboseInfoWarningError
Beispielsweise befindet sich console.log() in der Gruppe Info, während sich console.error() in der Gruppe Error befindet. In der Console API-Referenz wird der Schweregrad der einzelnen Methoden beschrieben.
Jede Nachricht, die der Browser in der Console protokolliert, hat auch eine Wichtigkeitsstufe. Sie können jede Ebene von Nachrichten 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 die Meldungen Verbose, Info, Warning oder Error zu aktivieren oder zu deaktivieren.
Sie können auch nach Logebene filtern. Dazu 
öffnen Sie die Seitenleiste der Console und klicken Sie dann auf Fehler, Warnungen, Info oder Ausführlich.
Nachrichten nach URL filtern
Geben Sie url: gefolgt von einer URL ein, um nur Nachrichten aufzurufen, die von dieser URL gesendet wurden. Nachdem du url: eingegeben hast, werden in den Entwicklertools alle relevanten URLs angezeigt.
Domains funktionieren auch. Wenn beispielsweise https://example.com/a.js und https://example.com/b.js Meldungen protokollieren, können Sie sich mit url:https://example.com auf die Nachrichten aus diesen beiden Skripts konzentrieren.
Um alle Nachrichten von einer bestimmten URL auszublenden, geben Sie -url: gefolgt von der URL ein, z. B. https://b.wal.co. Dies ist ein Filter für auszuschließende URLs.
Sie können auch Nachrichten von einer einzelnen URL aufrufen. Öffnen Sie dazu die Seitenleiste der Console, maximieren Sie den Bereich Nutzernachrichten und klicken Sie dann auf die URL des Skripts, das die gewünschten Nachrichten enthält.
Nachrichten aus verschiedenen Kontexten herausfiltern
Angenommen, Sie haben eine Anzeige auf Ihrer Seite. Die Anzeige ist in eine <iframe> eingebettet und generiert viele Meldungen in der Console. Da sich diese Anzeige in einem anderen JavaScript-Kontext befindet, können Sie die Meldungen ausblenden, indem Sie die Konsoleneinstellungen öffnen und das Kästchen Nur ausgewählter Kontext anklicken.
Nachrichten herausfiltern, die nicht mit einem Muster für reguläre Ausdrücke übereinstimmen
Geben Sie in das Textfeld Filter einen regulären Ausdruck wie /[foo]\s[bar]/ ein, um Nachrichten herauszufiltern, die diesem Muster nicht entsprechen. Leerzeichen werden nicht unterstützt. Verwende stattdessen \s. Die Entwicklertools prüfen, ob das Muster im Nachrichtentext oder im Skript gefunden wurde, das die Protokollierung der Meldung ausgelöst hat.
Im folgenden Beispiel werden alle Nachrichten herausgefiltert, die nicht mit /[gm][ta][mi]/ übereinstimmen.
![Es werden alle Nachrichten herausgefiltert, die nicht mit /[gm][ta][mi]/ übereinstimmen.](https://developer.chrome.google.cn/static/docs/devtools/console/reference/image/filtering-any-messages-82d76b2bac549.png?hl=de)
In Protokollen nach Text suchen
So suchen Sie nach Text in Protokollnachrichten:
- Um eine integrierte Suchleiste zu öffnen, drücken Sie Befehlstaste + F (Mac) oder Strg + F (Windows, Linux).
- Geben Sie Ihre Abfrage in die Leiste ein. In diesem Beispiel lautet die Abfrage
legacy.
Optional haben Sie folgende Möglichkeiten:
- Klicken Sie auf
Groß-/Kleinschreibung beachten, damit die Groß-/Kleinschreibung bei der Suchanfrage berücksichtigt wird. - Klicken Sie auf
Regulären Ausdruck verwenden, um anhand eines regulären Ausdrucks zu suchen.
- Klicken Sie auf
- Drücken Sie die Eingabetaste. Um zum vorherigen oder nächsten Suchergebnis zu springen, drücke die Aufwärts- oder Abwärtspfeiltaste.
JavaScript ausführen
Dieser Abschnitt enthält Funktionen zum Ausführen von JavaScript in der Console. Praktische Komplettlösung 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 zwischen drei Kopieroptionen aus:
- Als JavaScript-Literal kopieren: Maskiert geeignete Sonderzeichen und setzt den String je nach Inhalt entweder in einfache, doppelte Anführungszeichen oder Graviszeichen ein.
- Stringinhalt kopieren. Kopiert den exakten Rohstring in die Zwischenablage, einschließlich neuer Zeilen und anderer Sonderzeichen.
- Als JSON-Literal kopieren: Formatiert den String als gültiges JSON-Format.
Ausdrücke aus dem Verlauf noch einmal ausführen
Drücken Sie den Aufwärtspfeil, um den Verlauf der JavaScript-Ausdrücke zu durchlaufen, die Sie zuvor in der Console ausgeführt haben. Drücken Sie die Eingabetaste, um den Ausdruck noch einmal auszuführen.
Mit Live-Ausdrücken den Wert eines Ausdrucks in Echtzeit beobachten
Wenn Sie denselben JavaScript-Ausdruck mehrmals in der Console 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.
Eager-Bewertung deaktivieren
Während Sie JavaScript-Ausdrücke in die Console eingeben, wird unter Eager Evaluation eine Vorschau des Rückgabewerts dieses Ausdrucks angezeigt. Öffnen Sie die Console-Einstellungen und deaktivieren Sie das Kästchen Eager Evaluation, um die Vorschau der Rückgabewerte zu deaktivieren.
Nutzeraktivierung mit Bewertung auslösen
Die Nutzeraktivierung ist der Status einer Browsersitzung, der von Nutzeraktionen abhängt. Der Status „Aktiv“ bedeutet, dass der Nutzer gerade 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 Einstellungen der Console und klicken Sie auf das Kästchen 
Auswertung löst Nutzeraktivierung aus.
Automatische Vervollständigung aus dem Verlauf deaktivieren
Wenn Sie einen Ausdruck eingeben, werden im Pop-up zur automatischen Vervollständigung der Konsole die Ausdrücke angezeigt, die Sie zuvor ausgeführt haben. Diesen Ausdrücken wird das Zeichen > vorangestellt. Im folgenden Beispiel wurden document.querySelector('a') und document.querySelector('img') von den Entwicklertools zuvor ausgewertet.
Öffnen Sie die Console-Einstellungen und deaktivieren Sie das Kästchen Automatische Vervollständigung aus dem Verlauf, damit keine Ausdrücke aus Ihrem Verlauf angezeigt werden.
JavaScript-Kontext auswählen
Die Drop-down-Liste JavaScript-Kontext ist standardmäßig auf top gesetzt. Dieser Wert entspricht dem Browserkontext des Hauptdokuments.
Angenommen, auf Ihrer Seite ist eine Anzeige in ein <iframe> eingebettet. Sie möchten JavaScript ausführen,
um das DOM der Anzeige zu optimieren. Dazu müssen Sie zuerst im Drop-down-Menü JavaScript-Kontext den Suchkontext der Anzeige auswählen.
Objektattribute untersuchen
Die Console kann eine interaktive Liste von Eigenschaften eines von Ihnen angegebenen JavaScript-Objekts anzeigen.
Um die Liste zu durchsuchen, geben Sie den Objektnamen in das Feld Console ein und drücken Sie die Eingabetaste.
Um die Attribute von DOM-Objekten zu überprüfen, führen Sie die Schritte unter Eigenschaften von DOM-Objekten ansehen aus.
Spot-eigene und übernommene Eigenschaften
Die Konsole sortiert zuerst eigene Objekteigenschaften und hebt sie in Fettschrift hervor.
Von der Prototypkette übernommene Eigenschaften werden in normaler Schriftart angezeigt. Die Console zeigt sie im Objekt selbst an, indem die entsprechenden nativen Zugriffsmethoden für integrierte Objekte ausgewertet werden.
Benutzerdefinierte Zugriffsfunktionen bewerten
Standardmäßig werden von den Entwicklertools von Ihnen erstellte Zugriffsmethoden nicht bewertet.
Klicken Sie auf (...), um eine benutzerdefinierte Zugriffsfunktion für ein Objekt auszuwerten.
Aufzählbare und nicht aufzählbare Spot-Properties
Enumerierbare Eigenschaften sind in heller Farbe. Nicht aufzählbare Attribute werden ausgeblendet.
Aufzählbare Attribute können mit der for … in-Schleife oder der Object.keys()-Methode iteriert werden.
Private Attribute von Klasseninstanzen erkennen
Die Console legt private Properties von Klasseninstanzen mit dem Präfix # fest.
Die Console kann private Eigenschaften auch automatisch vervollständigen, wenn sie außerhalb des Klassenbereichs ausgewertet werden.
Interne JavaScript-Attribute prüfen
Die Console basiert auf der ECMAScript-Notation und enthält einige JavaScript-interne Eigenschaften in doppelten eckigen Klammern. Sie können mit solchen Attributen in Ihrem Code nicht interagieren. Es kann jedoch nützlich sein, sie zu überprüfen.
Die folgenden internen Attribute können für verschiedene Objekte angezeigt werden:
- Jedes Objekt hat einen
[[Prototype]].
- Primitive Wrapper haben das Attribut
[[PrimitiveValue]].
ArrayBuffer-Objekte haben die folgenden Attribute:- Zusätzlich zu
ArrayBuffer-spezifischen Attributen habenWebAssembly.Memory-Objekte ein[[WebAssemblyMemory]]-Attribut.
- Schlüsselsammlungen (Zuordnungen und Sets) haben ein
[[Entries]]-Attribut, das die zugehörigen Einträge enthält.
Promise-Objekte haben die folgenden Attribute:[[PromiseState]]: ausstehend, ausgeführt 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]](deaktiviert oder nicht).
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 seine Eigenschaften anzuzeigen.
Wenn Sie Funktionseigenschaften intern in JavaScript ansehen möchten, verwenden Sie den Befehl console.dir().
Funktionen haben folgende Eigenschaften:
[[FunctionLocation]]: Ein Link zur Zeile mit der Funktionsdefinition in einer Quelldatei.[[Scopes]]: Listet die Werte und Ausdrücke auf, auf die die Funktion zugreifen kann. Informationen zum Prüfen von Funktionsbereichen während der Fehlerbehebung finden Sie unter Lokale, Geschlossenheits- und globale Eigenschaften ansehen und bearbeiten.- Gebundene Funktionen haben die folgenden Attribute:
[[TargetFunction]]: Das Ziel vonbind().[[BoundThis]]. Der Wert vonthis.[[BoundArgs]]: Ein Array von Funktionsargumenten.
- Generatorfunktionen sind mit dem Attribut
[[IsGenerator]]: truegekennzeichnet.
- Generatoren geben Iterationsobjekte zurück und haben folgende Attribute:
[[GeneratorLocation]]: Ein Link zu einer Zeile mit der Generatordefinition in einer Quelldatei.[[GeneratorState]]:suspended,closedoderrunning.[[GeneratorFunction]]: Generator, der das Objekt zurückgegeben hat[[GeneratorReceiver]]: Ein Objekt, das den Wert empfängt.
Daten aus der Konsole löschen
Sie können einen der folgenden Workflows verwenden, um die Konsole zu löschen:
- Klicken Sie auf Konsole löschen
. - Klicken Sie mit der rechten Maustaste auf eine Nachricht und wählen Sie Konsole löschen aus.
- Geben Sie
clear()in die Console ein und drücken Sie die Eingabetaste. - Rufen Sie
console.clear()über den JavaScript-Code Ihrer Webseite auf. - Drücken Sie Strg + L, während die Konsole im Fokus ist.