Referenz zu Netzwerkfeatures

Das Netzwerktool verfügt über die folgenden Features, um die Netzwerkaktivität für eine Webseite zu überprüfen. Eine schrittweise exemplarische Vorgehensweise und eine Einführung in das Netzwerktool finden Sie unter Untersuchen der Netzwerkaktivität.

Ausführlicher Inhalt:

• Aufzeichnen von Netzwerkanforderungen
  • Aufzeichnung von Netzwerkanforderungen beenden
  • Löschen von Anforderungen
  • Speichern von Anforderungen über Seitenladevorgänge hinweg
  • Erfassen von Screenshots während des Seitenladevorgangs
  • Wiedergeben einer XHR-Anforderung
• Ändern des Ladeverhaltens
  • Emulieren eines Erstbesuchers durch Deaktivieren des Browsercaches
    • Deaktivieren des Browsercaches über das Tool "Netzwerkbedingungen"
  • Manuelles Löschen des Browsercaches
  • Offline emulieren
  • Emulieren langsamer Netzwerkverbindungen
    • Erstellen eines benutzerdefinierten Einschränkungsprofils
    • Drosseln von WebSocket-Verbindungen
    • Emulieren langsamer Netzwerkverbindungen über das Tool "Netzwerkbedingungen"
  • Manuelles Löschen von Browsercookies
  • Http-Antwortheader überschreiben
  • Überschreiben des Benutzer-Agents
• Festlegen von Clienthinweisen für den Benutzer-Agent
• Suchanforderungen
• Filtern von Anforderungen
  • Filtern von Anforderungen nach Eigenschaften
  • Filtern von Anforderungen nach Typ
  • Filtern von Anforderungen nach Zeit
  • Daten-URLs ausblenden
  • Ausblenden von Erweiterungs-URLs
  • Nur die Anforderungen mit blockierten Antwortcookies anzeigen
  • Nur blockierte Anforderungen anzeigen
  • Nur Anforderungen von Drittanbietern anzeigen
• Sortieranforderungen
  • Sortieren nach Spalte
  • Sortieren nach Aktivitätsphase
• Analysieren von Anforderungen
  • Anzeigen eines Anforderungsprotokolls
    • Hinzufügen oder Entfernen von Spalten
    • Hinzufügen benutzerdefinierter Spalten für Antwortheader
  • Gruppieren von Anforderungen nach Inlineframes
  • Anzeigen der Zeitsteuerungsbeziehung von Anforderungen
  • Analysieren der Nachrichten einer WebSocket-Verbindung
  • Analysieren von Ereignissen in einem Stream
  • Anzeigen einer Vorschau eines Antworttexts
  • Anzeigen eines Antworttexts
  • Anzeigen von HTTP-Headern
    • Anzeigen der HTTP-Headerquelle
    • Warnung zu vorläufigen Headern
  • Anzeigen der Anforderungsnutzlast (Abfragezeichenfolgenparameter und Formulardaten)
    • Anzeigen der Nutzlastquelle
    • Anzeigen von URL-codierten Abfragezeichenfolgenparametern
  • Cookies anzeigen
  • Anzeigen der Zeitlichen Aufschlüsselung einer Anforderung
    • Vorschau einer Zeitlichen Aufschlüsselung
    • Erläuterung der Zeitplanungsaufschlüsselungsphasen
  • Anzeigen von Initiatoren und Abhängigkeiten
  • Anzeigen von Ladeereignissen
  • Anzeigen der Gesamtanzahl von Anforderungen
  • Anzeigen der Gesamtgröße des Downloads
  • Anzeigen der Stapelüberwachung, die eine Anforderung verursacht hat
  • Anzeigen der unkomprimierten Größe einer Ressource
• Exportieren von Anforderungsdaten
  • Speichern aller Netzwerkanforderungen in einer HAR-Datei
  • Kopieren von Netzwerkanforderungen in die Zwischenablage
  • Kopieren eines formatierten ANTWORT-JSON-Codes in die Zwischenablage
  • Kopieren von Eigenschaftswerten aus Netzwerkanforderungen in die Zwischenablage
• Ändern des Layouts des Netzwerktools
  • Ausblenden des Bereichs "Filter"
  • Verwenden großer Anforderungszeilen
  • Ausblenden des Bereichs "Übersicht"
• Siehe auch

Aufzeichnen von Netzwerkanforderungen

Standardmäßig zeichnet DevTools alle Netzwerkanforderungen im Netzwerktool auf, solange DevTools geöffnet ist.

Zum Beispiel:

1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. zur Demoseite "Netzwerkaktivität untersuchen ".

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Tool Netzwerk aus.

4. Aktualisieren Sie die Webseite.

   Die Schaltfläche Aufzeichnung des Netzwerkprotokolls beenden ist rot und verfügbar:

Aufzeichnung von Netzwerkanforderungen beenden

So beenden Sie die Aufzeichnung von Anforderungen:

1. Klicken Sie im Netzwerktool auf Aufzeichnung des Netzwerkprotokolls beenden (). Es wird grau, um anzugeben, dass DevTools keine Anforderungen mehr aufzeichnet.

2. Drücken Sie STRG+E (Windows, Linux) oder BEFEHL+E (macOS), während sich das Netzwerktool im Fokus befindet.

Löschen von Anforderungen

Um alle Anforderungen aus der Tabelle Anforderungen zu löschen, klicken Sie im Netzwerktool auf die Schaltfläche Netzwerkprotokoll löschen ():

Oder drücken Sie STRG+L (Windows, Linux, macOS) oder BEFEHL+K (macOS), während das Netzwerktool den Fokus hat.

Siehe auch:

• TODO-App

Speichern von Anforderungen über Seitenladevorgänge hinweg

Um Anforderungen über Seitenladevorgänge hinweg zu speichern, aktivieren Sie im Netzwerktool das Kontrollkästchen Protokoll beibehalten :

DevTools speichert alle Anforderungen, bis Sie Protokoll beibehalten deaktivieren.

Siehe auch:

• TODO-App

Erfassen von Screenshots während des Seitenladevorgangs

Sie können Screenshots erfassen, um zu analysieren, was benutzern angezeigt wird, während sie auf das Laden Ihrer Seite warten.

So aktivieren Sie Screenshots:

1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. toDO-App.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Öffnen Sie in DevTools das Tool Netzwerk .

4. Klicken Sie oben rechts im Tool Netzwerk auf das Symbol Netzwerkeinstellungen (Zahnrad). Eine Zeile mit Kontrollkästchen wird angezeigt.

5. Aktivieren Sie das Kontrollkästchen Screenshots erfassen :

   

So erfassen Sie einen Screenshot:

1. Während das Netzwerktool den Fokus hat, drücken Sie STRG+F5 , um die Seite zu aktualisieren. Screenshots werden während des Seitenladevorgangs erfasst, und Miniaturansichten werden unterhalb der Zeile der Kontrollkästchen angezeigt.

   Sie können wie folgt mit den Screenshots interagieren.

2. Zeigen Sie auf einen Screenshot, um den Punkt anzuzeigen, an dem dieser Screenshot aufgezeichnet wurde. Im Bereich Übersichtsdiagramm wird eine gelbe vertikale Linie angezeigt.

   

3. Klicken Sie auf die Miniaturansicht eines Screenshots, um alle Anforderungen herauszufiltern, die nach der Erfassung des Screenshots aufgetreten sind.

4. Doppelklicken Sie auf eine Miniaturansicht des Screenshots, um den Screenshot zu vergrößern und anzuzeigen.

5. Drücken Sie ESC , um den Screenshot-Viewer zu schließen.

Wiedergeben einer XHR-Anforderung

So geben Sie eine XHR-Anforderung wieder:

1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. zur Referenz demo des Netzwerktools.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Tool Netzwerk aus.

4. Aktualisieren Sie die Webseite.

   In der Tabelle "Anforderungen" des Netzwerktools werden Zeilen für Folgendes angezeigt:

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. Klicken Sie auf der Demo-Webseite auf die Schaltfläche Send an XHR request (XHR-Anforderung senden ).

   In der Tabelle "Anforderungen" des Netzwerktools wird eine data.json Zeile hinzugefügt. Die Spalte Initiator lautet script.js:20.

6. Klicken Sie in der Tabelle Anforderungen mit der rechten Maustaste auf die data.json Anforderung, und wählen Sie dann XHR wiedergeben aus.

   Oder wählen Sie die Anforderung aus, und drücken Sie dann R.

   In der Tabelle "Anforderungen" des Netzwerktools wird eine zweite data.json Zeile hinzugefügt. Die Spalte Initiator lautet Other:

   

Informationen zu Initiatoren finden Sie unter:

