Referenz zu Netzwerkfunktionen

In dieser umfassenden Referenz zu den Netzwerkanalysefunktionen der Chrome-Entwicklertools finden Sie neue Möglichkeiten, den Seitenaufbau zu analysieren.

Netzwerkanfragen aufzeichnen

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

Aufzeichnung von Netzwerkanfragen beenden

So beenden Sie die Aufzeichnung von Anfragen:

• Klicken Sie im Bereich Netzwerk auf Aufzeichnung des Netzwerkprotokolls beenden . Es wird grau, um anzuzeigen, dass in den Entwicklertools keine Anfragen mehr aufgezeichnet werden.
• Drücken Sie Befehlstaste + E (Mac) oder Strg + E (Windows, Linux), während der Fokus auf dem Bereich Netzwerk liegt.

Anfragen löschen

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

Anfragen über Seitenaufrufe hinweg speichern

Wenn Sie Anfragen über Seitenaufrufe hinweg speichern möchten, setzen Sie im Bereich Netzwerk ein Häkchen bei Protokoll beibehalten. DevTools speichert alle Anfragen, bis Sie Log beibehalten deaktivieren.

Screenshots während des Seitenaufbaus erstellen

Erstellen Sie Screenshots, um zu analysieren, was Nutzer sehen, während sie darauf warten, dass Ihre Seite geladen wird.

Wenn Sie Screenshots aktivieren möchten, öffnen Sie im Bereich Netzwerk die Einstellungen und wählen Sie Screenshots erstellen aus.

Aktualisieren Sie die Seite, während das Netzwerk-Panel im Fokus ist, um Screenshots zu erstellen.

Nachdem Sie einen Screenshot aufgenommen haben, können Sie ihn auf folgende Weise bearbeiten:

• Bewegen Sie den Mauszeiger auf einen Screenshot, um den Zeitpunkt anzuzeigen, zu dem er aufgenommen wurde. Auf der Zeitachse Übersicht wird eine gelbe Linie angezeigt.
• Klicken Sie auf das Thumbnail eines Screenshots, um alle Anfragen herauszufiltern, die nach der Aufnahme des Screenshots erfolgt sind.
• Doppelklicken Sie auf eine Miniaturansicht, um sie zu vergrößern.

Anfrage bearbeiten und noch einmal senden

Sie können jede abrufbare Netzwerkanfrage in der Tabelle Anfragen bearbeiten und noch einmal senden:

1. Klicken Sie mit der rechten Maustaste auf die Anfrage und wählen Sie Bearbeiten und als Abruf neu senden aus. In den Entwicklertools wird die Konsole geöffnet. Die Anfrage wird als fetch()-Aufruf eingefügt, wobei die ursprünglichen Anfrageparameter und der Ausführungskontext beibehalten werden.
2. Optional können Sie den fetch()-Aufruf in der Console bearbeiten und dann die Eingabetaste drücken, um die Anfrage noch einmal zu senden.

Funktionsweise beim Laden ändern

Erstbesucher durch Deaktivieren des Browser-Cache emulieren

Wenn Sie nachvollziehen möchten, wie ein neuer Nutzer Ihre Website erlebt, setzen Sie ein Häkchen bei Disable cache (Cache deaktivieren). Die Entwicklertools deaktivieren den Browser-Cache. So wird die Erfahrung eines neuen Nutzers genauer simuliert, da Anfragen bei wiederholten Besuchen aus dem Browsercache bereitgestellt werden.

Deaktivieren Sie den Browser-Cache im Bereich „Netzwerkbedingungen“.

Wenn Sie den Cache deaktivieren möchten, während Sie in anderen DevTools-Bereichen arbeiten, verwenden Sie den Bereich Netzwerkbedingungen.

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

Browser-Cache manuell leeren

Wenn Sie den Browsercache jederzeit manuell leeren möchten, klicken Sie mit der rechten Maustaste auf eine beliebige Stelle in der Tabelle Anfragen und wählen Sie Browsercache leeren aus.

Offline emulieren

Es gibt eine neue Klasse von Web-Apps, die sogenannten Progressive Web-Apps, die mithilfe von Service Workern offline funktionieren können. Wenn Sie diese Art von App entwickeln, ist es hilfreich, schnell ein Gerät ohne Datenverbindung simulieren zu können.

Wenn Sie eine vollständig 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, um Sie daran zu erinnern, dass der Offlinemodus aktiviert ist.

Langsame Netzwerkverbindungen emulieren

Wenn Sie schnelles 4G, langsames 4G oder 3G emulieren möchten, wählen Sie die entsprechende Voreinstellung im Drop-down-Menü Drosselung in der Aktionsleiste oben aus.

Wenn Sie im Bereich Leistung die Messwerte aus dem Feld aktiviert haben, wird möglicherweise eine der Drosselungsoptionen im Menü basierend auf Daten aus dem Chrome User Experience Report als empfohlen markiert.

In den Entwicklertools wird neben dem Bereich Netzwerk ein Warnsymbol angezeigt, um Sie daran zu erinnern, dass die Drosselung aktiviert ist.

