Auf dieser Seite finden Sie Informationen zu den Funktionen der Chrome-Entwicklertools. Dabei wird davon ausgegangen, dass Sie mit der Konsole zum Anzeigen protokollierter Nachrichten und Ausführen von JavaScript vertraut sind. Falls nicht, lesen Sie Erste Schritte.
Die API-Referenz für Funktionen wie console.log() finden Sie unter Console API-Referenz. 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 + Umschalt + J oder auf einem Mac die Befehlstaste + Wahltaste + J.
Geben Sie zum Öffnen der Konsole über das Befehlsmenü Console ein und führen Sie dann 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 anzeigen aus.
Die Leiste wird unten im Fenster „Entwicklertools“ geöffnet und der Tab Console ist geöffnet.
Wenn Sie den Tab mit der Konsole über das Befehlsmenü öffnen möchten, geben Sie Console ein und führen Sie dann den Befehl Konsole anzeigen aus, neben dem das Symbol Leiste zu sehen ist.
Console-Einstellungen öffnen
Klicken Sie rechts oben in der Console (Konsole) auf Console Settings (Konsoleneinstellungen).
Die einzelnen Einstellungen finden Sie unter den folgenden Links:
- Netzwerk ausblenden
- Protokoll beibehalten
- Nur ausgewählten Kontext
- Ähnliche Nachrichten in der Console gruppieren
- CORS-Fehler in der Konsole anzeigen
- XMLHttpRequests protokollieren
- Eifrige Bewertung
- Automatische Vervollständigung aus dem Verlauf
Seitenleiste der Console öffnen
Klicken Sie auf Seitenleiste der Konsole anzeigen
, um die Seitenleiste anzuzeigen, die zum Filtern hilfreich ist.
E-Mails ansehen
Dieser Abschnitt enthält Funktionen, die ändern, wie Nachrichten in der Konsole dargestellt werden. Unter Nachrichten ansehen finden Sie eine praktische Schritt-für-Schritt-Anleitung.
Nachrichtengruppierung deaktivieren
Öffnen Sie die Konsoleneinstellungen und deaktivieren Sie Ähnliche Gruppe, um das Standardverhalten der Nachrichtengruppierung der Console zu deaktivieren. Ein Beispiel finden Sie unter Log XHR- und Fetch-Anfragen.
Nachrichten an Haltepunkten ansehen
In der Konsole werden Nachrichten, die durch Haltepunkte ausgelöst werden, folgendermaßen markiert:
console.*ruft bedingte Haltepunkte mit einem orangefarbenen Fragezeichen auf.?- Logpoint-Meldungen mit zwei rosa Punkten
..
Wenn Sie im Bereich Quellen zum Inline-Haltepunkteditor wechseln möchten, klicken Sie auf den Ankerlink neben der Haltepunktnachricht.
Stacktraces ansehen
Die Konsole 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.
Um einen Stacktrace anzusehen, klicken Sie neben einem Fehler oder einer Warnung auf das Symbol zum Maximieren .
Fehlerursachen in Stacktraces ansehen
In der Konsole können Sie Verkettungen von Fehlerursachen im Stacktrace anzeigen lassen, falls vorhanden.
Sie können die Fehlerbehebung vereinfachen, indem Sie beim Erkennen und erneuten Ausgeben von Fehlern Fehlerursachen angeben. Während die Console die Ursachenkette durchläuft, wird jeder Fehlerstack mit dem Präfix Caused by: ausgegeben, damit Sie den ursprünglichen Fehler finden können.
Asynchrone Stacktraces ansehen
Wenn dies von dem von Ihnen verwendeten Framework unterstützt wird oder wenn Sie die Browser-Planungs-Primitive wie setTimeout direkt verwenden, können die Entwicklertools asynchrone Vorgänge verfolgen, indem sie beide Teile des asynchronen Codes miteinander verknüpfen.
In diesem Fall zeigt der Stacktrace die vollständige Geschichte des asynchronen Vorgangs an.
Bekannte Drittanbieter-Frames in Stacktraces anzeigen
Wenn Quellzuordnungen das Feld ignoreList standardmäßig enthalten, blendet die Console in Stacktraces die Frames von Drittanbietern aus Quellen aus, die von Bundlern (z. B. Webpack) oder Frameworks (z. B. Angular) generiert wurden.
Wenn Sie sich 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 Option Einstellungen > Ignorieren-Liste > Bekannte Drittanbieter-Skripts automatisch zur Ignorieren-Liste hinzufügen.
XHR- und Fetch-Anfragen protokollieren
Öffnen Sie die Konsoleneinstellungen und aktivieren Sie Log XMLHttpRequests, um alle XMLHttpRequest- und Fetch-Anfragen in der Konsole zu protokollieren.
Die oberste Nachricht im Beispiel oben zeigt das Standardgruppierungsverhalten der Console. Das folgende Beispiel zeigt, wie dasselbe Log nach der Deaktivierung der Nachrichtengruppierung aussieht.
Nachrichten beim Seitenaufbau beibehalten
Standardmäßig wird die Konsole gelöscht, sobald eine neue Seite geladen wird. Damit Nachrichten beim Seitenaufbau beibehalten werden, öffnen Sie die Console-Einstellungen und klicken Sie das Kästchen Protokoll beibehalten 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.
- Klicken Sie das Kästchen Netzwerk ausblenden an.
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:
- Ö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 eine potenzielle Lösung auf dem Tab Probleme 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.*-Methoden Schweregrade zu.
Es gibt vier Ebenen:
VerboseInfoWarningError
Beispiel: console.log() ist in der Gruppe Info, während console.error() in der Gruppe Error ist. 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 müssen Sie die Seitenleiste der Console öffnen und dann auf Fehler, Warnungen, Info oder Ausführlich klicken.
Nachrichten nach URL filtern
Geben Sie url: gefolgt von einer URL ein, um nur Nachrichten anzusehen, die von dieser URL gesendet wurden. Nachdem du url: eingegeben hast, werden in den Entwicklertools alle relevanten URLs angezeigt.
Domains funktionieren auch. Wenn https://example.com/a.js und https://example.com/b.js beispielsweise Nachrichten protokollieren, können Sie sich mit url:https://example.com auf die Nachrichten aus diesen beiden Skripts 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 Filter für eine auszuschließende URL.
Sie können sich auch Nachrichten von einer einzelnen URL anzeigen lassen. Dazu öffnen Sie die Seitenleiste der Console, maximieren Sie den Bereich Nutzernachrichten und klicken Sie dann auf die URL des Skripts, das die Nachrichten enthält, auf die Sie sich konzentrieren möchten.
Nachrichten aus verschiedenen Kontexten herausfiltern
Angenommen, Sie hätten 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 zugehörigen Nachrichten ausblenden, indem Sie die Konsoleneinstellungen öffnen und das Kästchen Nur ausgewählter Kontext anklicken.
Nachrichten herausfiltern, die nicht dem Muster eines regulären Ausdrucks entsprechen
Geben Sie in das Textfeld Filter einen regulären Ausdruck wie /[foo]\s[bar]/ ein, um alle 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.
Nach Text in Protokollen suchen
So suchen Sie nach Text in Logeinträgen:
- Drücken Sie zum Öffnen der integrierten Suchleiste 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 bei der Anfrage die Groß-/Kleinschreibung beachtet wird.
- Klicken Sie auf
Regulären Ausdruck verwenden, um mit einem RegEx-Ausdruck zu suchen.
- Klicken Sie auf
- Drücken Sie die Eingabetaste. Um zum vorherigen oder nächsten Suchergebnis zu springen, drücke die Auf- oder Abwärtspfeiltaste.
JavaScript ausführen
Dieser Abschnitt enthält Funktionen, die sich auf das Ausführen von JavaScript in der Console beziehen. Eine praxisorientierte Schritt-für-Schritt-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 zwischen drei Kopieroptionen:
- Als JavaScript-Literal kopieren: Maskiert entsprechende Sonderzeichen und setzt den String je nach Inhalt entweder in einfache Anführungszeichen, doppelte Anführungszeichen oder Backticks ein.
- Stringinhalt kopieren. Kopiert den exakten Rohstring in die Zwischenablage, einschließlich neuer Zeilen und anderer Sonderzeichen.
- Als JSON-Literal kopieren: Formatiert den String in gültigem 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 Expressions den Wert eines Ausdrucks in Echtzeit beobachten
Wenn Sie denselben JavaScript-Ausdruck mehrmals in der Console eingeben müssen, 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 der Console eingeben, zeigt Eager Evaluation eine Vorschau des Rückgabewerts dieses Ausdrucks an. Öffnen Sie die Konsoleneinstellungen und deaktivieren Sie das Kästchen Eager Evaluation, um die Rückgabewertvorschauen 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 Seitenaufbau aktiv ist.
Wenn Sie die Nutzeraktivierung bei einer beliebigen Bewertung auslösen möchten, öffnen Sie die Console-Einstellungen und klicken Sie auf das Kästchen Trigger der Nutzeraktivierung bewerten.
Automatische Vervollständigung aus dem Verlauf deaktivieren
Wenn Sie einen Ausdruck eingeben, werden im Pop-up zur automatischen Vervollständigung in der Console die zuvor ausgeführten Ausdrücke angezeigt. Diesen Ausdrücken wird das Zeichen > vorangestellt. Im folgenden Beispiel haben die Entwicklertools zuvor document.querySelector('a') und document.querySelector('img') ausgewertet.
Wenn keine Ausdrücke mehr aus dem Verlauf angezeigt werden sollen, öffnen Sie die Console-Einstellungen und deaktivieren Sie das Kästchen Automatische Vervollständigung anhand des Verlaufs.
JavaScript-Kontext auswählen
Standardmäßig ist das Drop-down-Menü JavaScript-Kontext auf top eingestellt, das den Browserkontext des Hauptdokuments darstellt.
Angenommen, Sie haben eine Anzeige auf Ihrer Seite, die in ein <iframe> eingebettet ist. 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 Browserkontext der Anzeige auswählen.
Objekteigenschaften prüfen
Die Konsole kann eine interaktive Liste von Eigenschaften eines von Ihnen angegebenen JavaScript-Objekts anzeigen.
Geben Sie den Objektnamen in das Feld Console ein und drücken Sie die Eingabetaste, um die Liste zu durchsuchen.
Gehen Sie wie unter Eigenschaften von DOM-Objekten ansehen beschrieben vor, um die Eigenschaften von DOM-Objekten zu überprüfen.
Eigene und übernommene Properties des Spots
Die Konsole sortiert zuerst eigene Objekteigenschaften und hebt sie in Fettdruck hervor.
Von der Prototypkette übernommene Eigenschaften haben eine normale Schriftart. Die Console zeigt sie auf dem Objekt selbst an, indem die entsprechenden nativen Zugriffsmethoden für integrierte Objekte ausgewertet werden.
Benutzerdefinierte Zugriffsfunktionen bewerten
Von den Entwicklertools werden von Ihnen erstellte Zugriffsberechtigungen standardmäßig nicht bewertet.
Klicken Sie auf
(...), um eine benutzerdefinierte Zugriffsfunktion für ein Objekt auszuwerten.
Spot-Aufzählbare und nicht aufzählbare Attribute
Enumerierbare Eigenschaften sind farbig. Nicht aufzählbare Attribute werden ausgeblendet.
Auflistbare Attribute können mit der
for … in-Schleife oder der Object.keys()-Methode iteriert werden.
Private Attribute von Klasseninstanzen erkennen
Die Console bestimmt private Properties von Klasseninstanzen mit dem Präfix #.
Die Console kann private Attribute auch dann automatisch vervollständigen, wenn sie außerhalb des Klassenbereichs ausgewertet werden.
Interne JavaScript-Attribute prüfen
Die Konsole 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.
Für verschiedene Objekte werden möglicherweise die folgenden internen Attribute angezeigt:
- Jedes Objekt hat ein
[[Prototype]]. - Primitive Wrapper haben die Eigenschaft
[[PrimitiveValue]]. ArrayBuffer-Objekte haben die folgenden Attribute:- Zusätzlich zu
ArrayBuffer-spezifischen Attributen habenWebAssembly.Memory-Objekte ein[[WebAssemblyMemory]]-Attribut. - Schlüsselsammlungen (Karten und Sets) haben eine
[[Entries]]-Eigenschaft, die die zugehörigen Einträge enthält. Promise-Objekte haben die folgenden Attribute:[[PromiseState]]: ausstehend, ausgeführt oder abgelehnt[[PromiseResult]]:undefined, wenn ausstehend,<value>, wenn erledigt,<reason>, wenn abgelehnt
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 den Entwicklertools aufgerufen, anstatt seine Eigenschaften anzuzeigen.
Verwenden Sie den Befehl console.dir(), um JavaScript-interne Funktionseigenschaften anzusehen.
Funktionen haben folgende Attribute:
[[FunctionLocation]]: Ein Link zur Zeile mit der Funktionsdefinition in einer Quelldatei.[[Scopes]]: Listet die Werte und Ausdrücke auf, auf die die Funktion Zugriff hat. Informationen zum Prüfen von Funktionsbereichen während der Fehlerbehebung finden Sie unter Lokale, Closure- und globale Attribute ansehen und bearbeiten.- Gebundene Funktionen haben die folgenden Eigenschaften:
[[TargetFunction]]. Das Ziel vonbind().[[BoundThis]]. Der Wert vonthis.[[BoundArgs]]: Ein Array von Funktionsargumenten.
- Generatorfunktionen sind mit dem Attribut
[[IsGenerator]]: truegekennzeichnet. - Generatoren geben Iterator-Objekte zurück und haben folgende Eigenschaften:
[[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.
Speicherinhalt 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 dann 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.