Referenz zu Netzwerkfunktionen

Entdecke in dieser umfassenden Referenz der Chrome-Entwicklertools neue Möglichkeiten, den Ladevorgang deiner Seite zu analysieren Netzwerkanalyse-Features.

Netzwerkanfragen aufzeichnen

Standardmäßig werden in Entwicklertools alle Netzwerkanfragen im Bereich Netzwerk erfasst, solange die Entwicklertools geöffnet sind.

Aufzeichnung von Netzwerkanfragen beenden

So beenden Sie die Aufzeichnung von Anfragen:

• Klicken Sie auf Aufzeichnung des Netzwerkprotokolls beenden. im Bereich Netzwerk. Es wird grau, um anzuzeigen, dass die Entwicklertools keine Anfragen mehr erfassen.
• Drücken Sie die Befehlstaste > + E (Mac) oder Strg + E (Windows, Linux), während der Bereich Netzwerk hervorgehoben ist.

Anfragen löschen

Klicken Sie auf Löschen. im Bereich Netzwerk, um alle Anfragen aus der Tabelle Anfragen zu löschen.

Anfragen beim Seitenaufbau speichern

Wenn Sie Anfragen beim Seitenaufbau speichern möchten, klicken Sie im Bereich Netzwerk das Kästchen Protokoll beibehalten an. Die Entwicklertools speichert alle Anfragen, bis Sie die Option Protokoll beibehalten deaktivieren.

Screenshots beim Seitenaufbau erstellen

Erstellen Sie Screenshots, um zu analysieren, was Nutzer sehen, während sie auf das Laden Ihrer Seite warten.

Wenn Sie Screenshots aktivieren möchten, öffnen Sie im Bereich Netzwerk die Einstellungen und klicken Sie auf Screenshots erstellen.

Aktualisieren Sie die Seite, während der Bereich Netzwerk hervorgehoben ist, um Screenshots zu erstellen.

Danach können Sie auf folgende Arten mit Screenshots interagieren:

• Bewegen Sie den Mauszeiger auf einen Screenshot, um den Punkt anzuzeigen, an dem er aufgenommen wurde. Eine gelbe Linie wird im Bereich „Übersicht“ angezeigt.
• Klicken Sie auf die Miniaturansicht eines Screenshots, um alle Anfragen herauszufiltern, die nach dem Erstellen des Screenshots aufgetreten sind. aufgenommen wurden.
• Doppelklicken Sie auf eine Miniaturansicht, um sie heranzuzoomen.

XHR-Anfrage noch einmal abspielen

Führen Sie einen der folgenden Schritte in der Tabelle Anfragen aus, um eine XHR-Anfrage noch einmal wiederzugeben:

• Wählen Sie die Anfrage aus und drücken Sie R.
• Klicken Sie mit der rechten Maustaste auf die Anfrage und wählen Sie Replay XHR aus.

Ladeverhalten ändern

Einen Erstbesucher durch Deaktivieren des Browser-Cache emulieren

Um zu simulieren, wie ein neuer Nutzer Ihre Website sieht, setzen Sie ein Häkchen bei Cache deaktivieren. Die Entwicklertools deaktiviert den Browser-Cache. So wird die Erfahrung eines ersten Nutzers genauer emuliert, da Anfragen bei wiederholten Besuchen aus dem Browser-Cache bereitgestellt werden.

Browser-Cache über die Leiste „Netzwerkbedingungen“ deaktivieren

Wenn du den Cache deaktivieren möchtest, während du in anderen Entwicklertools-Bereichen arbeitest, verwende die Netzwerkbedingungen Leiste.

1. Klicken Sie auf das Symbol , um die Leiste Netzwerkbedingungen zu öffnen.
2. Klicken Sie das Kästchen Cache deaktivieren an oder entfernen Sie das Häkchen.

Browser-Cache manuell löschen

Sie können den Browser-Cache jederzeit manuell leeren. Klicken Sie dazu mit der rechten Maustaste auf eine beliebige Stelle in der Tabelle Anfragen und wählen Sie Browser-Cache leeren aus.

Offline emulieren

Es gibt eine neue Klasse von Web-Apps, die progressive Web-Apps. Sie können offline mit mithilfe von Service Workern. Bei der Entwicklung dieser Art von Anwendung ist es hilfreich, um schnell ein Gerät ohne Datenverbindung zu simulieren.

Wenn Sie eine vollständige Offline-Netzwerkumgebung simulieren möchten, wählen Sie im Drop-down-Menü Netzwerkdrosselung neben dem Kästchen Cache deaktivieren die Option Offline aus.

In den Entwicklertools wird neben dem Tab Netzwerk ein Warnsymbol angezeigt, das dich darauf hinweist, dass der Offlinemodus aktiviert ist.

Langsame Netzwerkverbindungen emulieren