Benutzerdefinierte Drosselungsprofile erstellen

Zusätzlich zu Voreinstellungen wie „langsames 4G“ oder „schnelles 4G“ können Sie auch eigene benutzerdefinierte Drosselungsprofile hinzufügen:

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

3. Wählen Sie im Bereich Netzwerk im Drop-down-Menü Drosselung Ihr neues Profil aus.

   

In den Entwicklertools wird neben dem Bereich Netzwerk ein Warnsymbol  angezeigt, um Sie daran zu erinnern, dass die Drosselung aktiviert ist.

WebSocket-Verbindungen drosseln

Seit Version 99 drosseln die Entwicklertools neben HTTP-Anfragen auch WebSocket-Verbindungen.

So beobachten Sie die WebSocket-Drosselung:

1. Stellen Sie eine neue Verbindung her, z. B. mit einem Testtool.
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. So können Sie den Unterschied besser erkennen.
4. Wählen Sie im Bereich Netzwerk das Profil aus und senden Sie eine weitere Nachricht.
5. Aktivieren Sie den Filter WS, klicken Sie auf den Namen Ihrer Verbindung, öffnen Sie den Tab Messages und prüfen Sie den Zeitunterschied zwischen gesendeten und zurückgegebenen Nachrichten mit und ohne Drosselung. Beispiel:

Langsame Netzwerkverbindungen über die Leiste „Netzwerkbedingungen“ emulieren

Wenn Sie die Netzwerkverbindung drosseln möchten, während Sie in anderen DevTools-Bereichen arbeiten, verwenden Sie den Bereich 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

Wenn Sie Browser-Cookies manuell löschen möchten, rechtsklicken Sie auf eine beliebige Stelle in der Tabelle Anfragen und wählen Sie Browser-Cookies löschen aus.

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 Automatisch auswählen.
3. Wählen Sie eine User-Agent-Option aus dem Menü aus oder geben Sie eine benutzerdefinierte Option in das Feld ein.

Suchanfragen

So suchen Sie in Anfrageheadern, Nutzlasten und Antworten:

1. Drücken Sie die folgende Tastenkombination, um rechts den Tab Suchen zu öffnen:

   • Unter macOS: Befehlstaste + F.
   • Unter Windows oder Linux: Strg + F

2. Geben Sie auf dem Tab Suchen Ihre Suchanfrage ein und drücken Sie die Eingabetaste. Klicken Sie optional auf match_case oder regular_expression, um die Groß-/Kleinschreibung bzw. reguläre Ausdrücke zu aktivieren.

3. Klicken Sie auf eines der Suchergebnisse. Im Netzwerkbereich wird die entsprechende Anfrage gelb hervorgehoben. Außerdem wird im Bereich der Tab Header oder Antwort geöffnet und der übereinstimmende String hervorgehoben, falls vorhanden.

Wenn Sie die Suchergebnisse aktualisieren möchten, klicken Sie auf Aktualisieren Aktualisieren. Klicken Sie auf Blockieren Löschen, um die Ergebnisse zu löschen.

Weitere Informationen zu allen Suchmöglichkeiten in den Entwicklertools finden Sie unter Suche: Text in allen geladenen Ressourcen finden.

Anfragen filtern

Anfragen nach Attributen filtern

Verwenden Sie das Feld Filter, um Anfragen nach Attributen wie der Domain oder der Größe der Anfrage zu filtern, oder geben Sie einen Textstring ein, der mit der Anfrage-URL, der Domain, dem Hostnamen oder dem Port übereinstimmt (z. B. localhost oder example.com), einschließlich Same-Site-Anfragen.

Wenn Sie das Feld nicht sehen, ist die Leiste Filter wahrscheinlich ausgeblendet. Weitere Informationen finden Sie unter Filterleiste ausblenden.

Wenn Sie den Filter umkehren möchten, setzen Sie ein Häkchen neben dem Feld Filter.

Sie können mehrere Properties gleichzeitig verwenden, indem Sie sie durch ein Leerzeichen trennen. Mit mime-type:image/gif larger-than:1K werden beispielsweise alle GIFs angezeigt, die größer als ein Kilobyte sind. Diese Filter für mehrere Properties entsprechen UND-Vorgängen. ODER-Vorgänge werden nicht unterstützt.

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

