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 zu sehen, wo er erstellt 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.
- Klicken Sie auf das Symbol
, um die Leiste Netzwerkbedingungen zu öffnen.
- 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. Wenn Sie diese Art von Anwendung erstellen, 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:
- Öffnen Sie das Menü Drosselung und wählen Sie Benutzerdefiniert > Hinzufügen...
- Richten Sie ein neues Drosselungsprofil ein wie unter Einstellungen Einstellungen > beschrieben. Drosselung.
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:
- Stellen Sie eine neue Verbindung her, beispielsweise mithilfe eines Testtools.
- Wählen Sie im Bereich Netzwerk die Option Keine Drosselung aus und senden Sie eine Nachricht über die Verbindung.
- Erstellen Sie ein sehr langsames benutzerdefiniertes Drosselungsprofil, z. B.
10 kbit/s
. Ein so langsames Profil wird dir helfen, den Unterschied zu erkennen. - Wählen Sie im Bereich Netzwerk das gewünschte Profil aus und senden Sie eine weitere Nachricht.
- 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.
- Klicken Sie auf das Symbol
, um die Leiste Netzwerkbedingungen zu öffnen.
- 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:
- Klicken Sie auf das Symbol
, um die Leiste Netzwerkbedingungen zu öffnen.
- Deaktivieren Sie die Option Automatisch auswählen.
- Wählen Sie eine Option für den User-Agent aus dem Menü aus oder geben Sie eine benutzerdefinierte Option in das Feld ein.
Suchanfragen
So suchen Sie in Anfrageheadern, Nutzlasten und Antworten:
Drücken Sie die folgende Tastenkombination, um den Tab Suchen rechts zu öffnen:
- Unter macOS verwenden Sie die Befehlstaste + F.
- Unter Windows oder Linux drücken Sie Strg + F.
Geben Sie auf dem Tab Suchen eine Suchanfrage ein und drücken Sie die Eingabetaste. Sie können auch auf match_case oder regular_expression klicken, um die Berücksichtigung der Groß-/Kleinschreibung bzw. reguläre Ausdrücke zu aktivieren.
Klicken Sie auf eines der Suchergebnisse. Im Bereich Network (Netzwerk) sind die Anfrage und der String, der auf den Tabs Headers, Paload (Paload) oder Response (Antwort) abgeglichen wurde, gelb hervorgehoben.
Wenn Sie die Suchergebnisse aktualisieren möchten, klicken Sie auf Aktualisieren Aktualisieren. Wenn Sie die Ergebnisse löschen möchten, klicken Sie auf Blockieren Löschen.
Weitere Informationen zu allen Suchmöglichkeiten in den Entwicklertools findest du unter Suche: Text in allen geladenen Ressourcen finden.
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, diecontent
,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 Sieis:running
, umWebSocket
-Ressourcen zu finden.larger-than
Zeigt Ressourcen in Byte an, die größer als die angegebene Größe sind. Wert festlegen von1000
entspricht der Festlegung eines Werts von1k
.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 falschenSet-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 einenSet-Cookie
-Header mit einemDomain
-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 einenSet-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 einenSet-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, derenurl
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) oder die Strg-Taste (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, klicken Sie auf das Kästchen Daten-URLs ausblenden.
In der Statusleiste am unteren Rand wird die Anzahl der angezeigten Anfragen im Vergleich zur Gesamtzahl angezeigt.
Erweiterungs-URLs ausblenden
Damit Sie sich auf den von Ihnen erstellten Code konzentrieren können, 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
oder404
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.
- HTTP-Statuscode, z. B.
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 der Initiatoren, 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:
- Klicken Sie mit der rechten Maustaste auf den Header der Tabelle Requests und wählen Sie Response Headers > Kopfzeilenspalten verwalten:
- 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.
Aufrufen des zeitlichen Ablaufs von Anfragen im Verhältnis zueinander
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:
- Klicken Sie in der Spalte Name der Tabelle Anfragen auf die URL der WebSocket-Verbindung.
- 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:
- 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.
- 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:
- Klicken Sie in der Tabelle Anfragen in der Spalte Name auf die URL der Anfrage.
- 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:
- Klicken Sie in der Tabelle „Anfragen“ in der Spalte Name auf die URL der Anfrage.
- Klicken Sie auf den Tab Response (Antwort).
HTTP-Header ansehen
So zeigen Sie die HTTP-Header-Daten einer Anfrage an:
- Klicken Sie in der Tabelle Anfragen auf eine Anfrage.
- Ö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:
- Öffnen Sie den Tab Headers (Header) für die gewünschte Anfrage. Weitere Informationen finden Sie unter HTTP-Header ansehen.
- 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:
- Klicken Sie in der Tabelle „Anfragen“ in der Spalte Name auf die URL der Anfrage.
- 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:
- Klicken Sie in der Tabelle Anfragen in der Spalte Name auf die URL der Anfrage.
- 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 Wiederholungsversuche 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 dargestellt.
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.