Um schnelles 4G, ein langsames 4G- oder 3G-Netz zu emulieren, wählen Sie oben in der Aktionsleiste im Drop-down-Menü Drosselung die entsprechende Voreinstellung aus.

In den Entwicklertools wird neben dem Bereich Netzwerk ein Warnsymbol Warnung angezeigt, das dich darauf hinweist, dass die Drosselung aktiviert ist.

Benutzerdefinierte Drosselungsprofile erstellen

Zusätzlich zu Voreinstellungen wie langsam oder schnell 4G kannst du auch deine eigenen Benutzerdefinierte Drosselungsprofile:

1. Öffnen Sie das Menü Drosselung und wählen Sie Benutzerdefiniert > Hinzufügen...
2. Richten Sie ein neues Drosselungsprofil ein wie unter Einstellungen Einstellungen > beschrieben. Drosselung.

3. Wählen Sie im Bereich Network (Netzwerk) das neue Profil aus dem Drop-down-Menü Dhrottling (Drosselung) aus.

   

In den Entwicklertools wird neben dem Bereich Netzwerk ein -Warnsymbol angezeigt, das dich darauf hinweist, dass die Drosselung aktiviert ist.

WebSocket-Verbindungen drosseln

Neben HTTP-Anfragen drosseln DevTools WebSocket-Verbindungen seit Version 99.

So beobachten Sie die WebSocket-Drosselung:

1. Stellen Sie eine neue Verbindung her, beispielsweise mithilfe eines Testtools.
2. Wählen Sie im Bereich Netzwerk die Option Keine Drosselung aus und senden Sie eine Nachricht über die Verbindung.
3. Erstellen Sie ein sehr langsames benutzerdefiniertes Drosselungsprofil, z. B. 10 kbit/s. Ein so langsames Profil wird dir helfen, den Unterschied zu erkennen.
4. Wählen Sie im Bereich Netzwerk das gewünschte Profil aus und senden Sie eine weitere Nachricht.
5. Schalten Sie den WS-Filter ein, klicken Sie auf Ihren Verbindungsnamen, öffnen Sie den Tab Nachrichten und prüfen Sie den Zeitunterschied zwischen gesendeten und E-Mails mit und ohne Drosselung. Beispiel:

Langsame Netzwerkverbindungen in der Leiste „Netzwerkbedingungen“ emulieren

Wenn du die Netzwerkverbindung während der Arbeit in anderen Entwicklertools drosseln möchtest, verwende die Leiste Netzwerkbedingungen.

1. Klicken Sie auf das Symbol , um die Leiste Netzwerkbedingungen zu öffnen.
2. Wählen Sie im Menü Netzwerkdrosselung eine Verbindungsgeschwindigkeit aus.

Browser-Cookies manuell löschen

Sie können Browser-Cookies jederzeit manuell löschen. Klicken Sie dazu mit der rechten Maustaste auf eine beliebige Stelle in der Tabelle Anfragen und wählen Sie Löschen Sie die Browser-Cookies.

HTTP-Antwortheader überschreiben

Weitere Informationen finden Sie unter Dateien und HTTP-Antwortheader lokal überschreiben.

User-Agent überschreiben

So überschreiben Sie den User-Agent manuell:

1. Klicken Sie auf das Symbol , um die Leiste Netzwerkbedingungen zu öffnen.
2. Deaktivieren Sie die Option Automatisch auswählen.
3. Wählen Sie eine Option für den User-Agent aus dem Menü aus oder geben Sie eine benutzerdefinierte Option in das Feld ein.

Anfragen filtern

Anfragen nach Properties filtern

Verwenden Sie das Feld Filter, um Anfragen nach Attributen wie der Domain oder Größe des

Wenn Sie das Feld nicht sehen, ist der Filterbereich wahrscheinlich ausgeblendet. Weitere Informationen finden Sie unter Filterbereich ausblenden.

Um den Filter umzukehren, klicken Sie neben dem Kästchen Filter das Kästchen Invertieren an.

Sie können mehrere Eigenschaften gleichzeitig verwenden, indem Sie sie durch ein Leerzeichen trennen. Für Beispiel: mime-type:image/gif larger-than:1K zeigt alle GIFs an, die größer als ein Kilobyte sind. Diese Filter mit mehreren Attributen entsprechen AND-Vorgängen. ODER-Vorgänge werden nicht unterstützt.

Im Folgenden finden Sie eine vollständige Liste der unterstützten Attribute.