• cookie-domain. Zeigen Sie die Ressourcen an, die eine bestimmte Cookie-Domain festlegen.
• cookie-name: Zeigt die Ressourcen an, die einen bestimmten Cookienamen festlegen.
• cookie-path. Zeigen Sie die Ressourcen an, die einen bestimmten Cookie-Pfad festlegen.
• cookie-value: Zeigt die Ressourcen an, die einen bestimmten Cookie-Wert festlegen.
• domain: Nur Ressourcen aus der angegebenen Domain anzeigen. Sie können ein Platzhalterzeichen (*) verwenden, um mehrere Domains einzuschließen. Beispiel: Mit *.com werden Ressourcen von allen Domainnamen angezeigt, die auf .com enden. In DevTools wird das Drop-down-Menü für die automatische Vervollständigung mit allen Domains gefüllt, die erkannt wurden.
• has-overrides: Zeigt Anfragen an, die content, headers, beliebige Überschreibungen (yes) oder keine Überschreibungen (no) 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. In den Entwicklertools wird das Drop-down-Menü für die automatische Vervollständigung mit allen Antwortheadern gefüllt, die gefunden wurden.
• is. Verwenden Sie is:running, um WebSocket-Ressourcen zu finden.
• larger-than: Zeigt Ressourcen an, die größer als die angegebene Größe in Byte sind. Das Festlegen eines Werts für 1000 entspricht dem Festlegen eines Werts für 1k.
• method: Zeigt Ressourcen an, die über einen bestimmten HTTP-Methodentyp abgerufen wurden. DevTools füllt das Drop-down-Menü für die automatische Vervollständigung mit allen HTTP-Methoden, die erkannt wurden.
• mime-type: Ressourcen eines bestimmten MIME-Typs anzeigen. In den DevTools wird das Drop-down-Menü für die automatische Vervollständigung mit allen MIME-Typen gefüllt, die gefunden wurden.
• mixed-content. Alle Ressourcen mit gemischten Inhalten (mixed-content:all) oder nur die angezeigten Ressourcen (mixed-content:displayed) anzeigen.
• priority: Ressourcen anzeigen, deren Prioritätsstufe mit dem angegebenen Wert übereinstimmt.
• resource-type. Ressourcen eines Ressourcentyps anzeigen, z. B. Bilder. In den Entwicklertools wird das Drop-down-Menü für die automatische Vervollständigung mit allen Ressourcentypen gefüllt, die gefunden wurden.
• response-header-set-cookie. Unformatierte Set-Cookie-Header auf dem Tab „Probleme“ anzeigen. Fehlerhafte Cookies mit falschen Set-Cookie-Headern werden im Netzwerkbereich gekennzeichnet.
• scheme: Zeigt Ressourcen an, die über ungeschütztes HTTP (scheme:http) oder geschütztes HTTPS (scheme:https) abgerufen wurden.
• set-cookie-domain: Zeigt die Ressourcen an, die einen Set-Cookie-Header mit einem Domain-Attribut haben, das mit dem angegebenen Wert übereinstimmt. DevTools füllt die automatische Vervollständigung mit allen Cookie-Domains aus, die erkannt wurden.
• set-cookie-name. Zeigt die Ressourcen an, die einen Set-Cookie-Header mit einem Namen haben, der mit dem angegebenen Wert übereinstimmt. Die DevTools füllen die automatische Vervollständigung mit allen Cookienamen, die gefunden wurden.
• set-cookie-value: Zeigt die Ressourcen an, die einen Set-Cookie-Header mit einem Wert haben, der mit dem angegebenen Wert übereinstimmt. Die DevTools füllen die automatische Vervollständigung mit allen Cookie-Werten, die gefunden wurden.
• status-code: Nur Ressourcen anzeigen, deren HTTP-Statuscode mit dem angegebenen Code übereinstimmt. In den DevTools wird das Drop-down-Menü für die automatische Vervollständigung mit allen Statuscodes gefüllt, die gefunden wurden.
• url: Zeigt die Ressourcen an, die einen url haben, der mit dem angegebenen Wert übereinstimmt.

Anfragen nach Typ filtern

Wenn Sie Anfragen nach Ressourcentyp filtern möchten, klicken Sie im Bereich Netzwerk auf die Schaltflächen Alle, Abrufen/XHR, JS, CSS, Bild, Media, Schriftart, Dokument, WS (WebSocket), Wasm (WebAssembly), Manifest oder Andere (alle anderen hier nicht aufgeführten Typen).

Wenn Sie diese Schaltflächen nicht sehen, ist die Aktionsleiste Filter wahrscheinlich ausgeblendet. Filterleiste ausblenden

Wenn Sie Ressourcen mehrerer Typen gleichzeitig anzeigen möchten, halten Sie die Befehlstaste (Mac) oder die Strg-Taste (Windows, Linux) gedrückt und klicken Sie dann auf mehrere Typfilter.

Anfragen nach Zeit filtern

Ziehen Sie die Zeitachse Übersicht nach links oder rechts, um nur die Anfragen anzuzeigen, die in diesem Zeitraum aktiv waren. Der Filter ist inklusiv. Alle Anfragen, die während des hervorgehobenen Zeitraums aktiv waren, werden angezeigt.

Daten-URLs ausblenden

Daten-URLs sind kleine Dateien, die in andere Dokumente eingebettet sind. Jede Anfrage, die Sie in der Tabelle Anfragen sehen und die mit data: beginnt, ist eine Daten-URL.

Wenn Sie diese Anfragen ausblenden möchten, wählen Sie in der Aktionsleiste Filter die Option Weitere Filter > check_box Daten-URLs ausblenden aus.

