Freigeben über

Referenz zu Konsolenfeatures

  • Artikel

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

Inhalt:

Ö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:

Das Konsolentool

Ö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:

Das Konsolentool in der Symbolleiste

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.

    Führen Sie den Befehl aus, um das Konsolentool anzuzeigen.

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 (Symbol Konsoleneinstellungen). Der Abschnitt "Einstellungen" wird angezeigt:

Konsoleneinstellungen

Öffnen der Randleiste zum Filtern von Nachrichten

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

Konsolen-Randleiste

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 (Symbol 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 (Symbol 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:

    Eine in der Konsole protokollierte Fetch-Anforderung

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 (Symbol Konsoleneinstellungen), und aktivieren Sie dann das Kontrollkästchen Protokoll beibehalten .

Netzwerkfehler ausblenden

Standardmäßig protokolliert das Konsolentool Netzwerkfehler:

Netzwerkfehlermeldung

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 (Symbol Konsoleneinstellungen), und aktivieren Sie dann das Kontrollkästchen Netzwerk ausblenden .

Erläutern von Konsolenfehlern und Warnungen mit 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:

Copilot in der Microsoft Edge-Randleiste mit der Fehlermeldung und der Erklärung.

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:

    Mehrere Benutzer- und Browsernachrichten in der Konsole

  2. Klicken Sie im Konsolentool auf Konsolenseitenleiste anzeigen (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:

    Nur Benutzernachrichten in der Konsole mit geöffneter Randleiste

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 (Konsolen-Randleiste ausblenden) klicken.

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

    Dropdownliste

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:

    Die Dropdownliste des Textfelds Filter mit Skript-URLs

  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:

    Nur Nachrichten von der ausgewählten Skript-URL werden in der Konsole angezeigt.

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 (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, die aus einem Skript stammen, mithilfe der Randleiste

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 (Symbol 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:

    Die JavaScript-Kontext-Dropdownliste

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:

Die gefilterte Liste von Nachrichten basierend auf dem regulären Ausdruck

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 (Symbol "). 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 (Symbol 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:

Das AutoVervollständigen-Popupfenster zeigt Ausdrücke aus dem Verlauf an.

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

  1. Klicken Sie auf die Schaltfläche Konsoleneinstellungen (Symbol 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:

Die Dropdownliste des JavaScript-Kontexts, die anzeigt, dass der oberste Kontext ausgewählt ist

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 (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

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 finden Sie hier und wird von Kayce Basques geschrieben.

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