• cookie-domain Zeigt die Ressourcen an, die eine bestimmte Cookie-Domain gesetzt haben.
• cookie-name Zeigt die Ressourcen an, die einen bestimmten Cookie-Namen festgelegt haben.
• cookie-path Zeigt die Ressourcen an, die einen bestimmten Cookie-Pfad festgelegt haben.
• cookie-value Zeigt die Ressourcen an, die einen bestimmten Cookie-Wert gesetzt haben.
• domain Es werden nur Ressourcen der angegebenen Domain angezeigt. Sie können ein Platzhalterzeichen (*) verwenden um mehrere Domains einzuschließen. Mit *.com werden beispielsweise Ressourcen von allen Domainnamen angezeigt, die enden in .com In den Entwicklertools wird das Dropdown-Menü für die automatische Vervollständigung mit allen Domains ausgefüllt, aufgetreten ist.
• has-overrides Anfragen anzeigen, die content, headers, alle Überschreibungen (yes) oder keine Überschreibungen (no) überschrieben haben Sie können der Anfragetabelle die entsprechende Spalte Hat Überschreibungen hinzufügen.
• has-response-header Zeigt die Ressourcen an, die den angegebenen HTTP-Antwortheader enthalten. Die Entwicklertools füllt das Dropdown-Menü für die automatische Vervollständigung mit allen Antwortheadern, die es enthält. gefunden wurden.
• is Verwenden Sie is:running, um WebSocket-Ressourcen zu finden.
• larger-than Zeigt Ressourcen in Byte an, die größer als die angegebene Größe sind. Wert festlegen von 1000 entspricht der Festlegung eines Werts von 1k.
• method Zeigt Ressourcen an, die über einen bestimmten HTTP-Methodentyp abgerufen wurden. Entwicklertools hinzufügen das Dropdown-Menü für die automatische Vervollständigung mit allen gefundenen HTTP-Methoden.
• mime-type Zeigt Ressourcen eines bestimmten MIME-Typs an. Das Drop-down-Menü für die automatische Vervollständigung wird mit den Entwicklertools ausgefüllt. mit allen gefundenen MIME-Typen.
• mixed-content Zeigen Sie alle Ressourcen mit gemischten Inhalten (mixed-content:all) oder nur die angezeigten Ressourcen (mixed-content:displayed) an.
• priority Zeigt Ressourcen an, deren Prioritätsstufe dem angegebenen Wert entspricht.
• resource-type Zeigt Ressourcen eines Ressourcentyps an, z. B. ein Bild. DevTools füllt die Felder Drop-down-Menü für die automatische Vervollständigung mit allen gefundenen Ressourcentypen.
• response-header-set-cookie Unformatierte Set-Cookie-Header auf dem Tab „Probleme“ anzeigen. Fehlerhafte Cookies mit falschen Set-Cookie-Headern wird im Netzwerkbereich gekennzeichnet.
• scheme Ressourcen anzeigen, die über ungeschütztes HTTP (scheme:http) oder geschütztes HTTPS abgerufen wurden (scheme:https).
• set-cookie-domain Ressourcen anzeigen, die einen Set-Cookie-Header mit einem Domain-Attribut haben das dem angegebenen Wert entspricht. Die Entwicklertools füllt die automatische Vervollständigung mit allen Cookies, Domains, die er gefunden hat.
• set-cookie-name Zeigt die Ressourcen an, die einen Set-Cookie-Header mit einem Namen haben, der mit angegebenen Wert. Die Entwicklertools enthalten in der automatischen Vervollständigung alle vorhandenen Cookie-Namen gefunden wurden.
• set-cookie-value Ressourcen anzeigen, die einen Set-Cookie-Header mit einem übereinstimmenden Wert haben zum angegebenen Wert hinzu. Die Entwicklertools füllt die automatische Vervollständigung mit allen Cookiewerten, die vorhanden sind. gefunden wurden.
• status-code Nur Ressourcen anzeigen, deren HTTP-Statuscode mit dem angegebenen Code übereinstimmt. DevTools füllt das Dropdown-Menü für die automatische Vervollständigung mit allen gefundenen Statuscodes.
• url Zeigt die Ressourcen an, deren url dem angegebenen Wert entspricht.

Anfragen nach Typ filtern

Um Anfragen nach Anfragetyp zu filtern, klicken Sie auf All, Fetch/XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest oder Other (alle hier nicht aufgeführten Typen) im Bereich Netzwerk.

Wenn Sie diese Schaltflächen nicht sehen, ist der Filterbereich wahrscheinlich ausgeblendet. Weitere Informationen finden Sie unter Filter ausblenden .

Um mehrere Filtertypen gleichzeitig zu aktivieren, halten Sie die Befehlstaste (Mac) bzw. Strg (Windows, Linux) und dann klicken.

Anfragen nach Zeit filtern

Ziehen Sie im Bereich Übersicht nach links oder rechts, um nur die Anfragen aufzurufen, die während innerhalb dieses Zeitraums. Der Filter ist inklusiv. Jede Anfrage, die während des markierten Zeitraums aktiv war, angezeigt.

Daten-URLs ausblenden

Daten-URLs sind kleine Dateien, die in andere Dokumente eingebettet sind. Alle Anfragen, die im Die Tabelle Anfragen, die mit data: beginnt, ist eine Daten-URL.

Wenn Sie diese Anfragen ausblenden möchten, setzen Sie ein Häkchen bei Daten-URLs ausblenden.