In der Statusleiste unten wird die Anzahl der angezeigten Anfragen im Verhältnis zur Gesamtzahl angezeigt.

Erweiterungs-URLs ausblenden

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

Wenn Sie Erweiterungsanfragen ausblenden möchten, wählen Sie in der Aktionsleiste Filter die Option Weitere Filter > check_box Erweiterungs-URLs ausblenden aus.

In der Statusleiste unten wird die Anzahl der angezeigten Anfragen im Verhältnis zur Gesamtzahl angezeigt.

Nur die Anfragen mit blockierten Antwort-Cookies anzeigen

Wenn Sie alle Anfragen herausfiltern möchten, mit Ausnahme der Anfragen, bei denen Antwort-Cookies aus irgendeinem Grund blockiert wurden, wählen Sie in der Aktionsleiste Filter die Option Weitere Filter > check_box Blockierte Antwort-Cookies aus.

In der Statusleiste unten wird die Anzahl der angezeigten Anfragen im Verhältnis zur Gesamtzahl angezeigt.

Wenn Sie den Grund dafür herausfinden möchten, warum ein Antwort-Cookie blockiert wurde, wählen Sie die Anfrage aus, öffnen Sie den Tab Cookies und bewegen Sie den Mauszeiger auf das Informationssymbol i.

Außerdem wird im Bereich Netzwerk ein Warnsymbol neben einer Anfrage angezeigt, bei der Cookies entweder aufgrund von Chrome-Flags oder der Konfiguration blockiert werden. Bewegen Sie den Mauszeiger auf das Symbol, um eine Kurzinfo mit einem Hinweis zu sehen. Klicken Sie darauf, um den Bereich Probleme mit weiteren Informationen aufzurufen.

Nur blockierte Anfragen anzeigen

Wenn Sie alles außer blockierten Anfragen herausfiltern möchten, wählen Sie in der Aktionsleiste Filter die Option Weitere Filter > check_box Blockierte Anfragen aus. Um dies zu testen, können Sie im Drawer den Tab Blockierung der Netzwerkanfrage verwenden.

In der Tabelle Anfragen werden blockierte Anfragen rot hervorgehoben. In der Statusleiste unten wird die Anzahl der angezeigten Anfragen im Vergleich zur Gesamtzahl angezeigt.

Nur Anfragen von Drittanbietern anzeigen

Wenn Sie alles außer den Anfragen herausfiltern möchten, deren Ursprung sich vom Seitenursprung unterscheidet, wählen Sie in der Aktionsleiste Filter die Option Weitere Filter > check_box Anfragen von Drittanbietern aus.

In der Statusleiste unten wird die Anzahl der angezeigten Anfragen im Verhältnis zur Gesamtzahl angezeigt.

Anfragen sortieren

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

Nach Spalte sortieren

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

Nach Aktivitätsphase sortieren

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

• Startzeit: Die erste initiierte Anfrage steht ganz oben.
• Antwortzeit: Die erste Anfrage, die mit dem Download begonnen hat, befindet sich oben.
• Ende: Die erste abgeschlossene Anfrage befindet sich oben.
• Gesamtdauer: Die Anfrage mit dem kürzesten Verbindungsaufbau und der kürzesten Anfrage / Antwort steht ganz oben.
• Latenz. Die Anfrage, die am kürzesten auf eine Antwort gewartet hat, wird oben angezeigt.

In diesen Beschreibungen wird davon ausgegangen, dass die Optionen jeweils von der kürzesten bis zur längsten Dauer sortiert sind. Wenn Sie auf die Spaltenüberschrift Wasserfall klicken, wird die Reihenfolge umgekehrt.

In diesem Beispiel ist das Wasserfalldiagramm nach der Gesamtdauer sortiert. Der hellere Teil jedes Balkens ist die Wartezeit. 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. Verwenden Sie den Netzwerkbereich, um Anfragen zu analysieren.

Log von Anfragen ansehen

In der Tabelle Anfragen finden Sie ein Protokoll aller Anfragen, die gestellt wurden, während die Entwicklertools geöffnet waren. Wenn Sie auf eine Anfrage klicken oder den Mauszeiger darauf bewegen, werden weitere Informationen dazu angezeigt.

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

• Name: Der Dateiname oder eine Kennung für die 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. Bewegen Sie den Mauszeiger auf diesen Statuswert, um eine Kurzinfo mit einem Hinweis darauf zu sehen, was schiefgelaufen ist.
  • (failed), gefolgt von der Fehlermeldung.

• Type: Der MIME-Typ der angeforderten Ressource.

• Initiator: Anfragen können durch die folgenden Objekte oder Prozesse initiiert werden:

  • Parser: Der HTML-Parser von Chrome.
  • Weiterleitung: Eine HTTP-Weiterleitung.
  • Script Eine JavaScript-Funktion. In diesem Fall enthält das Feld Netzwerk einen Link zur entsprechenden Zeile in der Quelldatei.
  • Early Hints. Eine HTTP-103 Early Hints-Antwort.
  • Sonstiges: Ein anderer Prozess oder eine andere Aktion, z. B. das Aufrufen einer Seite über einen Link oder die Eingabe einer URL in die Adressleiste.

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