• Zeigen Sie unten Initiatoren und Abhängigkeiten an.
• Protokollieren sie die Netzwerkaktivität in Der Netzwerkaktivität untersuchen.

Nachdem Sie auf die Schaltfläche Send an XHR request (Send an XHR request ) der Demo geklickt haben (wodurch JavaScript eine Anforderung sendet), wird das Menüelement Kopierstapelablaufverfolgung im Menü >Kopieren für Anforderungen angezeigt. Weitere Informationen finden Sie weiter unten unter Kopieren von Netzwerkanforderungen in die Zwischenablage.

Ändern des Ladeverhaltens

Emulieren eines Erstbesuchers durch Deaktivieren des Browsercaches

Aktivieren Sie das Kontrollkästchen Cache deaktivieren , um zu emulieren, wie ein Erstbenutzer Ihre Website erlebt. DevTools deaktiviert den Browsercache. Dieses Feature emuliert die Erfahrung eines Erstbenutzers genauer, da Anforderungen aus dem Browsercache bei wiederholten Besuchen bereitgestellt werden.

Das Kontrollkästchen Cache deaktivieren :

Deaktivieren des Browsercaches über das Tool "Netzwerkbedingungen"

Über das Netzwerktool können Sie das Tool Netzwerkbedingungen im Bereich Schnellansicht am unteren Rand von DevTools öffnen und dann den Browsercache von dort aus deaktivieren:

1. Klicken Sie im Netzwerktool auf die Schaltfläche Weitere Netzwerkbedingungen ( ". Das Tool Netzwerkbedingungen wird im Bereich Schnellansicht am unteren Rand von DevTools geöffnet.

2. Aktivieren Sie im Tool Netzwerkbedingungen das Kontrollkästchen Cache deaktivieren :

   

Siehe auch:

• Tool für Netzwerkbedingungen

Manuelles Löschen des Browsercaches

Um den Browsercache jederzeit manuell zu löschen, klicken Sie mit der rechten Maustaste auf eine beliebige Stelle in der Tabelle Anforderungen , und wählen Sie dann Browsercache löschen aus:

Siehe auch:

• TODO-App

Offline emulieren

Eine Klasse von Web-Apps mit dem Namen Progressive Web-Apps (PWA) kann mit Hilfe von Service Workern offline funktionieren. Es kann hilfreich sein, ein Gerät ohne Datenverbindung schnell zu simulieren, wenn Sie diese Art von App erstellen.

Um eine Offlinenetzwerkumgebung zu simulieren, wählen Sie das Dropdownmenü >Keine DrosselungVoreinstellungen>Offline aus.

Das Dropdownmenü Offline :

Emulieren langsamer Netzwerkverbindungen

Um schnelles 4G, langsames 4G oder 3G zu emulieren, wählen Sie die entsprechende Voreinstellung im Dropdownmenü Drosselung in der Aktionsleiste oben aus:

Sie können aus verschiedenen Voreinstellungen wählen, z. B.:

• Schnelles 4G
• Langsames 4G
• 3 G
• Offline

Um Ihre eigenen benutzerdefinierten Voreinstellungen hinzuzufügen, klicken Sie auf das Menü Drosselung , und wählen Sie dann Benutzerdefiniert>Hinzufügen aus.

Auf der Registerkarte des Netzwerktools wird ein Warnsymbol angezeigt, um Sie daran zu erinnern, dass die Drosselung aktiviert ist:

Siehe auch:

• Simulieren Sie eine langsamere Netzwerkverbindung unter Netzwerkaktivität untersuchen.
• TODO-App

Erstellen eines benutzerdefinierten Einschränkungsprofils

Zusätzlich zu Voreinstellungen wie langsamem oder schnellem 4G können Sie auch eigene benutzerdefinierte Drosselungsprofile hinzufügen.

So erstellen Sie ein benutzerdefiniertes Drosselungsprofil:

1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. zur Demoseite "Netzwerkaktivität untersuchen ".

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie das Tool Netzwerk aus.

4. Wählen Sie im Menü Drosselung im Abschnitt Benutzerdefiniert die Option Hinzufügen aus.

   Oder wählen Sie Anpassen und Steuern der DevTools-Einstellungsdrosselung>> aus.

   Die Seite DevTools-Einstellungen wird geöffnet, wobei die Seite Drosselung ausgewählt ist.

5. Klicken Sie im Abschnitt Netzwerkeinschränkungsprofile auf die Schaltfläche Profil hinzufügen .

   Beispielwerte sind unten dargestellt und werden im nächsten Abschnitt verwendet.

6. Geben Sie im Textfeld Profilname10 KBit/s ein.

7. Geben Sie im Textfeld Herunterladen den Wert 10 (für 10 kbit/s) ein.

8. Geben Sie im Textfeld Hochladen den Wert 10 (für 10 kbit/s) ein.

9. Geben Sie im Textfeld Latenzden Wert 10 (für 10 ms) ein.

10. Geben Sie im Textfeld Paketverlust den Wert 1 ein (für 1 %).

11. Geben Sie im Textfeld Länge der Paketwarteschlangeden Wert 10 ein.

12. Aktivieren Sie das Kontrollkästchen Paket neu anordnen :

    

13. Klicken Sie auf die Schaltfläche Hinzufügen.

    Das benutzerdefinierte Drosselungsprofil wird angezeigt:

    

14. Klicken Sie im Bereich Einstellungen auf die Schaltfläche Schließen (X).

15. Wählen Sie das Tool Netzwerk aus.

16. Wählen Sie im Dropdownmenü Drosselung im Abschnitt Benutzerdefiniert Ihr benutzerdefiniertes Drosselungsprofil aus, z. B. 10 KBit/s:

    

    Auf der Registerkarte Netzwerk wird ein Warnungssymbol () angezeigt, um Sie daran zu erinnern, dass die Drosselung aktiviert ist.

Siehe auch:

• Richten Sie ein benutzerdefiniertes Netzwerkeinschränkungsprofil in der Drosselung ein.

Drosseln von WebSocket-Verbindungen

Zusätzlich zu HTTP-Anforderungen kann DevTools WebSocket-Verbindungen drosseln. Wir verwenden das langsame benutzerdefinierte Drosselungsprofil, das im vorherigen Abschnitt erstellt wurde, um die Auswirkungen einer gedrosselten WebSocket-Verbindung auf Ihrer Webseite anzuzeigen.

So beobachten Sie die WebSocket-Drosselung:

1. Führen Sie die Schritte im vorherigen Abschnitt Erstellen eines benutzerdefinierten Einschränkungsprofils aus.

2. Wechseln Sie zu einer Seite, die WebSockets verwendet, z. B. Online WebSocket Tester, in einem neuen Fenster oder einer neuen Registerkarte.

3. Stellen Sie auf der Seite die WebSocket-Verbindung her.

   Wenn Sie die Webseite Online WebSocket Tester verwenden, klicken Sie auf die Schaltfläche Verbinden .

   Wenn Sie kein PieSocket-Konto erstellen, um ein API-Token abzurufen, wird auf der Webseite "Connection Established - {"error":"Unknown API key"}" angezeigt.

   Wenn Sie ein PieSocket-Konto erstellen, um ein API-Token abzurufen, wird auf der Webseite einfach "Verbindung hergestellt" angezeigt.

4. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

5. Wählen Sie in DevTools im Netzwerktool im Dropdownmenü Drosselung die Option Benutzerdefinierte>10 KBit/s aus.

   Diese Option wurde im vorherigen Abschnitt Erstellen eines benutzerdefinierten Einschränkungsprofils erstellt.

6. Löschen Sie auf der Webseite Online WebSocket Tester im Meldungstextfeld DevTools ohne Drosselung, und geben Sie DevTools mit Drosselung ein.

7. Klicken Sie auf der Webseite Online WebSocket Tester auf die Schaltfläche Senden .

   Die Konsole auf der WebSocket-Online-Tester-Webseite zeigt DevTools mit Drosselung an.

8. Wählen Sie oben im Netzwerktool die Schaltfläche Socketfilter aus (siehe unten).

9. Klicken Sie in der Tabelle auf Ihren Verbindungsnamen, z. B. channel_123?api_key=....

   Registerkarten werden angezeigt.

10. Wählen Sie die Registerkarte Nachrichten aus (siehe unten).

    Die WebSocket-Nachrichten, die zwischen Client und Server gesendet wurden, werden angezeigt.

    In der Spalte Zeit wird angezeigt, wann Nachrichten empfangen oder gesendet wurden. Diese Zeitwerte spiegeln die gedrosselte Netzwerkverbindung wider.

Emulieren langsamer Netzwerkverbindungen über das Tool "Netzwerkbedingungen"

Im Tool Netzwerk können Sie das Tool Netzwerkbedingungen im Bereich Schnellansicht unten in DevTools öffnen und dann die Netzwerkverbindung von dort aus drosseln:

1. Klicken Sie im Tool Netzwerk auf die Schaltfläche Weitere Netzwerkbedingungen ( Das Tool Netzwerkbedingungen wird im Bereich Schnellansicht am unteren Rand von DevTools geöffnet.

2. Wählen Sie im Tool Netzwerkbedingungen im Menü Netzwerkdrosselung eine Verbindungsgeschwindigkeit aus.

Siehe auch:

• Tool für Netzwerkbedingungen

Manuelles Löschen von Browsercookies

Um Browsercookies jederzeit manuell zu löschen, klicken Sie mit der rechten Maustaste auf eine beliebige Stelle in der Tabelle Anforderungen , und wählen Sie dann Browsercookies löschen aus.

Http-Antwortheader überschreiben

Siehe auch:

• Überschreiben von Webseitenressourcen mit lokalen Kopien (Registerkarte "Außerkraftsetzungen")
• Überschreiben Sie Dateien und HTTP-Antwortheader in lokalem Außerkraftsetzen von Webinhalten und HTTP-Antwortheadern.

Überschreiben des Benutzer-Agents

So überschreiben Sie den Benutzer-Agent manuell:

1. Klicken Sie im Netzwerktool auf die Schaltfläche Weitere Netzwerkbedingungen ( ). Das Tool Netzwerkbedingungen wird im Bereich Schnellansicht am unteren Rand von DevTools geöffnet.

2. Deaktivieren Sie im Tool Netzwerkbedingungen das Kontrollkästchen Browserstandard verwenden . Die anderen Steuerelemente werden verfügbar.

3. Wählen Sie im Menü eine Benutzer-Agent-Option aus, oder geben Sie einen benutzerdefinierten Benutzer-Agent in das Textfeld ein.

Festlegen von Clienthinweisen für den Benutzer-Agent

Wenn An Ihrem Standort Clienthinweise für den Benutzer-Agent verwendet werden und Sie sie testen möchten, können Sie diese entweder im Tool netzwerkbedingungen oder in Emulate mobile devices (Device Emulation) festlegen.

So legen Sie Clienthinweise für den Benutzer-Agent im Tool für Netzwerkbedingungen fest:

1. Klicken Sie im Netzwerktool auf die Schaltfläche Weitere Netzwerkbedingungen ( . Das Tool Netzwerkbedingungen wird im Bereich Schnellansicht am unteren Rand von DevTools geöffnet.

2. Deaktivieren Sie im Abschnitt Benutzer-Agent das Kontrollkästchen Browserstandard verwenden , und erweitern Sie dann Clienthinweise für Den Benutzer-Agent:

   

3. Wählen Sie in der Dropdownliste Benutzer-Agent einen vordefinierten Browser und ein vordefiniertes Gerät aus. Oder übernehmen Sie den Standardwert Benutzerdefiniert... und geben Sie Informationen in das Textfeld Benutzerdefinierten Benutzer-Agent eingeben ein.

4. Geben Sie für die Auswahl (vordefiniert oder benutzerdefiniert) Clienthinweise des Benutzer-Agents wie folgt an:

   • Marke und Version wie Edge und 92. Um mehrere Marken-/Versionspaare hinzuzufügen, klicken Sie auf + Marke hinzufügen.
   • Vollständige Browserversion wie 92.0.1111.0.
   • Plattform und Version wie Windows und 10.0.
   • Architektur wie x86.
   • Gerätemodell wie Galaxy Nexus.

   Sie können alle Clienthinweise des Benutzer-Agents festlegen oder ändern. es sind keine erforderlichen Werte vorhanden.

5. Wählen Sie Aktualisieren aus.

6. Klicken Sie zum Überprüfen der Änderungen auf Konsole , und geben Sie ein navigator.userAgentData. Erweitern Sie die Ergebnisse nach Bedarf, um Änderungen an Benutzer-Agent-Daten anzuzeigen.

Siehe auch:

• Benutzer-Agent-Clienthinweise unter Erkennen von Microsoft Edge von Ihrer Website.

Suchanforderungen

So suchen Sie Anforderungsheader, Nutzlasten und Antworten:

1. Klicken Sie im Netzwerktool auf die Schaltfläche Suchen (). Oder drücken Sie STRG+F (Windows, Linux) oder BEFEHL+F (macOS).

   Die Registerkarte Suchen wird auf der linken Seite des Netzwerktools geöffnet.

2. Geben Sie im Textfeld Suchen Ihre Abfragezeichenfolge ein, und drücken Sie dann die EINGABETASTE.

   Klicken Sie optional auf die Schaltfläche Groß-/Kleinschreibung abgleichen , um die Groß-/Kleinschreibung zu aktivieren. Klicken Sie optional auf die Schaltfläche Regulärer Ausdruck , um reguläre Ausdrücke zu aktivieren.

3. Klicken Sie auf eines der Suchergebnisse. Das Netzwerktool hebt die übereinstimmene Anforderung gelb hervor. Das Netzwerktool öffnet auch die Registerkarte Header oderAntwort und hebt die dort übereinstimmene Zeichenfolge hervor, falls vorhanden.

Klicken Sie zum Aktualisieren der Suchergebnisse auf der Registerkarte Suchen auf die Schaltfläche Aktualisieren ().

Klicken Sie zum Löschen von Suchergebnissen auf der Registerkarte Suchen auf die Schaltfläche Suche löschen ().

Weitere Informationen zu allen Möglichkeiten, wie Sie in DevTools suchen können, finden Sie unter Suchen von Quelldateien für eine Seite mit dem Suchtool.

Filtern von Anforderungen

Sie können Anforderungen nach Eigenschaften, Typ oder Uhrzeit filtern und Daten-URLs ausblenden. Die Dropdownliste Weitere Filter enthält die folgenden Optionen und status Häkchen:

• Daten-URLs ausblenden
• Ausblenden von Erweiterungs-URLs
• Blockierte Antwortcookies
• Blockierte Anforderungen
• Anforderungen von Drittanbietern

Die Dropdownliste enthält eine Zahl auf der linken Seite, die angibt, wie viele Filter in der Dropdownliste ausgewählt sind.

Filtern von Anforderungen nach Eigenschaften

Verwenden Sie das Textfeld Filter , um Anforderungen nach Eigenschaften zu filtern, z. B. nach der Domäne oder größe der Anforderung.

Wenn das Textfeld nicht angezeigt wird, ist der Bereich Filter wahrscheinlich ausgeblendet. Weitere Informationen finden Sie unter Ausblenden des Filterbereichs weiter unten.

Das Textfeld Filter :

Um den Filter umzukehren, aktivieren Sie das Kontrollkästchen Umkehren neben dem Feld Filter .

Sie können mehrere Eigenschaften gleichzeitig verwenden, indem Sie jede Eigenschaft durch ein Leerzeichen trennen. Zeigt beispielsweise alle PNGs an, mime-type:image/png larger-than:1K die größer als 1 Kilobyte sind. Die Filter mit mehreren Eigenschaften entsprechen Vorgängen AND . OR -Vorgänge werden nicht unterstützt.

Die vollständige Liste der unterstützten Eigenschaften:

Filtern von Anforderungen nach Typ

Um Anforderungen nach Anforderungstyp zu filtern, klicken Sie auf die Schaltflächen im Netzwerktool : All, Fetch/XHR, Doc, CSS, JS, Font, Img, Media, Manifest, WS (WebSocket), Wasm (WebAssembly) oder Other (ein anderer Typ, der hier nicht aufgeführt ist).

Wenn die Schaltflächen nicht angezeigt werden, ist der Bereich Filter möglicherweise ausgeblendet. Weitere Informationen finden Sie weiter unten unter Ausblenden des Bereichs "Filter".

Um mehrere Typfilter gleichzeitig zu aktivieren, halten Sie STRG (Windows, Linux) oder Befehl (macOS) gedrückt, und klicken Sie dann auf die Filter.

Filtern von Anforderungen nach Zeit

Klicken Sie auf den Bereich Übersicht , und ziehen Sie ihn nach links oder rechts, um nur Anforderungen anzuzeigen, die während dieses Zeitraums aktiv waren. Der Filter ist inklusiv. Jede Anforderung, die während der hervorgehobenen Zeit aktiv war, wird angezeigt.

Herausfiltern aller Anforderungen, die etwa 300 ms inaktiv waren:

Daten-URLs ausblenden

Daten-URLs sind kleine Dateien, die in andere Dokumente eingebettet sind. Jede Anforderung, die in der Tabelle Anforderungen angezeigt wird, die mit data: beginnt, ist eine Daten-URL.

Deaktivieren Sie das Kontrollkästchen Daten-URLs ausblenden , um die Anforderungen auszublenden:

Ausblenden von Erweiterungs-URLs

Um sich auf den von Ihnen erstellten Code zu konzentrieren, können Sie irrelevante Anforderungen herausfiltern, die von Erweiterungen gesendet werden, die Sie möglicherweise in Microsoft Edge installiert haben. Erweiterungsanforderungen verfügen über URLs, die mit chrome-extension://beginnen.

Um Erweiterungsanforderungen auszublenden, wählen Sie in der Aktionsleiste Filter das Dropdownmenü Weitere Filter und dann Erweiterungs-URLs ausblenden aus, sodass daneben ein Häkchen angezeigt wird:

Die status-Leiste unten zeigt die Anzahl der angezeigten Anforderungen aus der Gesamtanzahl an, z. B. 5/10 Anforderungen.

Nur die Anforderungen mit blockierten Antwortcookies anzeigen

Wenn Sie alles außer den Anforderungen mit aus irgendeinem Grund blockierten Antwortcookies herausfiltern möchten, wählen Sie in der Aktionsleiste Filter die Dropdownliste Weitere Filter und dann Blockierte Antwortcookies aus, sodass daneben ein Häkchen angezeigt wird.

Um herauszufinden, warum ein Antwortcookies blockiert wurde, wählen Sie die Anforderung aus (unter Name), öffnen Sie die Registerkarte Cookies (rechts), und zeigen Sie dann auf das Informationssymbol ().

Zum Beispiel:

1. Wählen Sie in Microsoft Edge Einstellungen und mehr>Neues InPrivate-Fenster aus.

2. Geben Sie in der Adressleiste Microsoft.com ein.

3. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

4. Wählen Sie das Tool Netzwerk aus.

5. Stellen Sie sicher, dass die Schaltfläche Alle Filter ausgewählt ist.

6. Aktualisieren Sie die Webseite.

   Viele Nachrichten sind im Netzwerktool aufgeführt.

7. Wählen Sie auf der Aktionsleiste Filter die Dropdownliste Weitere Filter und dann Blockierte Antwortcookies aus.

   Im Menü wird ein Häkchen neben Blockierte Antwortcookies angezeigt.

8. Klicken Sie außerhalb der Dropdownliste, um sie zu schließen.

   Anforderungen mit blockierten Antwortcookies werden angezeigt, z. B. id?d_visid_ver=....

9. Wählen Sie eine Anforderung aus, z. B. id?d_visid_ver=....

   Die Randleiste wird mit Registerkarten geöffnet.

10. Wählen Sie die Registerkarte Cookies aus.

11. Zeigen Sie auf das Infosymbol ().

    Die QuickInfo lautet beispielsweise: "Dieser Versuch, ein Cookie über einen Set-Cookie Header festzulegen, wurde aufgrund von Benutzereinstellungen blockiert."

    

    Auf der status-Leiste unten wird die Anzahl der angezeigten Anforderungen angezeigt.

Darüber hinaus zeigt das Netzwerktool ein Warnsymbol () neben einer Anforderung an, bei der Cookies aufgrund von Edgeflags oder der Konfiguration blockiert wurden. Zeigen Sie auf das Symbol, um eine QuickInfo mit einem Hinweis anzuzeigen, und klicken Sie darauf, um zum Tool Probleme zu wechseln, um weitere Informationen zu finden.

Nur blockierte Anforderungen anzeigen

Um alles außer blockierten Anforderungen herauszufiltern, wählen Sie in der Aktionsleiste Filterdie Option Weitere Filter>Blockierte Anforderungen aus, sodass ein Häkchen angezeigt wird. Um dies zu testen, können Sie das Tool zum Blockieren von Netzwerkanforderungen im Bereich Schnellansicht am unteren Rand von DevTools verwenden. Weitere Informationen finden Sie unter Blockieren von Anforderungen unter Überprüfen der Netzwerkaktivität.

Zum Beispiel:

1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. zur Demoseite "Netzwerkaktivität untersuchen ".

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Tool Netzwerk aus.

4. Aktualisieren Sie die Webseite.

   In der Tabelle Anforderungen sind die Dateien , .css, .pngund .js aufgeführt.html.

5. Wählen Sie in der Dropdownliste Weitere Filter (mit der QuickInfo Nur Anforderungen einblenden/ausblenden) die Option Blockierte Anforderungen aus.

   In der Dropdownliste wird ein Häkchen neben Blockierte Anforderungen angezeigt.

6. Klicken Sie außerhalb der Dropdownliste, um sie zu schließen.

   Die Tabelle Requests ist leer, da DevTools keine Anforderungen blockiert, und Anforderungen werden jetzt so gefiltert, dass nur blockierte Anforderungen angezeigt werden.

7. Drücken Sie ESC ein- oder zweimal, sodass der Bereich Schnellansicht am unteren Rand von DevTools geöffnet ist.

8. Klicken Sie in der Symbolleiste Schnellansicht auf die Schaltfläche Weitere Tools (), und wählen Sie dann Netzwerkanforderungsblockierung aus.

   Das Tool zum Blockieren von Netzwerkanforderungen wird im Bereich Schnellansicht geöffnet.

9. Klicken Sie im Tool zum Blockieren von Netzwerkanforderungen auf die Schaltfläche Netzwerkanforderungsblockierungsmuster hinzufügen (

10. Geben Sie im Textfeld Textmuster zum Blockieren übereinstimmende Anforderungen*.pngein, und klicken Sie dann auf die Schaltfläche Hinzufügen .

    *.png ist mit einem Häkchen aufgeführt.

    Im Netzwerktool ist die Tabelle Anforderungen noch leer, da noch keine Anforderungen aktiv blockiert wurden.

11. Aktualisieren Sie die Webseite.

    

    • Auf der Demowebseite wird anstelle eines Edge-Logos neben der Überschrift ein Symbol für ein fehlerhaftes Bild zusammen mit dem Alternativtext des Bilds (Das Microsoft Edge DevTools-Logo) angezeigt.

    • Im Netzwerktool werden in der Tabelle Anforderungen nur Dateien aufgelistet .png . In der Tabelle Anforderungen werden blockierte Anforderungen als roter Text hervorgehoben.

    • Im Netzwerktool zeigt die status leiste am unteren Rand die Anzahl der angezeigten Anforderungen aus der Gesamtzahl an, z. B. 2/5 Anforderungen.

Nur Anforderungen von Drittanbietern anzeigen

Wenn Sie alles mit Ausnahme der Anforderungen mit dem Ursprung herausfiltern möchten, der sich vom Seitenursprung unterscheidet, wählen Sie in der Aktionsleiste Filterdie Option Weitere Filter> vonDrittanbieteranforderungen aus, sodass ein Häkchen angezeigt wird. Probieren Sie es auf der Demoseite Netzwerkaktivität untersuchen aus.

Auf der status-Leiste unten wird die Anzahl der angezeigten Anforderungen angezeigt.

Sortieranforderungen

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

Sortieren nach Spalte

Klicken Sie auf die Kopfzeile einer beliebigen Spalte in den Anforderungen , um Anforderungen nach dieser Spalte zu sortieren.

Sortieren nach Aktivitätsphase

Die Spalte Wasserfall ist standardmäßig deaktiviert. So aktivieren Sie die Spalte Wasserfall : Klicken Sie mit der rechten Maustaste auf eine Tabellenüberschrift Anforderungen , und wählen Sie dann das einfache Wasserfallmenüelement aus, das kein Untermenü enthält.

So ändern Sie die Sortierung von Anforderungen durch die Wasserfallspalte :

• Klicken Sie mit der rechten Maustaste auf die Kopfzeile der Tabelle Anforderungen , klicken Sie auf Wasserfall, und wählen Sie dann eine der folgenden Optionen aus:

  • Startzeit : Die erste initiierte Anforderung wird oben platziert.

  • Antwortzeit : Die erste Anforderung, die mit dem Herunterladen begonnen hat, wird oben platziert.

  • Endzeit : Die erste abgeschlossene Anforderung wird oben platziert.

  • Gesamtdauer : Die Anforderung mit den kürzesten Verbindungseinstellungen und der Anforderung oder Antwort wird oben platziert.

  • Latenz : Die Anforderung, die die kürzeste Zeit auf eine Antwort gewartet hat, wird oben platziert.

Bei diesen Beschreibungen wird davon ausgegangen, dass jede entsprechende Option von der kürzesten bis zur längsten rangiert wird. Klicken Sie auf die Kopfzeile der Spalte Wasserfall , um die Reihenfolge umzukehren.

Im Folgenden wird gezeigt, wie der Wasserfall nach Gesamtdauer sortiert wird. Der hellere Teil jedes Balkens ist die Zeit, die gewartet wird, und der dunklere Teil ist die Zeit, die für das Herunterladen von Bytes aufgewendet wird:

Analysieren von Anforderungen

Solange DevTools geöffnet ist, protokolliert es alle Anforderungen im Netzwerktool . Verwenden Sie das Netzwerktool , um Anforderungen zu analysieren.

Anzeigen eines Anforderungsprotokolls

Verwenden Sie die Tabelle Anforderungen , um ein Protokoll aller Anforderungen anzuzeigen, die ausgeführt wurden, während DevTools geöffnet ist. Um weitere Informationen zu den einzelnen Elementen anzuzeigen, klicken oder zeigen Sie auf Anforderungen.

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

• Name. Der Dateiname der Ressource oder ein Bezeichner für die Ressource.
• Status. Der HTTP-Statuscode.
• Geben Sie ein. Der MIME-Typ der angeforderten Ressource.
• Initiator. Die folgenden Objekte oder Prozesse können Anforderungen initiieren:
  • Parser. Der HTML-Parser.
  • Umleitung. Eine HTTP-Umleitung.
  • Skript. Eine JavaScript-Funktion.
  • Sonstige. Einige andere Prozesse oder Aktionen, z. B. das Navigieren zu einer Seite über einen Link oder das Eingeben einer URL in die Adressleiste.
• Größe. Die kombinierte Größe der Antwortheader und des Antworttexts, wie vom Server übermittelt.
• Zeit. Die Gesamtdauer vom Anfang der Anforderung bis zum Empfang des letzten Byte in der Antwort.
• Erfüllt von. Gibt an, ob die Anforderung vom HTTP-Cache oder vom Service Worker der App erfüllt wurde.

Die Spalte Wasserfall ist standardmäßig deaktiviert. Um die Wasserfallspalte zu aktivieren, klicken Sie mit der rechten Maustaste auf eine Tabellenüberschrift Anforderungen , und wählen Sie dann das einfache Wasserfallmenüelement aus, das kein Untermenü enthält.

Hinzufügen oder Entfernen von Spalten

Klicken Sie mit der rechten Maustaste auf die Kopfzeile der Tabelle Anforderungen , und wählen Sie einen Spaltennamen aus, um ihn auszublenden oder anzuzeigen. Die derzeit angezeigten Spalten enthalten Häkchen daneben.

Hinzufügen benutzerdefinierter Spalten für Antwortheader

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

1. Klicken Sie mit der rechten Maustaste auf die Kopfzeile der Tabelle Anforderungen , und wählen Sie dann Antwortheader Kopfzeilen>verwalten aus.

   Das Popupfenster Kopfzeilenspalten verwalten wird geöffnet.

2. Klicken Sie auf die Schaltfläche Benutzerdefinierte Kopfzeile hinzufügen , geben Sie den namen der benutzerdefinierten Kopfzeile ein, und klicken Sie dann auf Hinzufügen.

   

Gruppieren von Anforderungen nach Inlineframes

Wenn Inlineframes auf einer Seite viele Anforderungen auslösen, können Sie das Anforderungsprotokoll vereinfachen, indem Sie sie gruppieren.

So gruppieren Sie Anforderungen nach iframes:

1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. zur Referenz demo des Netzwerktools.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Tool Netzwerk aus.

4. Aktualisieren Sie die Webseite.

   In der Tabelle "Anforderungen" des Netzwerktools werden Zeilen für Folgendes angezeigt:

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. Klicken Sie auf der Demo-Webseite auf die Schaltfläche iframes laden .

   In der Tabelle Anforderungen werden viele Zeilen hinzugefügt:

   

6. Klicken Sie im Tool Netzwerk auf die Schaltfläche Netzwerkeinstellungen ("), und aktivieren Sie dann das Kontrollkästchen Gruppieren nach Frame .

   In der Tabelle Anforderungen werden erweiterbare Framenamen angezeigt.

7. Klicken Sie in der Tabelle Anforderungen auf ein Erweiterungsdreieck auf einem Frame.

   Die Anforderungen, die vom Inlineframe initiiert wurden, werden angezeigt:

   

Anzeigen der Zeitsteuerungsbeziehung von Anforderungen

Verwenden Sie die Spalte Wasserfall des Bereichs Anforderungen , um die Zeitsteuerungsbeziehungen von Anforderungen anzuzeigen. Die Standard-organization der Spalte Wasserfall verwendet die Startzeit der Anforderungen. Daher wurden Anforderungen, die weiter links liegen, früher gestartet als die Anforderungen, die weiter rechts liegen.

Die Spalte Wasserfall ist standardmäßig deaktiviert. Um die Wasserfallspalte zu aktivieren, klicken Sie mit der rechten Maustaste auf eine Tabellenüberschrift Anforderungen , und wählen Sie dann das einfache Wasserfallmenüelement aus, das kein Untermenü enthält.

Informationen zu den verschiedenen Möglichkeiten zum Sortieren des Wasserfalls finden Sie oben unter Sortieren nach Aktivitätsphase.

Die Spalte Wasserfall des Bereichs Anforderungen :

Analysieren der Nachrichten einer WebSocket-Verbindung

So zeigen Sie die Nachrichten einer WebSocket-Verbindung an:

1. Navigieren Sie zu einer Webseite, z. B. dem Online-Websocket-Tester.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie das Tool Netzwerk aus.

   Die Schaltfläche "Alle Filter" ist standardmäßig ausgewählt. Der Bereich Netzwerk ist leer und zeigt keine Meldungen an.

4. Aktualisieren Sie die Webseite.

   In der Tabelle "Anforderungen" des Netzwerktools sind viele Anforderungen aufgeführt.

5. Wählen Sie oben im Tool Netzwerk die Schaltfläche Socketfilter mit quickInfo aus: WebSocket | Webtransport | DirectSocket.

   Die gefilterte Liste der Anforderungen ist leer.

6. Klicken Sie auf der Webseite Online Websocket Tester auf die Schaltfläche Verbinden .

   Wenn Sie kein Konto und kein API-Token eingerichtet haben, wird auf der Seite Folgendes angezeigt:

   • Verbindung hergestellt
   • {"error":"Unknown API key"} mit einem nach unten zeigenden Dreieck; wird vom Server an den Browser gesendet.

   Im Netzwerktool wird auf der Registerkarte Meldungen die Anforderung angezeigt:

   • channel_123?api_key=...

7. Wählen Sie in der Liste der Anforderungen die WebSocket-Verbindung aus, z. B. channel_123?api_key=....

   Die Randleiste wird mit Registerkarten geöffnet.

8. Wählen Sie die Registerkarte Nachrichten aus.

   Wenn Sie sich nicht für ein API-Token registriert haben, wird die Nachricht auf der Registerkarte Meldungen aufgelistet:

   • {"error":"Unknown API key"} mit einem roten Pfeil nach unten; wird vom Server an den Browser gesendet.

9. Ändern Sie auf der Webseite Online Websocket Tester im Textfeld Hello PieSocket! in Hello world!, und klicken Sie dann auf die Schaltfläche Senden .

   Auf der Webseite zeigt die Konsole die Meldung Hello world! mit einem nach oben zeigenden Dreieck an. wird vom Browser an den Server gesendet.

   Im Netzwerktool auf der Registerkarte Nachrichten werden in der Tabelle die letzten 100 Nachrichten angezeigt. In diesem Fall wird die Nachricht hinzugefügt:

   • Hallo Welt! mit einem grünen Pfeil nach oben; vom Browser an den Server gesendet:

Hinweis: Um rote Nach-unten-Pfeil-Meldungen (echoed vom Server) sowie grüne NACH-OBEN-Meldungen zu erhalten, müssen Sie Folgendes ausführen:

1. Erstellen Sie ein Konto auf der PieSocket-Website. Dadurch wird ein API-Token erstellt.

2. Erstellen Sie einen Cluster am PieSocket-Standort.

3. Klicken Sie auf der Seite PieSocket Dashboard auf die Schaltfläche Online testen.

   Die Seite Online WebSocket Tester wird mit Ihren Abfrageparametern geöffnet.

4. Klicken Sie auf die Schaltfläche Verbinden .

Um die Tabelle Anforderungen zu aktualisieren, klicken Sie im Bereich Name erneut auf den Namen der WebSocket-Verbindung.

Die Tabelle Requests enthält die folgenden drei Spalten:

• Daten: Die Nachrichtennutzlast. Wenn die Nachricht Nur-Text ist, 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:

  • Fortsetzungsrahmen
  • Binärer Frame
  • Verbindung schließen Frame
  • Pingframe
  • Pong Frame

• Länge. Die Länge der Nachrichtennutzlast in Bytes.

• Zeit. Der Zeitpunkt, zu dem die Nachricht empfangen oder gesendet wurde.

Analysieren von Ereignissen in einem Stream

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

1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Webseite, auf der Ereignisse wie die Referenzdemo des Netzwerktools gestreamt werden.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Tool Netzwerk aus.

4. Aktualisieren Sie die Webseite.

   In der Tabelle "Anforderungen" des Netzwerktools werden Zeilen für Folgendes angezeigt:

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. Klicken Sie auf der Demowebseite auf die Schaltfläche Stream vom Server gesendeten Ereignisse.

   In der Tabelle Anforderungen wird eine sse Zeile (vom Server gesendetes Ereignis) hinzugefügt.

6. Wählen Sie die sse Anforderung (vom Server gesendetes Ereignis) aus.

   Die Randleiste wird geöffnet, einschließlich einer EventStream-Registerkarte .

7. Wählen Sie die Registerkarte EventStream aus:

   

   Eine neue "Hello"-Nachricht wird empfangen und einmal pro Sekunde angezeigt.

Um Ereignisse zu filtern, geben Sie einen regulären Ausdruck in der Filterleiste oben auf der Registerkarte EventStream an.

Um die Liste der erfassten Ereignisse zu löschen, klicken Sie auf die Schaltfläche Löschen (").

Siehe auch:

• Verwenden der Fetch-API
• Vom Server gesendete Ereignisse : EventSource-API.
• XMLHttpRequest : XHR.

Anzeigen einer Vorschau eines Antworttexts

So zeigen Sie eine Vorschau des Inhalts eines HTTP-Antworttexts an:

1. Klicken Sie im Netzwerktool in der Tabelle Anforderungen in der Spalte Name auf den Namen einer Anforderung.

2. Wählen Sie auf der Randleiste die Registerkarte Vorschau aus:

   

Die Registerkarte Vorschau ist hauptsächlich zum Anzeigen von Bildern nützlich.

Anzeigen eines Antworttexts

So zeigen Sie den Antworttext für eine Anforderung an:

1. Klicken Sie in der Tabelle Anforderungen in der Spalte Name auf den Namen der Anforderung.

2. Wählen Sie auf der Randleiste die Registerkarte Antwort aus:

   

Anzeigen von HTTP-Headern

So zeigen Sie HTTP-Headerdaten zu einer Anforderung an:

1. Klicken Sie in der Tabelle Anforderungen auf den Namen der Anforderung.

2. Wählen Sie auf der Randleiste die Registerkarte Überschriften aus, und scrollen Sie dann nach unten zu den verschiedenen Abschnitten:

   • Allgemein
   • Early Hints Headers (optional)
   • Antwortheader
   • Anforderungsheader

   

Anzeigen der HTTP-Headerquelle

Standardmäßig werden auf der Registerkarte Kopfzeilen die Kopfzeilennamen alphabetisch angezeigt. So zeigen Sie die HTTP-Headernamen in der Reihenfolge an, in der sie empfangen wurden:

1. Wechseln Sie zu einer Webseite, die XHR verwendet, z. B . Entfernen von -ms-high-contrast und Umarmung standardbasierter erzwungener Farben in Microsoft Edge, in einem neuen Fenster oder einer neuen Registerkarte.

2. Akzeptieren Sie Cookies in der Banneraufforderung, sofern sie angezeigt wird.

   In Regionen, in denen die Datenschutz-Grundverordnung (DSGVO) erzwungen wird, zeigt diese Website ein Cookie-Banner an und sendet collect keine Anfrage (unten), es sei denn, Sie akzeptieren Cookies im Banner.

3. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

4. Wählen Sie das Tool Netzwerk aus.

5. Aktualisieren Sie die Webseite.

   In der Tabelle Anforderungen sind viele Anforderungen aufgeführt.

6. Klicken Sie oben auf die rote Schaltfläche Aufzeichnung des Netzwerkprotokolls beenden (").

7. Klicken Sie in der Tabelle Anforderungen auf die Spalte Name , um Anforderungen alphabetisch zu sortieren, und wählen Sie dann eine Sammlungsanforderung aus.

   Die Randleiste wird mit Registerkarten geöffnet.

8. Wählen Sie die Registerkarte Header aus :

   

9. Aktivieren Sie das Kontrollkästchen Roh neben dem Abschnitt Antwortheader oder Anforderungsheader .

Siehe auch:

• Http-Header werden oben angezeigt.

Warnung zu vorläufigen Headern

Manchmal wird auf der Registerkarte Header die Warnmeldung Vorläufige Header angezeigt. Dies kann folgende Gründe haben:

• Die Anforderung wurde nicht über das Netzwerk gesendet, sondern aus einem lokalen Cache bereitgestellt, in dem die ursprünglichen Anforderungsheader nicht gespeichert werden.
• Die Netzwerkressource ist ungültig.
• Aus Sicherheitsgründen.

Angenommen, die Anforderung wurde nicht über das Netzwerk gesendet, sondern aus einem lokalen Cache bereitgestellt, in dem die ursprünglichen Anforderungsheader nicht gespeichert werden. In diesem Fall können Sie oben im Tool Netzwerk das Kontrollkästchen Cache deaktivieren aktivieren, um die vollständigen Anforderungsheader anzuzeigen. Zum Beispiel:

1. Navigieren Sie zur Demoseite "Netzwerkaktivität untersuchen ".

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie das Tool Netzwerk aus.

4. Aktualisieren Sie die Webseite.

5. Wählen Sie die getstarted.js Netzwerkanforderung aus.

   Im Abschnitt Anforderungsheader wird die Meldung angezeigt: Vorläufige Header werden angezeigt. Deaktivieren Sie den Cache, um vollständige Header anzuzeigen.

   

6. Aktivieren Sie oben im Netzwerktool das Kontrollkästchen Cache deaktivieren.

7. Aktualisieren Sie die Webseite.

8. Wählen Sie die getstarted.js Netzwerkanforderung aus.

   Im Abschnitt Anforderungsheader wird die Meldung nicht mehr angezeigt. Die vollständigen Anforderungsheader werden angezeigt.

Siehe auch:

• Emulieren Sie einen Erstbesucher, indem Sie den Browsercache oben deaktivieren.

Anzeigen der Anforderungsnutzlast (Abfragezeichenfolgenparameter und Formulardaten)

Um die Nutzlast einer HTTP-Anforderung (Abfragezeichenfolgenparameter und Formulardaten) anzuzeigen, wählen Sie eine Anforderung aus der Tabelle Anforderungen aus, und wählen Sie dann die Registerkarte Nutzlast in der Randleiste wie folgt aus:

1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. zur Referenz demo des Netzwerktools.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Tool Netzwerk aus.

4. Aktualisieren Sie die Webseite.

   In der Tabelle "Anforderungen" des Netzwerktools werden Zeilen für Folgendes angezeigt:

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js
   • favicon.png

5. Klicken Sie auf der Demo-Webseite auf die Schaltfläche Formulardaten senden .

   In der Tabelle "Anforderungen" des Netzwerktools wird eine Zeile hinzugefügt:

   • form-data-endpoint?hasfile=true

6. Wählen Sie die Zeile form-data-endpoint?hasfile=trueaus.

   Die Randleiste wird geöffnet, einschließlich einer Registerkarte Nutzlast .

7. Wählen Sie die Registerkarte Nutzlast aus.

   Die Nutzlast der Anforderung wird angezeigt, einschließlich eines Abschnitts für Abfragezeichenfolgenparameter und eines Formulardatenabschnitts :

Auf der Registerkarte Konsole von DevTools tritt der Fehler auf:

• POST https://microsoftedge.github.io/Demos/devtools-network-reference/form-data-endpoint?hasfile=true 405 (Method Not Allowed) (anonymous) @ script.js:49

Dieser harmlose Fehler "Methode nicht zulässig " wird in der Konsole angezeigt, da auf dem Demoserver kein form-data-endpoint POST-Handler vorhanden ist. Der Fehler wird erwartet, da github.io Hosten keine Anwendungsserver, nur statische Dateien ausführen.

Anzeigen der Nutzlastquelle

Standardmäßig zeigt das Netzwerktool die Nutzlast in einer lesbaren Form an.

So zeigen Sie stattdessen die Quellen von Abfragezeichenfolgenparametern oder Formulardaten an:

1. Führen Sie die Schritte im vorherigen Abschnitt oben aus.

   Auf der Registerkarte Nutzlast zeigt der Abschnitt Abfragezeichenfolgenparameter die Nutzlast in einer lesbaren Form für hasfilean. Der Abschnitt Formulardaten zeigt die Nutzlast in einem lesbaren Formular für username, timestampund filean:

   

2. Klicken Sie neben der Abschnittsüberschrift Abfragezeichenfolgenparameter auf die Schaltfläche Quelle anzeigen .

3. Klicken Sie neben der Abschnittsüberschrift Formulardaten auf die Schaltfläche Quelle anzeigen .

   Die Quellinformationen für die Nutzlast werden angezeigt:

   

Anzeigen von URL-codierten Abfragezeichenfolgenparametern

So zeigen Sie Abfragezeichenfolgenparameter in einem lesbaren Format an, aber mit beibehaltener Codierung

1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Webseite, die Abfragezeichenfolgenparameter verwendet, z. B. die Netzwerktoolreferenz Demo.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Tool Netzwerk aus.

4. Aktualisieren Sie die Webseite.

   In der Tabelle Anforderungen sind die Dateien , .css, .jsund .png aufgeführt.html.

5. Klicken Sie auf der Demowebseite auf die Schaltfläche Send encoded query parameters (Codierte Abfrageparameter senden ).

   Die Tabelle Requests fügt eine Zeile hinzu:

   encoded-query-params-endpoint?name=Danas+Barkus&url=https%3A%2F%2Fcontoso.com%2F%C3%A0%C3%A9%C3%A8%C3%B4%C3%A7%D0%BB

6. Wählen Sie die Zeile aus encoded-query-params-endpoint .

   Die Randleiste wird mit Registerkarten geöffnet.

7. Wählen Sie auf der Randleiste die Registerkarte Nutzlast aus.

   Im Abschnitt Abfragezeichenfolgenparameter wird die URL als decodiert angezeigt: https://contoso.com/àéèôçл:

   

8. Klicken Sie im Abschnitt Abfragezeichenfolgenparameter auf die Schaltfläche URL-codiert anzeigen .

   Die URL wird jetzt mit codierten Zeichen (z %3A . B. und %2F) angezeigt, und die Schaltflächenbezeichnung ändert sich in Decodiert anzeigen:

   

9. Klicken Sie auf die Schaltfläche Decodiert anzeigen .

   Die URL wird erneut mit decodierten Zeichen als angezeigt, https://contoso.com/àéèôçлund die Schaltflächenbezeichnung ändert sich wieder in URL-codiert anzeigen.

Cookies anzeigen

So zeigen Sie die im HTTP-Header einer Anforderung gesendeten Cookies an:

1. Klicken Sie in der Tabelle Anforderungen auf den Namen der Anforderung.

2. Wählen Sie auf der Randleiste die Registerkarte Cookies aus:

   

Weitere Informationen zu den einzelnen Spalten finden Sie unter Felder zum Anzeigen, Bearbeiten und Löschen von Cookies.

Informationen zum Ändern von Cookies finden Sie unter Anzeigen, Bearbeiten und Löschen von Cookies.

Anzeigen der Zeitlichen Aufschlüsselung einer Anforderung

So zeigen Sie die Zeitliche Aufschlüsselung einer Anforderung an

1. Klicken Sie in der Tabelle Anforderung auf den Namen der Anforderung.

2. Wählen Sie auf der Randleiste die Registerkarte Timing aus.

   

Eine schnellere Möglichkeit für den Zugriff auf die Daten finden Sie unter Vorschau einer Zeitlichen Aufschlüsselung.

Weitere Informationen zu den einzelnen Phasen, die im Zeitsteuerungsbereich angezeigt werden können, finden Sie unter Erläuterung der Phasen der Zeitlichen Aufschlüsselung.

Vorschau einer Zeitlichen Aufschlüsselung

Um eine Vorschau der Zeitlichen Aufschlüsselung einer Anforderung anzuzeigen, zeigen Sie in der Spalte Wasserfall der Tabelle Anforderungen auf den Eintrag für die Anforderung.

Die Spalte Wasserfall ist standardmäßig deaktiviert. Um die Wasserfallspalte zu aktivieren, klicken Sie mit der rechten Maustaste auf eine Tabellenüberschrift Anforderungen , und wählen Sie dann das einfache Wasserfallmenüelement aus, das kein Untermenü enthält.

Informationen zum Anzeigen der Daten, ohne darauf zu zeigen, finden Sie oben im aktuellen Abschnitt Anzeigen der Zeitlichen Aufschlüsselung einer Anforderung.

Erläuterung der Zeitplanungsaufschlüsselungsphasen

Jede dieser Phasen kann auf der Registerkarte Zeitsteuerung angezeigt werden:

• Warteschlangen. Der Browser stellt Anforderungen in die Warteschlange, wenn eine der folgenden Aussagen zutrifft

  • Es gibt Anforderungen mit höherer Priorität.
  • Es sind bereits sechs TCP-Verbindungen für diesen Ursprung geöffnet, was der Grenzwert ist. Gilt nur für HTTP/1.0 und HTTP/1.1.
  • Der Browser weist kurz Speicherplatz im Datenträgercache zu.

• Stockend. Die Anforderung kann aus einem der unter Warteschlangen beschriebenen Gründe angehalten werden.

• DNS-Suche. Der Browser löst die IP-Adresse für die Anforderung auf.

• Erste Verbindung. Der Browser stellt eine Verbindung, einschließlich TCP-Handshakes und Wiederholungen, und das Aushandeln eines Secure Socket Layer (SSL) ein.

• Proxy-Aushandlung. Der Browser verhandelt die Anforderung mit einem Proxyserver.

• Anforderung gesendet. Die Anforderung wird gesendet.

• ServiceWorker-Vorbereitung. Der Browser startet den Service Worker.

• Anforderung an ServiceWorker. Die Anforderung 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. Dieses Timing umfasst einen Roundtrip der Latenz und die Zeit, die der Server zum Vorbereiten der Antwort benötigt hat.

• Inhaltsdownload. Der Browser empfängt die Antwort.

• Empfangen von Push. Der Browser empfängt Daten für diese Antwort über HTTP/2-Serverpush.

• Push lesen. Der Browser liest die lokalen Daten, die zuvor empfangen wurden.

Anzeigen von Initiatoren und Abhängigkeiten

Um die Initiatoren und Abhängigkeiten einer Anforderung anzuzeigen, halten Sie die UMSCHALTTASTE gedrückt, und zeigen Sie auf die Anforderung in der Tabelle Anforderungen .

• Die Anforderungen, die die darauf gezeigte Anforderung initiiert haben, werden grün angezeigt.
• Die Abhängigkeiten der darauf gezeigten Anforderungen werden rot angezeigt.

Wenn die Tabelle Anforderungen chronologisch sortiert ist, zeigt die vorangehende Zeile eine grüne Anforderung an, wenn Sie mit dem Mauszeiger auf eine Zeile zeigen. Die grüne Anforderung ist der Initiator der Abhängigkeit. Wenn in der Zeile davor eine weitere grüne Anforderung angezeigt wird, ist diese höhere Anforderung der Initiator des Initiators. Und so weiter.

Anzeigen von Ladeereignissen

DevTools zeigt das Timing der DOMContentLoaded Ereignisse und load an mehreren Stellen im Netzwerktool an:

• Im Bereich Übersicht mit vertikalen Linien.

• In der Spalte Wasserfall der Anforderungstabelle mit vertikalen Linien. Die Spalte Wasserfall ist standardmäßig deaktiviert. Um die Wasserfallspalte zu aktivieren, klicken Sie mit der rechten Maustaste auf eine Tabellenüberschrift Anforderungen , und wählen Sie dann das einfache Wasserfallmenüelement aus, das kein Untermenü enthält.

• Im Bereich Zusammenfassung am unteren Rand des Tools Netzwerk mit Zeitsteuerungsbezeichnungen.

Das DOMContentLoaded Ereignis ist blau gefärbt, und das load Ereignis ist rot.

Anzeigen der Gesamtanzahl von Anforderungen

Die Gesamtanzahl der Anforderungen wird im Bereich Zusammenfassung unten im Netzwerktool aufgeführt.

Achtung: Diese Anzahl verfolgt nur Anforderungen nach, die seit dem Öffnen von DevTools protokolliert wurden. Wenn andere Anforderungen vor dem Öffnen von DevTools aufgetreten sind, werden diese Anforderungen nicht gezählt.

Anzeigen der Gesamtgröße des Downloads

Die Gesamtgröße des Downloads von Anforderungen wird im Bereich Zusammenfassung unten im Netzwerktool aufgeführt.

Achtung: Diese Anzahl verfolgt nur Anforderungen nach, die seit dem Öffnen von DevTools protokolliert wurden. Wenn andere Anforderungen vor dem Öffnen von DevTools aufgetreten sind, werden die vorherigen Anforderungen nicht gezählt.

Informationen zum Überprüfen, wie groß die Ressourcen sind, nachdem der Browser die einzelnen Elemente entkomprimiert hat, finden Sie unter Anzeigen der unkomprimierten Größe einer Ressource.

Anzeigen der Stapelüberwachung, die eine Anforderung verursacht hat

Nachdem eine JavaScript-Anweisung eine Ressource angefordert hat, zeigen Sie auf die Spalte Initiator , um die Stapelüberwachung anzuzeigen, die zu der Anforderung führt.

Anzeigen der unkomprimierten Größe einer Ressource

So zeigen Sie sowohl die übertragene als auch die unkomprimierte Größe einer Ressource gleichzeitig an:

1. Klicken Sie oben rechts im Tool Netzwerk auf das Symbol Netzwerkeinstellungen (Zahnrad). Eine Zeile mit Kontrollkästchen wird angezeigt.

2. Aktivieren Sie das Kontrollkästchen Große Anforderungszeilen .

3. Untersuchen Sie die Spalte Größe in der Anforderungstabelle. Der oberste Wert ist die übertragene Größe, und der untere Wert ist die Größe der Ressource, nachdem sie vom Browser entkomprimiert wurde:

   

Exportieren von Anforderungsdaten

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

Speichern aller Netzwerkanforderungen in einer HAR-Datei

HAR (HTTP Archiv) ist ein Dateiformat, das von mehreren HTTP-Sitzungstools zum Exportieren der erfassten Daten verwendet wird. Das Format ist ein JSON-Objekt mit einem bestimmten Satz von Feldern. Weitere Informationen finden Sie unter HAR Analyzer.

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

So speichern Sie alle Netzwerkanforderungen in einer HAR-Datei ohne vertrauliche Daten:

1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. zur Demoseite "Netzwerkaktivität untersuchen ".

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Tool Netzwerk aus.

4. Aktualisieren Sie die Webseite.

5. Klicken Sie in der Tabelle Anforderungen mit der rechten Maustaste auf eine beliebige Anforderung, und wählen Sie dann Alle>kopieren als HAR (bereinigung) aus:

   

   Oder klicken Sie in der Aktionsleiste oben im Netzwerktool auf die Schaltfläche HAR exportieren (bereinigungsbereinigt) (

DevTools speichert alle Anforderungen, die seit dem Öffnen von DevTools in der HAR-Datei aufgetreten sind.

Sie können keine Anforderungen filtern und keine einzelne Anforderung speichern.

So speichern Sie alle Netzwerkanforderungen in einer HAR-Datei, einschließlich vertraulicher Daten:

1. Wählen Sie in DevTools die Option Angepasst aus, und steuern Sie die DevTools-Einstellungen>.

   Die Seite Einstellungen>Einstellungen wird geöffnet.

2. Scrollen Sie nach unten zum Abschnitt Netzwerk .

3. Aktivieren Sie das Kontrollkästchen Har-Generierung mit vertraulichen Daten zulassen.

4. Klicken Sie auf die Schaltfläche Schließen ().

5. Klicken Sie im Netzwerktool mit der rechten Maustaste auf eine beliebige Anforderung in der Tabelle Anforderungen , und wählen Sie dann Alle>als HAR kopieren (mit vertraulichen Daten) kopieren aus.

   Oder klicken Sie auf der Aktionsleiste oben auf die Schaltfläche HAR exportieren (entweder mit bereinigungs- oder vertraulichen Daten) (), und wählen Sie dann HAR exportieren (mit vertraulichen Daten) aus:

   

Importieren einer HAR-Datei in DevTools zur Analyse

Nachdem Sie über eine HAR-Datei verfügen, können Sie sie mithilfe von HAR Analyzer zur Analyse wieder in DevTools importieren.

So importieren Sie eine HAR-Datei zur Analyse in DevTools:

• Klicken Sie in der Aktionsleiste oben im Netzwerktool auf die Schaltfläche HAR-Datei importieren ().

• Oder ziehen Sie die HAR-Datei in die Tabelle Anforderungen .

Das Netzwerktool liest und zeigt Initiatoren für die Anforderungen an, die aus der HAR-Datei importiert werden. Informationen zu Initiatoren finden Sie weiter oben unter Anzeigen eines Anforderungsprotokolls.

Kopieren von Netzwerkanforderungen in die Zwischenablage

Klicken Sie in der Spalte Name der Tabelle Anforderungen mit der rechten Maustaste auf eine Anforderung, zeigen Sie auf Kopieren, und wählen Sie dann eine der folgenden Optionen aus.

So kopieren Sie eine einzelne Anforderung, ihre Antwort oder ihre Stapelüberwachung:

So kopieren Sie alle Anforderungen:

Um einen gefilterten Satz von Anforderungen zu kopieren, wenden Sie einen Filter auf das Netzwerkprotokoll an, klicken Mit der rechten Maustaste auf eine Anforderung, und wählen Sie dann Folgendes aus:

Siehe auch:

• Filteranforderungen, oben.

Kopieren eines formatierten ANTWORT-JSON-Codes in die Zwischenablage

So kopieren Sie die formatierten JSON-Daten einer JSON-Antwort:

1. Klicken Sie in der Tabelle Anforderungen auf den Namen der Anforderung, die zu einer JSON-Antwort geführt hat.

2. Wählen Sie auf der Randleiste die Registerkarte Vorschau aus.

3. Klicken Sie mit der rechten Maustaste auf die erste Zeile der formatierten JSON-Antwortvorschau, und wählen Sie dann Wert kopieren aus.

   

   Sie können den Wert jetzt in einen beliebigen Editor einfügen.

Kopieren von Eigenschaftswerten aus Netzwerkanforderungen in die Zwischenablage

So kopieren Sie Eigenschaftswerte aus Netzwerkanforderungen in die Zwischenablage:

1. Klicken Sie in der Tabelle Anforderung auf den Namen der Anforderung.

2. Wählen Sie auf der Randleiste die Registerkarte Nutzlast aus:

3. Erweitern Sie einen der folgenden Abschnitte.

   • Anforderungsnutzlast (JSON)
   • Formulardaten
   • Abfragezeichenfolgenparameter
   • Anforderungsheader
   • Antwortheader

4. Klicken Sie mit der rechten Maustaste auf einen Wert, und wählen Sie dann Wert kopieren aus. Sie können den Wert jetzt in einen beliebigen Editor einfügen.

Ändern des Layouts des Netzwerktools

Sie können Abschnitte der Benutzeroberfläche des Netzwerktools erweitern oder reduzieren, um den Fokus auf wichtige Informationen zu legen.

Ausblenden des Bereichs "Filter"

Standardmäßig zeigt DevTools den Bereich Filter an. Um den Bereich Filter auszublenden, wählen Sie Filter () aus.

Verwenden großer Anforderungszeilen

Verwenden Sie große Anforderungszeilen, wenn Sie mehr Leerzeichen in Ihrer Tabelle für Netzwerkanforderungen benötigen. Einige Spalten bieten auch etwas mehr Informationen, wenn sie große Zeilen verwenden. Zum Beispiel:

• Der untere Wert der Spalte Größe ist die unkomprimierte Größe einer Anforderung.

• Die Spalte Priorität (standardmäßig nicht angezeigt) zeigt sowohl die anfängliche (untere Wert) als auch die endgültige (oberste) Abrufpriorität an.

So aktivieren Sie große Zeilen:

1. Navigieren Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. zur Demoseite "Netzwerkaktivität untersuchen ".

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Tool Netzwerk aus.

4. Aktualisieren Sie die Webseite.

   Anforderungen werden in kleinen Zeilen angezeigt.

5. Klicken Sie im Netzwerktool auf die Schaltfläche Netzwerkeinstellungen (), und aktivieren Sie dann das Kontrollkästchen Große Anforderungszeilen .

   Anforderungen werden in großen Zeilen angezeigt:

   

Ausblenden des Bereichs "Übersicht"

Standardmäßig zeigt DevTools den Bereich Übersicht an. Um den Bereich Übersicht auszublenden, deaktivieren Sie das Kontrollkästchen Übersicht anzeigen .

Siehe auch

• Untersuchen der Netzwerkaktivität : Schrittweise exemplarische Vorgehensweise und Einführung in das Netzwerktool .

Demo-Webseiten:

• Überprüfen der Netzwerkaktivität
• Referenzdemo zum Netzwerktool
• TODO-App

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