In der Statusleiste am unteren Rand wird die Anzahl der angezeigten Anfragen im Vergleich zur Gesamtzahl angezeigt.

Erweiterungs-URLs ausblenden

Um sich auf den von Ihnen erstellten Code zu konzentrieren, können Sie irrelevante Anfragen herausfiltern, die von Erweiterungen gesendet werden, die Sie möglicherweise in Chrome installiert haben. Die URLs von Erweiterungsanfragen beginnen mit chrome-extension://.

Wenn Sie Erweiterungsanfragen ausblenden möchten, klicken Sie auf das Kästchen Erweiterungs-URLs ausblenden.

In der Statusleiste am unteren Rand wird die Anzahl der angezeigten Anfragen im Vergleich zur Gesamtzahl angezeigt.

Nur die Anfragen mit blockierten Antwort-Cookies anzeigen

Wenn Sie alles mit Ausnahme der Anfragen herausfiltern möchten, bei denen Antwort-Cookies aus irgendeinem Grund blockiert wurden, klicken Sie das Kästchen Blockierte Antwort-Cookies an. Probieren Sie es auf dieser Demoseite aus.

In der Statusleiste am unteren Rand wird die Anzahl der angezeigten Anfragen im Vergleich zur Gesamtzahl angezeigt.

Wenn Sie wissen möchten, warum ein Antwortcookie blockiert wurde, wählen Sie die Anfrage aus, öffnen Sie den Tab Cookies und bewegen Sie den Mauszeiger auf das Informationssymbol .

Außerdem wird im Bereich Netzwerk neben einer Anfrage, die von der Einstellung von Drittanbieter-Cookies betroffen oder davon ausgenommen ist, ein Warnsymbol Warnung angezeigt. Bewegen Sie den Mauszeiger auf das Symbol, um eine Kurzinfo mit einem Hinweis zu sehen, und klicken Sie darauf, um den Bereich Probleme zu öffnen und weitere Informationen zu erhalten.

Nur blockierte Anfragen anzeigen

Wenn Sie alles außer blockierte Anfragen herausfiltern möchten, klicken Sie das Kästchen Blockierte Anfragen an. Sie können dies auf dem Tab Blockierung von Netzwerkanfragen testen.

In der Tabelle Anfragen sind blockierte Anfragen rot markiert. In der Statusleiste am unteren Rand wird die Anzahl der angezeigten Anfragen im Vergleich zur Gesamtzahl angezeigt.

Nur Drittanbieteranfragen anzeigen

Wenn Sie alles mit Ausnahme der Anfragen herausfiltern möchten, deren Ursprung vom Seitenursprung abweicht, setzen Sie das Häkchen bei Drittanbieteranfragen. Probieren Sie es auf dieser Demoseite aus.

In der Statusleiste am unteren Rand wird die Anzahl der angezeigten Anfragen im Vergleich zur Gesamtzahl angezeigt.

Sortieranfragen

Standardmäßig werden die Anfragen in der Tabelle Anfragen nach Initiierungszeit sortiert. Sie können die Tabelle mit anderen Kriterien.

Nach Spalte sortieren

Klicken Sie auf die Überschrift einer beliebigen Spalte in der Tabelle Anfragen, um Anfragen nach dieser Spalte zu sortieren.

Nach Aktivitätsphase sortieren

Wenn Sie ändern möchten, wie Anfragen im Rahmen der Vermittlungsabfolge sortiert werden, klicken Sie mit der rechten Maustaste auf die Überschrift der Tabelle „Anfragen“, bewegen Sie den Mauszeiger auf Wasserfall und wählen Sie eine der folgenden Optionen aus:

• Start Time (Beginn): Die erste initiierte Anfrage steht oben.
• Reaktionszeit: Die erste Anfrage, die den Download gestartet hat, befindet sich oben.
• Ende: Die erste abgeschlossene Anfrage befindet sich oben.
• Total Duration. Die Anfrage mit der kürzesten Verbindungseinrichtung und Anfrage / Antwort befindet sich bei oben.
• Latenz. Die Anfrage, für die die kürzeste Zeit auf eine Antwort gewartet wurde, wird ganz oben angezeigt.

Bei diesen Beschreibungen wird davon ausgegangen, dass die jeweilige Option vom kürzesten zum längsten sortiert wird. Durch Klicken auf in der Spaltenüberschrift Wasserfall wird die Reihenfolge umgekehrt.

In diesem Beispiel wird der Wasserfall nach der Gesamtdauer sortiert. Der hellere Teil jedes Balkens ist Zeit. mit Warten verbracht. Der dunklere Teil ist die Zeit, die für das Herunterladen von Byte aufgewendet wurde.

Anfragen analysieren

Solange die Entwicklertools geöffnet sind, werden alle Anfragen im Bereich Netzwerk protokolliert. Im Bereich Netzwerk können Sie Analyse von Anfragen.

Protokoll der Anfragen ansehen

