Referenz zu Konsolenfeatures

Dieser Artikel enthält eine Übersicht über die Features der Konsole.

Inhalt:

• Öffnen der Konsole
  • Öffnen Sie das Konsolentool in der Aktivitätsleiste.
  • Öffnen des Konsolentools in der Symbolleiste "Schnellansicht"
  • Öffnen Sie die Konsole über das Befehlsmenü.
  • Konsoleneinstellungen öffnen
  • Öffnen der Randleiste zum Filtern von Nachrichten
• Anzeigen von Nachrichten
  • Deaktivieren der Nachrichtengruppierung
  • Protokollieren von XHR- und Fetch-Anforderungen
  • Beibehalten von Nachrichten über Seitenladevorgänge hinweg
  • Netzwerkfehler ausblenden
  • Erläutern von Konsolenfehlern und -warnungen mithilfe von Copilot in Edge
• Filtern von Nachrichten
  • Herausfiltern von Browsernachrichten
  • Filtern nach Protokollebene
  • Filtern von Nachrichten nach Skript-URL
    • Umkehren des Filters mit einem negativen URL-Filter
    • Anzeigen von Nachrichten aus einem einzelnen Skript mithilfe der Randleiste
  • Filtern von Nachrichten aus verschiedenen JavaScript-Kontexten
  • Filtern von Nachrichten mithilfe eines Musters für reguläre Ausdrücke
• Ausführen von JavaScript
  • Erneutes Ausführen von Ausdrücken mithilfe des Konsolenverlaufs
  • Überwachen des Werts eines Ausdrucks in Echtzeit mithilfe eines Liveausdrucks
  • Auswerten von JavaScript-Ausdrücken während der Eingabe deaktivieren
  • Deaktivieren der automatischen Vervollständigung aus dem Verlauf
  • Auswählen eines Kontexts zum Ausführen von JavaScript-Ausdrücken
• Löschen der Konsole

Öffnen der Konsole

Sie können das Konsolentool entweder in der Aktivitätsleiste oder in der Symbolleiste Schnellansicht öffnen.

Öffnen Sie das Konsolentool in der Aktivitätsleiste.

Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). DevTools wird geöffnet, wobei die Registerkarte für das Konsolentool in der Aktivitätsleiste ausgewählt ist:

Öffnen des Konsolentools in der Symbolleiste "Schnellansicht"

Um das Konsolentool in der Symbolleiste "Schnellansicht" zu öffnen, drücken Sie unten im Fenster DevTools esc. Wenn die Symbolleiste "Schnellansicht" zuvor ausgeblendet war, wird folgendes angezeigt:

Oder klicken Sie auf Anpassen und Steuern von DevTools (...) >Umschalten des Bereichs "Schnellansicht".

Öffnen Sie die Konsole über das Befehlsmenü.

So öffnen Sie das Konsolentool über das Befehlsmenü:

1. Drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS).

   Das Befehlsmenü wird zunächst mit einem > Zeichen geöffnet, das dem Textfeld vorangestellt ist.

2. Geben Sie Konsole anzeigen ein, und wählen Sie dann eine der Optionen Konsole anzeigen aus:

   • Um die Konsole in der Aktivitätsleiste zu öffnen, wählen Sie die Option mit dem Badge Panel daneben aus.
   • Um die Konsole in der Symbolleiste Schnellansicht zu öffnen, wählen Sie die Option mit dem Badge "Schnellansicht " daneben aus.

   

Weitere Informationen zum Befehlsmenü finden Sie unter Ausführen von Befehlen im Befehlsmenü.

Konsoleneinstellungen öffnen

Um die Einstellungen des Konsolentools zu ändern, klicken Sie auf die Schaltfläche Konsoleneinstellungen (). Der Abschnitt "Einstellungen" wird angezeigt:

Öffnen der Randleiste zum Filtern von Nachrichten