• Zeit: Die Gesamtdauer vom Beginn der Anfrage bis zum Empfang des letzten Byte in der Antwort.

• Wasserfall: Eine visuelle Aufschlüsselung der Aktivitäten jeder Anfrage.

Spalten hinzufügen oder entfernen

Rechtsklicken Sie auf den Header der Tabelle Anfragen und wählen Sie eine Option zum Ein- oder Ausblenden aus. Neben den angezeigten Optionen ist ein Häkchen zu sehen.

Sie können die folgenden zusätzlichen Spalten hinzufügen oder entfernen:

• Anfrage-Nr. : Die absolute Reihenfolge der Anfrageinitiierung, die standardmäßig an der ersten Position in der Tabelle Anfragen angepinnt ist.
• Pfad: Der Pfadteil der URL.
• URL Die vollständige URL der Anfrage.
• Methode Die HTTP-Methode der Anfrage (z. B. GET, POST, PUT, DELETE).
• Protokoll. Das Protokoll der Anfrage, z. B. h2 für HTTP/2, h3 für HTTP/3 usw.
• Schema. Der Schemateil der URL.
• Domain Der Domainteil der URL.
• Remote-Adresse Die Remote-IP-Adresse und der Port der Anfrage.
• Bereich für Remote-Adresse Der Bereich für Remote-Adressen der Anfrage. Public für öffentliche IP-Adressen, Private für private IP-Adressen.
• Raum für Initiator-Adresse. Der Initiatoradressraum der Anfrage. Wie bei der Fernbedienung.
• Cookies. Die Anzahl der Cookies in der Anfrage.
• Cookies festlegen. Die Anzahl der Cookies in der Antwort.
• Priorität. Die Priorität der Anfrage.
• Verbindungs-ID Die Verbindungs-ID der Anfrage in einer Clientsitzung, falls vorhanden.
• Hat Überschreibungen. Gibt an, ob die Anfrage Überschreibungen enthält (ja, nein, Inhalt oder Header).
• Bezieht sich auf Werbung: Wahr oder falsch?
• Vorinstalliert. Gibt an, ob die Anfrage mit spekulativer Vorabladung initiiert wurde.
• Blockierung des Renderings. Ob die Anfrage das Rendering blockiert, potenziell blockiert oder nicht.
• Wasserfall: Eine visuelle Aufschlüsselung der Aktivitäten jeder Anfrage.

Benutzerdefinierte Spalten hinzufügen

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

1. Klicken Sie mit der rechten Maustaste auf die Kopfzeile der Tabelle Anfragen und wählen Sie Antwortheader > Headerspalten verwalten aus.
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 Inlineframes auf einer Seite viele Anfragen auslösen, können Sie das Anfrageprotokoll übersichtlicher gestalten, indem Sie die Anfragen gruppieren.

Wenn Sie Anfragen nach iFrames gruppieren möchten, öffnen Sie im Bereich Netzwerk die Einstellungen und setzen Sie ein Häkchen bei check_box Nach Frame gruppieren.

Wenn Sie eine Anfrage sehen möchten, die von einem Inline-Frame initiiert wurde, maximieren Sie sie im Anfragelog.

Zeitliche Abfolge von Anfragen im Verhältnis zueinander ansehen

Im Wasserfall sehen Sie, wie die Anfragen zeitlich zueinander stehen. Standardmäßig wird der Wasserfall nach dem Beginn der Anfragen sortiert. Anfragen, die weiter links stehen, wurden also früher gestartet als Anfragen, die weiter rechts stehen.

Unter Nach Aktivitätsphase sortieren finden Sie die verschiedenen Möglichkeiten, das Wasserfalldiagramm zu sortieren.

Nachrichten einer WebSocket-Verbindung analysieren

So rufen Sie die Nachrichten einer WebSocket-Verbindung auf:

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

Wenn Sie die Tabelle aktualisieren möchten, klicken Sie in der Tabelle Anfragen in der Spalte Name noch einmal auf den Namen der WebSocket-Verbindung.

Die Tabelle enthält drei Spalten:

• Daten: Die Nachrichtennutzlast. Wenn die Nachricht im Nur-Text-Format vorliegt, wird sie hier angezeigt. Bei binären Opcodes 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 je nach Typ farblich gekennzeichnet:

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

Ereignisse in einem Stream analysieren

So sehen Sie sich die Ereignisse an, die Server über die Fetch API, die EventSource API und XHR streamen:

1. Zeichnen Sie Netzwerkanfragen auf einer Seite auf, die Ereignisse streamt.
2. Wählen Sie unter Network (Netzwerk) eine Anfrage aus und öffnen Sie den Tab EventStream (EventStream).

Wenn Sie Ereignisse filtern möchten, geben Sie oben auf dem Tab EventStream einen regulären Ausdruck in die Filterleiste ein.

Wenn Sie die Liste der erfassten Ereignisse löschen möchten, klicken Sie auf Block Löschen.