In der Tabelle Anfragen findest du ein Protokoll aller Anfragen, die gestellt wurden, während die Entwicklertools geöffnet waren. Wenn Sie auf oder werden weitere Informationen angezeigt.

In der Tabelle „Anfragen“ werden standardmäßig die folgenden Spalten angezeigt:

• Name: Der Dateiname oder eine Kennung der Ressource.

• Status: Diese Spalte kann die folgenden Werte enthalten:

  

  • HTTP-Statuscode, z. B. 200 oder 404
  • CORS error für Anfragen, die aufgrund von Cross-Origin Resource Sharing (CORS) fehlgeschlagen sind.
  • (blocked:origin) für Anfragen mit falsch konfigurierten Headern. Wenn Sie den Mauszeiger auf diesen Statuswert bewegen, wird eine Kurzinfo mit einem Hinweis auf den Fehler angezeigt.
  • (failed), gefolgt von der Fehlermeldung.

• Typ: Der MIME-Typ der angeforderten Ressource.

• Initiator: Die folgenden Objekte oder Prozesse können Anfragen initiieren:

  • Parser: HTML-Parser von Chrome.
  • Weiterleitung: Eine HTTP-Weiterleitung.
  • Skript: Eine JavaScript-Funktion.
  • Sonstiges: Ein anderer Prozess oder eine andere Aktion, z. B. das Navigieren zu einer Seite über einen Link oder die Eingabe eines URL in die Adressleiste ein.

• Size (Größe): Die kombinierte Größe der Antwortheader plus des Antworttexts, wie sie vom Server.

• Zeit: Die Gesamtdauer vom Start der Anfrage bis zum Empfang des letzten Bytes in auf die Antwort.

• Wasserfall: Eine visuelle Aufschlüsselung der Aktivitäten der einzelnen Anfragen.

Spalten hinzufügen oder entfernen

Klicken Sie mit der rechten Maustaste auf die Kopfzeile der Tabelle Anfragen und wählen Sie eine Option zum Ein- oder Ausblenden aus. Neben den angezeigten Optionen sind Häkchen gesetzt.

Sie können die folgenden zusätzlichen Spalten hinzufügen oder entfernen: Pfad, URL, Methode, Protokoll, Schema, Domain, Remote-Adresse, Remote-Adressbereich, Adressbereich des Initiators, Cookies, Cookies festlegen, Priorität, Verbindungs-ID, Has-Überschreibungen und Wasserfall.

Benutzerdefinierte Spalten hinzufügen

So fügen Sie der Tabelle Anfragen eine benutzerdefinierte Spalte hinzu:

1. Klicken Sie mit der rechten Maustaste auf den Header der Tabelle Requests und wählen Sie Response Headers > Kopfzeilenspalten verwalten:
2. Klicken Sie im Dialogfeld auf Benutzerdefinierten Header hinzufügen, geben Sie den Namen ein und klicken Sie auf Hinzufügen.

Anfragen nach Inline-Frames gruppieren

Wenn Inline-Frames auf einer Seite viele Anfragen initiieren, können Sie das Anfrageprotokoll durch Gruppieren verbessern.

Wenn Sie Anfragen nach iFrames gruppieren möchten, öffnen Sie im Bereich Netzwerk die Einstellungen und klicken Sie das Kästchen Nach Frame gruppieren an.

Wenn Sie eine von einem Inline-Frame initiierte Anfrage ansehen möchten, maximieren Sie diesen im Anfrageprotokoll.

Den zeitlichen Ablauf von Anfragen im Vergleich zueinander ansehen

Verwenden Sie Wasserfall, um den zeitlichen Ablauf von Anfragen im Verhältnis zueinander zu sehen. Standardmäßig enthält der Parameter Wasserfall wird nach der Startzeit der Anfragen sortiert. Anfragen, die weiter links vor denen, die weiter rechts liegen, beginnen.

Unter Nach Aktivitätsphase sortieren finden Sie die verschiedenen Sortiermöglichkeiten für den Wasserfall.

Nachrichten einer WebSocket-Verbindung analysieren

So zeigen Sie die Nachrichten einer WebSocket-Verbindung an:

1. Klicken Sie in der Spalte Name der Tabelle Anfragen auf die URL der WebSocket-Verbindung.
2. Klicken Sie auf den Tab Nachrichten. In der Tabelle werden die letzten 100 Nachrichten angezeigt.

Klicken Sie zum Aktualisieren der Tabelle noch einmal auf den Namen der WebSocket-Verbindung in der Spalte Name des Anfragen.

Die Tabelle enthält drei Spalten:

• Daten: Die Nachrichtennutzlast. Wenn die Nachricht im Nur-Text-Format vorliegt, wird sie hier angezeigt. Für Binärprogramme Opcodes ausgeführt werden soll, werden in dieser Spalte der Name und der Code des Opcodes angezeigt. Die folgenden Opcodes werden unterstützt: Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame und Pong Frame.
• Länge: Die Länge der Nachrichtennutzlast in Byte.
• Zeit: Der Zeitpunkt, zu dem die Nachricht empfangen oder gesendet wurde.