Um die Randleiste in der Konsole anzuzeigen, klicken Sie zum Filtern von Nachrichten auf Konsolenseitenleiste anzeigen (). Die Randleiste wird angezeigt:

Weitere Informationen zum Filtern von Nachrichten im Konsolentool finden Sie unter Filtern von Nachrichten.

Anzeigen von Nachrichten

In den folgenden Abschnitten werden Features beschrieben, die die Darstellung von Nachrichten im Konsolentool ändern. Eine praktische exemplarische Vorgehensweise finden Sie unter Untersuchen und Filtern von Informationen auf der aktuellen Webseite in derKonsolenübersicht.

Deaktivieren der Nachrichtengruppierung

Standardmäßig gruppiert die Konsole ähnliche Nachrichten. Wenn beispielsweise mehrere nachfolgende Nachrichten protokolliert werden, wird nur eine Meldung in der Konsole angezeigt. Die Nachricht enthält die Anzahl der Protokollierten, und Sie können die Nachricht erweitern, um alle Instanzen anzuzeigen.

Um das Standardmäßige Nachrichtengruppierungsverhalten der Konsole zu deaktivieren, klicken Sie auf die Schaltfläche Konsoleneinstellungen (), und aktivieren Sie dann das Kontrollkästchen Ähnliche Nachrichten in der Konsole gruppieren .

Protokollieren von XHR- und Fetch-Anforderungen

So protokollieren Sie alle Netzwerkanforderungen, die von den XMLHttpRequest JavaScript-APIs und Fetch ausgelöst werden:

1. Öffnen Sie die Demo-Webseite "Netzwerkaktivitätsdemo untersuchen " in einem neuen Fenster oder einer neuen Registerkarte.

2. Klicken Sie im Konsolentool auf die Schaltfläche Konsoleneinstellungen (), und aktivieren Sie dann das Kontrollkästchen XMLHttpRequests protokollieren .

3. Klicken Sie auf der gerenderten Webseite auf die Schaltfläche Daten abrufen . Dadurch wird eine Fetch API-Anforderung ausgelöst, und die Konsole protokolliert dann die Anforderungs- und Antwortdetails:

   

Beibehalten von Nachrichten über Seitenladevorgänge hinweg

Wenn Sie eine neue Webseite laden, werden die Nachrichten in der Konsole gelöscht. Um Nachrichten über Seitenladevorgänge hinweg beizubehalten, klicken Sie auf die Schaltfläche Konsoleneinstellungen (), und aktivieren Sie dann das Kontrollkästchen Protokoll beibehalten .

Netzwerkfehler ausblenden

Standardmäßig protokolliert das Konsolentool Netzwerkfehler:

Der oben gezeigte Fehler ist auf eine HTTP-Antwort mit dem status Code von 404zurückzuführen.

Um Netzwerkfehler auszublenden, klicken Sie auf die Schaltfläche Konsoleneinstellungen (), und aktivieren Sie dann das Kontrollkästchen Netzwerk ausblenden .

Erläutern von Konsolenfehlern und -warnungen mithilfe von Copilot in Edge

Wenn Sie eine Webseite mit DevTools überprüfen, werden im Konsolentool häufig Fehler und Warnungen angezeigt. Diese Fehler und Warnungen können manchmal schwer zu verstehen und zu beheben sein. Mithilfe der Funktion "Diesen Fehler erklären " erhalten Sie weitere Informationen zu dem Fehler oder der Warnung in Copilot in Edge:

Weitere Informationen zu diesem Feature finden Sie unter Erläutern von Konsolenfehlern und -warnungen mithilfe von Copilot in Edge.

Filtern von Nachrichten

Es gibt mehrere Möglichkeiten, Nachrichten in der Konsole herauszufiltern.

Herausfiltern von Browsernachrichten

So zeigen Sie nur Meldungen an, die aus dem JavaScript der Webseite stammen:

1. Öffnen Sie die Demowebseite PWAmp in einem neuen Fenster oder einer neuen Registerkarte, und klicken Sie dann auf die Schaltfläche Wiedergeben .

   Die Demowebseite protokolliert Nachrichten an die Konsole , und mehrere Browsernachrichten werden ebenfalls protokolliert:

   

2. Klicken Sie im Konsolentool auf Konsolenseitenleiste anzeigen (), um die Seitenleiste anzuzeigen.

3. Klicken Sie auf der Randleiste auf 3 Benutzernachrichten. Die Anzahl der Benutzernachrichten kann abhängig von der Anzahl der Nachrichten variieren, die auf der Webseite protokolliert werden.

   Das Konsolentool zeigt nur die Meldungen an, die von der Webseite protokolliert werden, und die Browsernachrichten sind ausgeblendet:

   

Filtern nach Protokollebene

DevTools weist jeder Nachricht, die dem Konsolentool protokolliert wird, einen der vier Schweregrade zu:

• Error
• Info
• Verbose
• Warning

Die vier Schweregrade gelten für:

• Nachrichten, die Sie von Ihrer Webseite mithilfe console von Methoden wie console.log(), console.error()und console.warn()protokollieren.
• Vom Browser protokollierte Meldungen.

Sie können jede Ebene von Nachrichten ausblenden, an denen Sie nicht interessiert sind. Wenn Sie beispielsweise nur an Nachrichten interessiert Error sind, können Sie die anderen drei Ebenen ausblenden.

So filtern Sie Nachrichten nach Ebene:

1. Klicken Sie auf der Symbolleiste des Konsolentools auf die Dropdownliste Protokollebene .

   Wenn die Dropdownliste nicht verfügbar ist, blenden Sie zuerst die Randleiste aus, indem Sie auf Konsolenseitenleiste ausblenden () klicken.

2. Aktivieren oder deaktivieren Sie in der Dropdownliste die VerboseEbenen , Info, Warningsoder Errors :

   

Filtern von Nachrichten nach Skript-URL

Um Nachrichten nach der URL des Skripts zu filtern, mit dem die Nachrichten protokolliert wurden, verwenden Sie das Textfeld Filter :

1. Öffnen Sie die Demo-Webseite PWAmp in einem neuen Fenster oder einer neuen Registerkarte. Nachrichten aus verschiedenen Skripts werden in der Konsole protokolliert.

2. Klicken Sie auf der Symbolleiste des Konsolentools auf das Textfeld Filter , und geben Sie dann ein url:. Eine Dropdownliste mit den URLs der Skripts, mit denen Nachrichten protokolliert wurden, wird angezeigt:

   

3. Wählen Sie die URL des Skripts aus, auf das Sie sich konzentrieren möchten. Das Konsolentool zeigt nur Meldungen aus diesem Skript an:

   

Sie müssen nicht aus der Liste der URLs auswählen, die das Konsolentool in der Dropdownliste Filter bereitstellt. Sie können die URL oder einen Teil der URL eingeben, nach der Sie filtern möchten. Wenn https://example.com/a.js und https://example.com/b.js beispielsweise Nachrichten protokollieren, url:example.com können Sie sich auf die Nachrichten aus diesen beiden Skripts konzentrieren.

Umkehren des Filters mit einem negativen URL-Filter

Geben Sie zum Ausblenden von Nachrichten, die von einem Skript protokolliert wurden, im Textfeld Filter den Text -url: gefolgt von der URL oder einem Teil der URL des Skripts ein. Geben Sie beispielsweise ein-url:example.com/a.js, um Nachrichten in https://example.com/a.jsauszublenden.

Anzeigen von Nachrichten aus einem einzelnen Skript mithilfe der Randleiste

So zeigen Sie Nachrichten aus einem einzelnen Skript mithilfe der Randleiste an:

1. Um die Randleiste in der Konsole anzuzeigen, klicken Sie auf Konsolenseitenleiste anzeigen (). Die Randleiste wird angezeigt.