Vorschau eines Antworttexts ansehen

So rufen Sie eine Vorschau eines Antworttexts auf:

1. Wählen Sie in der Tabelle Anfragen in der Spalte Name eine Anfrage aus.
2. Öffnen Sie den Tab Vorschau.

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

Antworttext ansehen

So rufen Sie den Antworttext für eine Anfrage auf:

1. Wählen Sie in der Tabelle Anfragen in der Spalte Name eine Anfrage aus.
2. Öffnen Sie den Tab Antwort.

Wählen Sie für binäre oder komprimierte Antworten im Drop-down-Menü unten auf dem Tab Antwort eine Decodierungsmethode (Base64, Hex oder UTF-8) aus.

HTTP-Header ansehen

So rufen Sie HTTP-Headerdaten einer Anfrage auf:

1. Wählen Sie in der Tabelle Anfragen in der Spalte Name eine Anfrage aus.
2. Öffnen Sie den Tab Header und scrollen Sie nach unten zu den Abschnitten Allgemein, Antwortheader, Anfrageheader und optional Early Hints-Header.

Im Bereich Allgemein wird in den Entwicklertools neben dem empfangenen HTTP-Statuscode eine menschenlesbare Statusmeldung angezeigt.

Im Bereich Response Headers können Sie den Mauszeiger auf einen Headerwert bewegen und auf den Button Bearbeiten Bearbeiten klicken, um den Antwortheader lokal zu überschreiben.

HTTP-Headerquelle ansehen

Auf dem Tab Header werden die Headernamen standardmäßig alphabetisch angezeigt. So rufen Sie die HTTP-Headernamen in der Reihenfolge auf, in der sie empfangen wurden:

1. Öffnen Sie den Tab 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 ansehen.

Warnung zu vorläufigen Headern

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

• Die Anfrage wurde nicht über das Netzwerk gesendet, sondern über einen 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.

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

Anfragenutzlast ansehen

Wenn Sie die Nutzlast einer Anfrage, also die Parameter des Abfragestrings und die Formulardaten, ansehen möchten, wählen Sie eine Anfrage aus der Tabelle Requests (Anfragen) aus und öffnen Sie den Tab Payload (Nutzlast).

Nutzlastquelle ansehen

Standardmäßig wird die Nutzlast in den Entwicklertools in einem menschenlesbaren Format angezeigt.

Wenn Sie die Quellen der Abfragestringparameter und Formulardaten aufrufen möchten, klicken Sie auf dem Tab Nutzlast neben dem Abschnitt Abfragestringparameter oder Formulardaten auf Quelle ansehen.

URL-codierte Abfrage- und Formularparameter ansehen

In den Entwicklertools werden Abfragestringparameter und Formulardaten standardmäßig in einer URL-decodierten Form angezeigt. Wenn Sie die URL-Codierung für Argumente auf dem Tab Payload ein- oder ausschalten möchten, klicken Sie auf URL-codiert anzeigen oder Decodiert anzeigen.

Binäre und komprimierte Nutzlasten ansehen

Wählen Sie für binäre oder komprimierte Anfrage-Payloads im Drop-down-Menü unten auf dem Tab Payload eine Decodierungsmethode (Base64, Hex oder UTF-8) aus.

Cookies ansehen

So rufen Sie die Cookies auf, die im HTTP-Header einer Anfrage gesendet wurden:

1. Wählen Sie in der Tabelle Anfragen in der Spalte Name eine Anfrage aus.
2. Öffnen Sie 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.

Gerätegebundene Sitzungen ansehen

Auf dem Tab Gerätegebundene Sitzungen werden die Informationen zur Verschiebung (Aktualisierung) angezeigt, die mit der ausgewählten Anfrage für alle aktiven gerätegebundenen Sitzungen auf einer Website verknüpft sind.

So rufen Sie die Informationen zur Verschiebung (Aktualisierung) auf:

1. Wählen Sie in der Tabelle Anfragen in der Spalte Name eine Anfrage aus.
2. Öffnen Sie den Tab Gerätegebundene Sitzungen.

Der Tab Gerätegebundene Sitzungen wird nur für relevante Anfragen mit Cookies angezeigt. Auf dem Tab werden alle aktiven gerätegebundenen Sitzungen aufgeführt und es wird angegeben, ob die Sitzungen die Anfrage zurückgestellt haben (und wenn nicht, warum). Folgende Optionen sind verfügbar:

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

Zeitliche Aufschlüsselung einer Anfrage ansehen

So rufen Sie die Zeitaufschlüsselung einer Anfrage auf:

1. Wählen Sie in der Tabelle Anfragen in der Spalte Name eine Anfrage aus.
2. Öffnen Sie den Tab Timing.

Unter Aufschlüsselung der Zeitmessung in der Vorschau ansehen finden Sie eine schnellere Möglichkeit, auf diese Daten zuzugreifen.

Weitere Informationen zu den einzelnen Phasen, die auf dem Tab Zeitachse angezeigt werden, finden Sie unter Phasen der Zeitachse.