Nachrichten sind nach Typ farblich gekennzeichnet:

• Ausgehende SMS sind hellgrün.
• Eingehende SMS sind weiß.
• WebSocket-Opcodes sind hellgelb.
• Fehler sind hellrot.

Ereignisse in einem Stream analysieren

So rufen Sie die Ereignisse auf, die von Servern über die Fetch API, die EventSource API und XHR gestreamt werden:

1. Auf einer Seite, über die Ereignisse gestreamt werden, können Sie Netzwerkanfragen aufzeichnen. Öffnen Sie beispielsweise diese Demoseite und klicken Sie auf eine der drei Schaltflächen.
2. Wählen Sie unter Netzwerk eine Anfrage aus und öffnen Sie den Tab EventStream.

Geben Sie zum Filtern von Ereignissen oben auf dem Tab EventStream in der Filterleiste einen regulären Ausdruck an.

Um die Liste der erfassten Ereignisse zu löschen, klicken Sie auf Blockieren Löschen.

Vorschau eines Antworttexts ansehen

So rufen Sie eine Vorschau eines Antworttexts auf:

1. Klicken Sie in der Tabelle Anfragen in der Spalte Name auf die URL der Anfrage.
2. Klicken Sie auf den Tab Vorschau.

Dieser Tab ist vor allem für die Anzeige von Bildern nützlich.

Antworttext ansehen

So zeigen Sie den Antworttext auf eine Anfrage an:

1. Klicken Sie in der Tabelle „Anfragen“ in der Spalte Name auf die URL der Anfrage.
2. Klicken Sie auf den Tab Response (Antwort).

HTTP-Header ansehen

So zeigen Sie die HTTP-Header-Daten einer Anfrage an:

1. Klicken Sie in der Tabelle Anfragen auf eine Anfrage.
2. Öffnen Sie den Tab Headers und scrollen Sie nach unten zu den Abschnitten General (Allgemein), Response Headers (Antwortheader), Request Headers (Anfrageheader) und optional zu Early Hints Headers (Header für Early Hints).

Im Abschnitt Allgemein zeigt die Entwicklertools eine visuell lesbare Statusmeldung neben dem empfangenen HTTP-Statuscode an.

Bewegen Sie im Abschnitt Antwortheader den Mauszeiger auf einen Headerwert und klicken Sie auf die Schaltfläche Bearbeiten Bearbeiten, um den Antwortheader lokal zu überschreiben.

Quelle des HTTP-Headers ansehen

Auf dem Tab Headers werden standardmäßig die Headernamen alphabetisch angezeigt. Um die HTTP-Header-Namen in der Reihenfolge beim Eingang:

1. Öffnen Sie den Tab Headers (Header) für die gewünschte Anfrage. Weitere Informationen finden Sie unter HTTP-Header ansehen.
2. Klicken Sie neben dem Abschnitt Anfrageheader oder Antwortheader auf Quelle anzeigen.

Warnung zu vorläufigen Headern

Manchmal wird auf dem Tab Headers die Warnmeldung Provisional headers are shown... angezeigt. Das kann folgende Gründe haben:

• Die Anfrage wurde nicht über das Netzwerk gesendet, aber aus einem lokalen Cache bereitgestellt, der die ursprünglichen Anfrageheader nicht speichert. In diesem Fall können Sie das Caching deaktivieren, um die vollständigen Anfrageheader zu sehen.

• Die Netzwerkressource ist ungültig. Führen Sie beispielsweise fetch("https://jec.fish.com/unknown-url/") in der Console aus.

In den Entwicklertools können aus Sicherheitsgründen auch nur vorläufige Header angezeigt werden.

Anfragenutzlast anzeigen

Wählen Sie eine Anfrage aus der Tabelle Anfragen aus und öffnen Sie den Tab Nutzlast, um die Nutzlast der Anfrage anzusehen, also die zugehörigen Abfragestringparameter und Formulardaten.

Nutzlastquelle ansehen

Standardmäßig wird die Nutzlast in Entwicklertools in visuell lesbarer Form angezeigt.

Um die Quellen von Abfragestringparametern und Formulardaten anzuzeigen, klicken Sie auf dem Tab Nutzlast neben dem Abschnitt Parameter für Abfragestrings oder Formulardaten auf Quelle anzeigen.

URL-decodierte Argumente von Abfragestringparametern ansehen

Um die URL-Codierung für Argumente umzuschalten, klicken Sie auf dem Tab Nutzlast auf Decodiert ansehen oder URL-codiert ansehen.

Cookies ansehen

So zeigen Sie die Cookies an, die im HTTP-Header einer Anfrage gesendet wurden:

1. Klicken Sie in der Tabelle „Anfragen“ in der Spalte Name auf die URL der Anfrage.
2. Klicken Sie auf den Tab Cookies.