2. Erweitern Sie den Abschnitt 3 Benutzernachrichten . Die Anzahl kann abhängig von der Anzahl der Nachrichten variieren, die von der Webseite protokolliert werden. Die Liste der Skripts, die protokollierte Meldungen enthalten, wird angezeigt.

3. Wählen Sie das Skript aus, das die Nachrichten enthält, auf die Sie sich konzentrieren möchten. Die Konsole zeigt nur Meldungen aus diesem Skript an:

   

Filtern von Nachrichten aus verschiedenen JavaScript-Kontexten

Standardmäßig zeigt das Konsolentool Meldungen aus allen JavaScript-Kontexten an, die auf der Webseite ausgeführt werden. Dies kann Nachrichten von domänenübergreifenden <iframe> Elementen umfassen, die in die Webseite eingebettet sind, oder Service Worker, die im Hintergrund ausgeführt werden.

So zeigen Sie nur Meldungen aus einem JavaScript-Kontext an:

1. Klicken Sie auf die Schaltfläche Konsoleneinstellungen (). Der Abschnitt "Einstellungen" wird angezeigt.

2. Aktivieren Sie das Kontrollkästchen Nur ausgewählter Kontext . Nur die Nachrichten, die vom obersten JavaScript-Kontext protokolliert werden, werden in der Konsole angezeigt.

3. Um einen anderen Kontext auszuwählen, klicken Sie in der Symbolleiste des Konsolentools auf die Dropdownliste JavaScript-Kontext , und wählen Sie dann den Kontext aus, auf den Sie sich konzentrieren möchten:

   

Weitere Informationen zum Auswählen eines anderen JavaScript-Kontexts finden Sie unter Auswählen eines Kontexts zum Ausführen von JavaScript-Ausdrücken.

Filtern von Nachrichten mithilfe eines Musters für reguläre Ausdrücke

So zeigen Sie nur die Meldungen an, die einem Muster für reguläre Ausdrücke entsprechen:

1. Klicken Sie auf der Symbolleiste des Konsolentools auf das Textfeld Filter .

2. Geben Sie ein Muster für reguläre Ausdrücke ein, z /.*\.mp3$/ . B. zum Abgleichen von Nachrichten, die mit .mp3enden.

   In der Konsole wird nur die Meldung angezeigt, die dem Muster für reguläre Ausdrücke entspricht:

Ausführen von JavaScript

Dieser Abschnitt enthält Features im Zusammenhang mit der Ausführung von JavaScript in der Konsole. Eine praktische exemplarische Vorgehensweise finden Sie unter Ausführen von JavaScript in der Konsole.

Erneutes Ausführen von Ausdrücken mithilfe des Konsolenverlaufs

So führen Sie einen JavaScript-Ausdruck aus, den Sie zuvor in der Konsole ausgeführt haben:

1. Drücken Sie die NACH-OBEN-TASTE , um den Verlauf der JavaScript-Ausdrücke zu durchlaufen, die Sie zuvor ausgeführt haben.

2. Drücken Sie die EINGABETASTE , um den Ausdruck erneut auszuführen.

Überwachen des Werts eines Ausdrucks in Echtzeit mithilfe eines Liveausdrucks

Erstellen Sie einen Liveausdruck, um den Wert eines JavaScript-Ausdrucks in Echtzeit zu watch, anstatt den Ausdruck wiederholt auszuführen:

1. Klicken Sie auf der Symbolleiste des Konsolentools auf die Schaltfläche Liveausdruck erstellen ("). Das Textfeld Ausdruck wird unterhalb der Symbolleiste angezeigt.

2. Geben Sie einen JavaScript-Ausdruck ein, und klicken Sie dann außerhalb des Textfelds Ausdruck . Der neue Ausdruck und sein Wert werden oben im Konsolentool angezeigt.

Weitere Informationen finden Sie unter Überwachen von Änderungen in JavaScript mithilfe von Live-Ausdrücken.

Auswerten von JavaScript-Ausdrücken während der Eingabe deaktivieren

Standardmäßig zeigt das Konsolentool eine Vorschau des Werts eines Ausdrucks an, wenn Sie den JavaScript-Ausdruck in der Konsole eingeben.

So deaktivieren Sie die Livevorschau während der Eingabe:

1. Klicken Sie auf die Schaltfläche Konsoleneinstellungen ().

2. Deaktivieren Sie das Kontrollkästchen Eager-Auswertung .

Deaktivieren der automatischen Vervollständigung aus dem Verlauf

Wenn Sie einen JavaScript-Ausdruck im Konsolentool eingeben, wird ein AutoVervollständigen-Popupfenster angezeigt. Das Popupfenster "AutoVervollständigen" enthält Folgendes:

• Vorschläge für globale JavaScript-Objekte und -Funktionen, die den eingegebenen Zeichen entsprechen.
• Vorschläge für JavaScript-Ausdrücke, die Sie zuvor ausgeführt haben.

Den Vorschlägen für JavaScript-Ausdrücke, die Sie zuvor ausgeführt haben, wird das > Zeichen vorangestellt und am unteren Rand des AutoVervollständigen-Fensters angezeigt:

So beenden Sie die Anzeige von Vorschlägen aus Ihren zuvor ausgeführten Ausdrücken:

1. Klicken Sie auf die Schaltfläche Konsoleneinstellungen ().

2. Deaktivieren Sie das Kontrollkästchen AutoVervollständigen aus Verlauf .

Auswählen eines Kontexts zum Ausführen von JavaScript-Ausdrücken

Webseiten verfügen über einen Standard Browserkontext, in dem der JavaScript-Code der Webseite ausgeführt wird. Webseiten können jedoch zusätzliche JavaScript-Kontexte aufweisen, z. B. domänenübergreifende <iframe> Elemente, die in die Webseite eingebettet sind, oder Service Worker, die im Hintergrund ausgeführt werden.

Standardmäßig ist die Dropdownliste des JavaScript-Kontexts, die sich in der Symbolleiste des Konsolentools befindet, auf oben festgelegt, was den Browserkontext der Standard Webseite darstellt:

Jeder JavaScript-Ausdruck, den Sie im Konsolentool ausführen, wird in dem Kontext ausgewertet, der in der Dropdownliste JavaScript-Kontext ausgewählt ist.

Wenn Sie JavaScript-Ausdrücke in einem anderen Kontext ausführen möchten, z. B. in einem domänenübergreifenden <iframe> Element, klicken Sie auf die Dropdownliste JavaScript-Kontext , und wählen Sie dann einen anderen Browserkontext aus.

Löschen der Konsole

Verwenden Sie einen der folgenden Ansätze, um die Konsole zu löschen:

• Klicken Sie auf die Schaltfläche Konsole löschen ().

• Klicken Sie mit der rechten Maustaste auf eine Nachricht, und wählen Sie dann Konsole löschen aus.

• Geben Sie clear() das Konsolentool ein, und drücken Sie dann die EINGABETASTE.

• Rufen Sie console.clear() aus dem JavaScript Ihrer Webseite auf.

• Drücken Sie STRG+L , während sich das Konsolentool im Fokus befindet.

Siehe auch

• Protokollmeldungen im Konsolentool : Hier erfahren Sie, wie Protokollmeldungen wie Informationen, Warnungen und Fehler in der Konsole gefiltert werden.
• Erste Schritte mit dem Ausführen von JavaScript in der Konsole : Schritte, die Sie durch das Ausstellen von JavaScript-Anweisungen und -Ausdrücken in der Konsole führen.
• API-Referenz zum Konsolenobjekt : Funktionen und Ausdrücke, die Sie in die Konsole eingeben können, um Nachrichten in die Konsole zu schreiben, z console.log(). B. .
• Hilfsprogrammfunktionen und Selektoren des Konsolentools : Praktische Funktionen, die Sie im Konsolentool eingeben können, zmonitorEvents(). B.

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.