Vorschau einer Zeitaufschlüsselung

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

Unter Zeitliche Aufschlüsselung einer Anfrage ansehen finden Sie eine Möglichkeit, auf diese Daten zuzugreifen, ohne den Mauszeiger darauf bewegen zu müssen.

Phasen der Zeitaufschlüsselung

Hier finden Sie weitere Informationen zu den einzelnen Phasen, die auf dem Tab Timing angezeigt werden können:

• Wiedergabeliste Der Browser stellt Anfragen vor dem Verbindungsaufbau in die Warteschlange, wenn:
  • Es gibt Anfragen mit höherer Priorität. Die Priorität einer Anfrage wird durch Faktoren wie den Typ einer Ressource und ihre Position im Dokument bestimmt. Weitere Informationen finden Sie im Abschnitt zur Ressourcenpriorität des fetchpriority-Leitfadens.
  • Für diesen Ursprung sind bereits sechs TCP-Verbindungen geöffnet. Das ist das Limit. Gilt nur für HTTP/1.0 und HTTP/1.1.
  • Der Browser weist kurz Speicherplatz im Datenträger-Cache zu.
• Blockiert: Die Anfrage kann nach dem Verbindungsaufbau aus einem der unter Warteschlange beschriebenen Gründe blockiert werden.
• DNS Lookup (DNS-Suche). Der Browser löst die IP-Adresse der Anfrage auf.
• Erstmalige Verbindung: Der Browser stellt eine Verbindung her, einschließlich TCP-Handshakes oder Wiederholungen und SSL-Verhandlung.
• Proxy-Aushandlung: Der Browser verhandelt die Anfrage mit einem Proxyserver.
• 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 „Time to First Byte“. Diese Zeit umfasst einen Hin- und Rückflug der Latenz und die Zeit, die der Server für die Vorbereitung der Antwort benötigt hat.
• Download von Inhalten Der Browser empfängt die Antwort entweder direkt vom Netzwerk oder von einem Service Worker. Dieser Wert ist die Gesamtzeit, die zum Lesen des Antworttexts aufgewendet wurde. Höher als erwartete Werte können auf ein langsames Netzwerk oder darauf hindeuten, dass der Browser mit anderen Aufgaben beschäftigt ist, was das Lesen der Antwort verzögert.

Initiatoren und Abhängigkeiten ansehen

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

Wenn die Tabelle Anfragen chronologisch sortiert ist, ist die erste grüne Anfrage über der Anfrage, auf die Sie den Mauszeiger bewegen, der Initiator der Abhängigkeit. Wenn darüber eine weitere grüne Anfrage angezeigt wird, ist diese höhere Anfrage der Initiator des Initiators. 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 im Bereich Netzwerk an. Das Ereignis DOMContentLoaded ist blau und das Ereignis load rot.

Gesamtzahl der Anfragen ansehen

Die Gesamtzahl der Anfragen wird in der Statusleiste unten im Bereich Netzwerk aufgeführt.

Gesamtgröße der übertragenen und geladenen Ressourcen ansehen

In der Statusleiste unten im Network-Bereich wird die Gesamtgröße der übertragenen und geladenen (unkomprimierten) Ressourcen angezeigt.

Unter Unkomprimierte Größe einer Ressource ansehen erfahren Sie, wie groß Ressourcen sind, nachdem sie vom Browser dekomprimiert wurden.

Stacktrace ansehen, der eine Anfrage verursacht hat

Wenn eine JavaScript-Anweisung dazu führt, dass eine Ressource angefordert wird, bewegen Sie den Mauszeiger auf die Spalte Initiator, um den Stacktrace bis zur Anfrage aufzurufen.

Unkomprimierte Größe einer Ressource ansehen

Wählen Sie Einstellungen > Zeilen mit großen Anfragen aus und sehen Sie sich den untersten Wert in der Spalte Größe an.

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

Anfragedaten exportieren

Sie können die Liste der Anfragen mit angewendeten Filtern auf verschiedene Arten exportieren oder kopieren, wie im Folgenden beschrieben.

Alle Netzwerkanfragen in einer HAR-Datei speichern

HAR (HTTP-Archiv) ist ein Dateiformat, das von verschiedenen HTTP-Sitzungstools für den Export der aufgezeichneten Daten verwendet wird. Das Format ist ein JSON-Objekt mit einer bestimmten Feldverteilung.

Um die Wahrscheinlichkeit eines versehentlichen Lecks vertraulicher Informationen zu verringern, können Sie standardmäßig das „bereinigte“ Netzwerkprotokoll im HAR-Format exportieren, das vertrauliche Informationen wie die Header Cookie, Set-Cookie und Authorization ausschließt. Bei Bedarf können Sie das Protokoll auch mit sensiblen Daten exportieren.

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

• Rechtsklicken Sie auf eine beliebige Anfrage in der Tabelle Anfragen und wählen Sie Kopieren > Alle [aufgeführten] als HAR (bereinigt) speichern oder Alle [aufgeführten] als HAR (mit sensiblen Daten) speichern aus.

  