Eine Beschreibung der einzelnen Spalten finden Sie unter Felder.

Informationen zum Ändern von Cookies finden Sie unter Cookies ansehen, bearbeiten und löschen.

Zeitaufschlüsselung einer Anfrage ansehen

So rufen Sie die zeitliche Aufschlüsselung einer Anfrage auf:

1. Klicken Sie in der Tabelle Anfragen in der Spalte Name auf die URL der Anfrage.
2. Klicken Sie auf den Tab Timing.

Unter Vorschau einer Zeitaufschlüsselung erfahren Sie, wie Sie schneller auf diese Daten zugreifen können.

Weitere Informationen zu den einzelnen Phasen finden Sie unter Die Aufschlüsselung der Zeitphasen. möglicherweise auf dem Tab Timing angezeigt.

Vorschau der Zeitaufschlüsselung ansehen

Wenn Sie eine Vorschau der zeitlichen Aufschlüsselung einer Anfrage sehen möchten, bewegen Sie den Mauszeiger auf den Eintrag der Anfrage in der Spalte Wasserfall der Tabelle „Anfragen“.

Unter Zeitaufschlüsselung einer Anfrage ansehen erfahren Sie, wie Sie auf diese Daten zugreifen können, die nicht erforderlich ist. wenn die Maus darüber bewegt wird.

Aufschlüsselungsphasen der Zeitangaben

Weitere Informationen zu den einzelnen Phasen finden Sie auf dem Tab Zeitplan:

• Wiedergabeliste. Der Browser stellt Anfragen vor dem Verbindungsstart und in folgenden Fällen in die Warteschlange:
  • Es gibt Anfragen mit höherer Priorität.
  • Es sind bereits sechs TCP-Verbindungen für diesen Ursprung offen. Dies ist das Limit. Gilt für Nur HTTP/1.0 und HTTP/1.1
  • Der Browser weist kurzzeitig Speicherplatz im Festplatten-Cache zu.
• Angehalten: Die Anfrage kann nach dem Verbindungsaufbau aus einem der unter Warteschlangen beschriebenen Gründe angehalten werden.
• DNS-Lookup: Der Browser löst die IP-Adresse der Anfrage auf.
• Erste Verbindung: Der Browser stellt eine Verbindung her, einschließlich TCP-Handshakes oder Wiederholungsversuchen. und Aushandlung von SSL.
• Proxy-Verhandlung: Der Browser handelt die Anfrage mit einem Proxyserver aus.
• Anfrage gesendet. Die Anfrage wird gesendet.
• ServiceWorker-Vorbereitung Der Browser startet den Service Worker.
• Anfrage an ServiceWorker. Die Anfrage wird an den Service Worker gesendet.
• Warten (TTFB). Der Browser wartet auf das erste Byte einer Antwort. TTFB steht für Zeit. Zu First Byte. Diese Zeit beinhaltet einen Umlauf der Latenz und die Zeit, die der Server um die Antwort vorzubereiten.
• Download von Inhalten Der Browser empfängt die Antwort entweder direkt aus dem Netzwerk oder von einem Service Worker. Dieser Wert ist die Gesamtzeit, die für das Lesen des Antworttexts benötigt wurde. Größere Werte als erwartet können auf ein langsames Netzwerk oder darauf hinweisen, dass der Browser mit anderen Aufgaben beschäftigt ist, wodurch das Lesen der Antwort verzögert wird.

Initiatoren und Abhängigkeiten ansehen

Wenn Sie die Initiatoren und Abhängigkeiten einer Anfrage sehen möchten, halten Sie die Umschalttaste gedrückt und bewegen Sie den Mauszeiger auf die Anfrage in der Tabelle mit Anfragen. In den Entwicklertools werden Initiatoren grün und Abhängigkeiten rot markiert.

Wenn die Tabelle Anfragen chronologisch geordnet ist, wird die erste grüne Anfrage über der Anfrage, den Sie mit der Maus bewegen, ist der Initiator der Abhängigkeit. Wenn oben eine andere grüne Anfrage angezeigt wird dass diese höhere Anforderung der Initiator des Initiators ist. Dies sind nur einige Beispiele für die Bedeutung von Data Governance.

Ladeereignisse ansehen

Die Entwicklertools zeigen den Zeitpunkt der Ereignisse DOMContentLoaded und load an mehreren Stellen in der Bereich Netzwerk: Das DOMContentLoaded-Ereignis ist blau und das load-Ereignis rot.

Gesamtzahl der Anfragen ansehen

Die Gesamtzahl der Anfragen wird unten im Bereich Netzwerk im Bereich Zusammenfassung angezeigt.

Gesamtgröße der übertragenen und geladenen Ressourcen ansehen

In den Entwicklertools wird unten im Bereich Netzwerk im Bereich Zusammenfassung die Gesamtgröße der übertragenen und geladenen (unkomprimierten) Ressourcen aufgeführt.