• Klicken Sie in der Aktionsleiste oben im Bereich Netzwerk auf Herunterladen HAR exportieren (bereinigt)....

  Wenn Sie sensible Daten exportieren möchten, aktivieren Sie zuerst die Einstellungen Einstellungen > Einstellungen > Netzwerk > check_box HAR-Datei mit sensiblen Daten generieren. Klicken Sie dann auf den Button Herunterladen Exportieren und wählen Sie im Drop-down-Menü HAR-Datei exportieren (mit sensiblen Daten) aus.

  

Sobald Sie eine HAR-Datei haben, können Sie sie auf zwei Arten zur Analyse in die DevTools importieren:

• Ziehen Sie die HAR-Datei per Drag-and-drop in die Tabelle Requests (Anfragen).
• Klicken Sie in der Aktionsleiste oben im Bereich Netzwerk auf Hochladen HAR importieren.

Anfrage, gefilterte Gruppe von Anfragen oder alle Anfragen in die Zwischenablage kopieren

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

So kopieren Sie eine einzelne Anfrage, die zugehörige Antwort oder einen Stacktrace:

• 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 Fetch-Aufruf.
• Als Abruf (Node.js) kopieren. Kopieren Sie die Anfrage als Node.js-Fetch-Aufruf.
• Als Preload-Element kopieren Kopieren Sie die Anfrage als <link rel="preload">-HTML-Tag.
• Antwort kopieren Kopieren Sie den Antworttext in die Zwischenablage.
• Stacktrace kopieren. Kopieren Sie den Stacktrace der Anfrage in die Zwischenablage.

So kopieren Sie alle Anfragen:

• Alle URLs kopieren: Kopiert die URLs aller Anfragen in die Zwischenablage.
• Alles als cURL kopieren. Alle Anfragen als Kette von cURL-Befehlen kopieren.
• Alles als PowerShell kopieren. Kopieren Sie alle Anfragen als Kette von PowerShell-Befehlen.
• Alles als Abruf kopieren Alle Anfragen als Kette von Fetch-Aufrufen kopieren
• Alles als „fetch“ kopieren (Node.js) Kopieren Sie alle Anfragen als Kette von Node.js-Abrufaufrufen.
• Alles als HAR (bereinigt) kopieren: Alle Anfragen als HAR-Daten ohne sensible Daten wie Cookie-, Set-Cookie- und Authorization-Header kopieren.
• Alles als HAR (mit sensiblen Daten) kopieren: Alle Anfragen als HAR-Daten mit sensiblen Daten kopieren.

Wenn Sie eine gefilterte Gruppe von Anfragen kopieren möchten, wenden Sie einen Filter auf das Netzwerkprotokoll an, rechtsklicken Sie auf eine Anfrage und wählen Sie Folgendes aus:

• Alle aufgeführten URLs kopieren: Kopiert die URLs aller gefilterten Anfragen in die Zwischenablage.
• Alle Einträge als cURL kopieren: Kopieren Sie alle gefilterten Anfragen als Kette von cURL-Befehlen.
• Alle Einträge als PowerShell kopieren Kopieren Sie alle gefilterten Anfragen als Kette von PowerShell-Befehlen.
• Alle Einträge als „Abrufen“ kopieren Alle gefilterten Anfragen als Kette von Abrufaufrufen kopieren.
• Alle Einträge als „fetch“ kopieren (Node.js) Alle gefilterten Anfragen als Kette von Node.js-Abrufaufrufen kopieren.
• Alle Einträge als HAR (bereinigt) kopieren. Alle gefilterten Anfragen als HAR-Daten ohne sensible Daten wie Cookie-, Set-Cookie- und Authorization-Header kopieren.
• Alle Einträge als HAR (mit sensiblen Daten) kopieren. Alle gefilterten Anfragen als HAR-Daten mit sensiblen Daten kopieren.

Layout des Bereichs „Netzwerk“ ändern

Maximieren oder minimieren Sie Bereiche der Benutzeroberfläche des Netzwerkbereichs, um sich auf das zu konzentrieren, was für Sie wichtig ist.

Aktionsleiste „Filter“ ausblenden

Standardmäßig wird in den Entwicklertools die Filterleiste oben im Bereich Netzwerk angezeigt. Klicken Sie auf filter_alt Filter, um ihn auszublenden.

Große Anfragezeilen verwenden

Verwenden Sie große Zeilen, wenn Sie mehr Leerraum in der Tabelle mit Netzwerkanfragen wünschen. In einigen Spalten werden bei Verwendung von großen Zeilen auch zusätzliche Informationen angezeigt. Der untere Wert der Spalte Größe ist beispielsweise die unkomprimierte Größe einer Anfrage und die Spalte Priorität zeigt sowohl die anfängliche (unterer Wert) als auch die endgültige (oberer Wert) Abrufpriorität an.

Öffnen Sie die Einstellungen und klicken Sie auf Große Anforderungszeilen, um große Zeilen aufzurufen.

Übersichtstrack ausblenden

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