Unter Anzeige der unkomprimierten Größe einer Ressource erfahren Sie, wie groß die Ressourcen sind, nachdem sie vom Browser dekomprimiert wurden.

Stacktrace ansehen, der eine Anfrage ausgelöst hat

Wenn eine JavaScript-Anweisung dazu führt, dass eine Ressource angefordert wird, bewegen Sie den Mauszeiger auf die Spalte Initiator (Initiator). um den Stacktrace anzuzeigen, der zu der Anfrage führt.

Nicht komprimierte Größe einer Ressource ansehen

Prüfen Sie die Einstellungen > Große Anfragezeilen und sehen Sie sich dann den unteren Wert der Spalte Größe an.

In diesem Beispiel betrug die komprimierte Größe des Dokuments www.google.com, das über das Netzwerk gesendet wurde. 43.8 KB, während die unkomprimierte Größe 136 KB war.

Anfragedaten exportieren

Alle Netzwerkanfragen in einer HAR-Datei speichern

HAR (HTTP-Archiv) ist ein Dateiformat, das von verschiedenen HTTP-Sitzungstools verwendet wird, um die erfassten Daten zu exportieren. Das Format ist ein JSON-Objekt mit einem bestimmten Satz von Feldern.

Sie haben zwei Möglichkeiten, alle Netzwerkanfragen in einer HAR-Datei zu speichern:

• Klicken Sie mit der rechten Maustaste auf eine beliebige Anfrage in der Tabelle Anfragen und wählen Sie Alle als HAR-Datei mit Inhalt speichern aus.
• Klicken Sie oben im Bereich Netzwerk in der Aktionsleiste auf HAR-Datei exportieren.

Sobald Sie eine HAR-Datei haben, können Sie sie auf zwei Arten wieder in die Entwicklertools importieren, um sie zu analysieren:

• Ziehen Sie die HAR-Datei in die Tabelle Anfragen.
• Klicken Sie oben im Bereich Netzwerk in der Aktionsleiste auf HAR importieren.

Eine oder mehrere Anfragen in die Zwischenablage kopieren

Klicken Sie in der Spalte Name der Tabelle Anfragen mit der rechten Maustaste auf eine Anfrage und bewegen Sie den Mauszeiger auf Kopieren. Wählen Sie eine der folgenden Optionen aus:

• URL kopieren: Kopieren Sie die URL der Anfrage in die Zwischenablage.
• Als cURL kopieren: Kopieren Sie die Anfrage als cURL-Befehl.
• Als PowerShell kopieren: Kopieren Sie die Anfrage als PowerShell-Befehl.
• Als Abruf kopieren: Kopieren Sie die Anfrage als Abrufaufruf.

• Als Node.js-Abruf kopieren: Kopieren Sie die Anfrage als Node.js-Abrufaufruf.

  ---

• Antwort kopieren: Kopieren Sie den Antworttext in die Zwischenablage.

  ---

• Kopieren Sie alle URLs. Kopieren Sie die URLs aller Anfragen in die Zwischenablage.

• Alles als cURL kopieren: Kopieren Sie alle Anfragen als Kette von cURL-Befehlen.

• Alles als PowerShell kopieren: Kopieren Sie alle Anfragen als Kette von PowerShell-Befehlen.

• Alles als Abruf kopieren: Alle Anfragen als Kette von Abrufaufrufen kopieren.

• Alles als Node.js-Abruf kopieren: Alle Anfragen als Kette von Node.js-Abrufaufrufen kopieren.

• Alles als HAR kopieren: Alle Anfragen als HAR-Daten kopieren.

Layout des Steuerfelds „Netzwerk“ ändern

Maximieren oder minimieren Sie die Bereiche der Benutzeroberfläche des Steuerfelds Netzwerk, um den Fokus auf das Wesentliche zu legen.

Filterbereich ausblenden

Standardmäßig wird in den Entwicklertools der Filterbereich angezeigt. Klicken Sie auf Filter. , um ihn zu verbergen.

Große Anfragezeilen verwenden

Verwenden Sie große Zeilen, wenn Sie mehr Leerraum in der Tabelle mit den Netzwerkanfragen wünschen. In einigen Spalten bei großen Zeilen etwas mehr Informationen geben. Zum Beispiel ist der untere Wert der Die Spalte Größe ist die unkomprimierte Größe einer Anfrage und die Spalte Priorität enthält sowohl die anfängliche (untere Wert) als auch die endgültige (höchste) Abrufpriorität.

Öffnen Sie die Einstellungen und klicken Sie auf Große Anfragezeilen, um große Zeilen zu sehen.

Titel „Übersicht“ ausblenden

Standardmäßig wird in den Entwicklertools der Track Übersicht angezeigt. Öffnen Sie die Einstellungen und deaktivieren Sie das Kästchen Übersicht anzeigen, um sie auszublenden.