Referenz zu Netzwerkfeatures

Das Netzwerktool verfügt über die folgenden Features zum Untersuchen der Netzwerkaktivität für eine Webseite.

Eine schrittweise exemplarische Vorgehensweise und Einführung in das Netzwerktool finden Sie unter Untersuchen der Netzwerkaktivität.

Detaillierter Inhalt:

• Netzwerkanforderungen aufzeichnen
  • Aufzeichnung von Netzwerkanforderungen beenden
  • Anforderungen löschen
  • Anforderungen über Seitenladevorgänge hinweg speichern
  • Mitschreiben von Screenshots während des Laden der Seite
  • Anforderung erneut senden
  • Bearbeiten und erneutes Senden einer Anforderung als Abrufaufruf
• Ladeverhalten ändern
  • Emulieren eines Erstbesuchers durch Deaktivieren des Browsercaches
    • Deaktivieren des Browsercaches im Tool "Netzwerkbedingungen"
  • Manuelles Löschen der Browserzwischenspeicherung
  • Offline emulieren
  • Langsame Netzwerkverbindungen emulieren
    • Erstellen eines benutzerdefinierten Drosselungsprofils
    • Drosseln von WebSocket-Verbindungen
    • Emulieren langsamer Netzwerkverbindungen aus dem Tool "Netzwerkbedingungen"
  • Manuelles Löschen von Browsercookies
  • Außerkraftsetzen von HTTP-Antwortheadern
  • Außerkraftsetzen des Benutzer-Agents
• Festlegen von Benutzer-Agent-Clienthinweisen
• Suchanforderungen
• Filteranforderungen
  • Filteranforderungen nach Eigenschaften
  • Filteranforderungen nach Typ
  • Filteranforderungen nach Zeit
  • Daten-URLs ausblenden
  • Erweiterungs-URLs ausblenden
  • Nur die Anforderungen mit blockierten Antwortcookies anzeigen
  • Nur blockierte Anforderungen anzeigen
  • Nur Anforderungen von Drittanbietern anzeigen
• Sortieranforderungen
  • Sortieren nach Spalten
  • Nach Aktivitätsphase sortieren
• Anforderungen analysieren
  • Anforderungsprotokoll anzeigen
    • Hinzufügen oder Entfernen von Spalten
    • Benutzerdefinierte Spalten für Antwortheader hinzufügen
  • Gruppieren von Anforderungen nach Inlineframes
  • Anzeigen der Timing-Beziehung von Anforderungen
  • Analysieren der Nachrichten einer WebSocket-Verbindung
  • Analysieren von Ereignissen in einem Datenstrom
  • Vorschau eines Antworttexts anzeigen
  • Anzeigen eines Antworttexts
  • HTTP-Header anzeigen
    • HTTP-Headerquelle anzeigen
    • Warnung vor vorläufigen Kopfzeilen
  • Anzeigen der Anforderungsnutzlast (Abfragezeichenfolgenparameter und Formulardaten)
    • Nutzlastquelle anzeigen
    • URL-codierte Abfragezeichenfolgenparameter anzeigen
  • Cookies anzeigen
  • Anzeigen der Zeitaufschlüsselung einer Anforderung
    • Anzeigen einer Vorschau einer Timing-Aufschlüsselung
    • Erläuterung der Phasen der Zeitaufschlüsselung
    • Analysieren des Routings einer Service Worker-Anforderung
  • Initiatoren und Abhängigkeiten anzeigen
  • Ladeereignisse anzeigen
  • Anzeigen der Gesamtzahl der Anforderungen
  • Anzeigen der Gesamtgröße des Downloads
  • Anzeigen der Stapelüberwachung, die eine Anforderung verursacht hat
  • Anzeigen der nicht komprimierten Größe einer Ressource
• Anforderungsdaten exportieren
  • Alle Netzwerkanforderungen in einer HAR-Datei speichern
  • Importieren einer HAR-Datei in DevTools zur Analyse
  • Netzwerkanforderungen in die Zwischenablage kopieren
  • Formatierten JSON-Antwortwert in die Zwischenablage kopieren
  • Kopieren von Eigenschaftswerten aus Netzwerkanforderungen in die Zwischenablage
• Ändern des Layouts des Netzwerktools
  • Ausblenden des Bereichs "Filter"
  • Verwenden von Zeilen mit großen Anforderungen
  • Ausblenden des Übersichtsbereichs
• Siehe auch

Netzwerkanforderungen aufzeichnen

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

Zum Beispiel:

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

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Netzwerktool 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 (). Grau wird angezeigt, 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.

Anforderungen löschen

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

Anforderungen über Seitenladevorgänge hinweg speichern

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

Mitschreiben von Screenshots während des Laden der Seite

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 zu einer Webseite, z. B. TODO-App, in einem neuen Fenster oder auf einer neuen Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Öffnen Sie in DevTools das Netzwerktool .

4. Klicken Sie oben rechts im Netzwerktool auf das Symbol Netzwerkeinstellungen (Zahnrad). Eine Reihe von Kontrollkästchen wird angezeigt.

5. Aktivieren Sie das Kontrollkästchen Screenshots mitschreiben:

   

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 Ladens der Seite erfasst, und Miniaturansichten werden unterhalb der Reihe mit 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 aufgenommen wurde. Im Diagrammübersichtsbereich 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 die Miniaturansicht eines Screenshots, um ihn zu vergrößern und anzuzeigen.

5. Drücken Sie ESC , um die Screenshotanzeige zu schließen.

Anforderung erneut senden

Um eine Netzwerkanforderung erneut zu senden, ohne die Webseite neu zu laden, verwenden Sie den BefehlErneut senden in der Tabelle "Anforderungen" des Netzwerktools.

Der Befehl Erneut senden ist für die folgenden Anforderungstypen verfügbar:

• XHR
• Fetch
• JavaScript
• CSS
• Abbildung
• media
• font
• WebAssembly
• manifest
• Textspur
• Source Map

So senden Sie eine Anforderung erneut:

1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Webseite, z. B. die Referenz zum Tool "Netzwerk" und "Demo".

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Netzwerktool aus.

4. Aktualisieren Sie die Webseite.

   In der TabelleAnforderungen des Netzwerktools werden Zeilen angezeigt für:

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

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

   In der TabelleAnforderungen 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 "Erneut senden" 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 " Sonstige":

   

Informationen zu Initiatoren finden Sie unter:

• Initiatoren und Abhängigkeiten unten anzeigen.
• Protokollieren Sie die Netzwerkaktivität unter "Netzwerkaktivität überprüfen".

DevTools sendet XHR-Anforderungen erneut als XHR. DevTools konvertiert andere unterstützte Anforderungstypen in Fetch-Anforderungen, bevor sie gesendet werden.

Nachdem Sie auf die Schaltfläche XHR-Anforderung senden der Demo geklickt haben (wodurch JavaScript eine Anforderung sendet), wird das Menüelement Stack-Trace kopieren im > Kontextmenü Kopieren für Anforderungen angezeigt. Siehe Kopieren von Netzwerkanforderungen in die Zwischenablage unten.

Bearbeiten und erneutes Senden einer Anforderung als Abrufaufruf

Um eine Netzwerkanforderung vor dem erneuten Senden zu bearbeiten, verwenden Sie den Befehl Bearbeiten und erneut senden als Abrufenin der TabelleAnforderungen des Netzwerktools. Dieser Befehl bewirkt, dass DevTools die Netzwerkanforderung als Aufruf fetch() in das Konsolentool kopiert, wo Sie sie ändern und senden können.

Der Befehl "Als Fetch bearbeiten und erneut senden " ist für die folgenden Anforderungstypen verfügbar:

• XHR
• Fetch
• JavaScript
• CSS
• Abbildung
• media
• font
• WebAssembly
• manifest
• Textspur
• Source Map
• Dokument
• Vor dem Abruf
• Pinganforderungen

Im Gegensatz zum Befehl "Erneut senden ", der eine XHR-Anforderung als XHR erneut sendet, konvertiert "Bearbeiten" und erneut als "Abrufen " XHR und alle anderen unterstützten Anforderungstypen in fetch() Aufrufe.

Die optionale Spalte "Ausführungskontext " in der Tabelle "Anforderungen " zeigt den Ausführungskontext an, aus dem jede Anforderung gesendet wurde.

So bearbeiten und senden Sie eine Anforderung erneut als Fetch-Aufruf:

1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Webseite, z. B. die Referenz zum Tool "Netzwerk" und "Demo".

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Netzwerktool aus.

4. Aktualisieren Sie die Webseite.

   In der TabelleAnforderungen des Netzwerktools werden Zeilen angezeigt für:

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

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

   In der TabelleAnforderungen des Netzwerktools wird eine data.json Zeile hinzugefügt.

6. Klicken Sie in der Tabelle Anforderungen mit der rechten Maustaste auf die Anforderung, die Sie ändern möchten, z. B. die data.json Anforderung, und wählen Sie dann Bearbeiten und als Abrufen erneut senden.

   Das Konsolentool wird in der Schublade unten in DevTools geöffnet.

   Ein bearbeitbarer fetch() Aufruf, der die Anforderung reproduziert, wird der Konsoleneingabeaufforderung hinzugefügt. Der generierte Code enthält Kommentare, die die ursprüngliche Anforderung und ihren Ausführungskontext identifizieren.

   Eine Meldung über dem generierten Code, z. B. "Erneut sendenbare Kopie der GET-Anforderung an data.json", weist einen Link () zur ursprünglichen Anforderung im Netzwerktool auf:

   

   Hinweis:In der Konsoleneingabeaufforderung kann jeweils nur eine Anforderung ausstehend sein. Wenn Sie Bearbeiten und erneut als Abrufen für eine andere Anforderung auswählen, ersetzt der neue fetch() Aufruf die aktuelle Konsoleneingabeaufforderung , ohne eine Warnung anzuzeigen.

7. Wenn Sie der generierte Kommentar zur Auswahl eines Ausführungskontexts auffordert, verwenden Sie die JavaScript-Kontext-Dropdownliste in der Konsolensymbolleiste , um den Ausführungskontext auszuwählen (z. B. top), in dem die Netzwerkanforderung erneut als Fetch-Aufruf gesendet wird.

8. Ändern Sie die URL, die Methode, die Header oder den Text im generierten fetch() Aufruf.

   Einige Anforderungsheader, die ein fetch() Aufruf nicht setzen darf, werden als Informationskommentare beibehalten.

9. Drücken Sie die EINGABETASTE , um die geänderte Anforderung zu senden.

Die neue Anforderung wird in der TabelleAnforderungen des Netzwerktools angezeigt. Ein Terminalsymbol in der Spalte Name weist darauf hin, dass die Anforderung von der Konsole stammt.

Ladeverhalten ändern

Emulieren eines Erstbesuchers durch Deaktivieren des Browsercaches

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

Das Kontrollkästchen "Cache deaktivieren ":

Deaktivieren des Browsercaches im Tool "Netzwerkbedingungen"

Im Netzwerktool können Sie das Tool Netzwerkbedingungenim Schnellansichtsbereich unten in 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 " unten in DevTools geöffnet.

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

   

Siehe auch:

• Tool für Netzwerkbedingungen

Manuelles Löschen der Browserzwischenspeicherung

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, die als progressive Web-Apps (PWA) bezeichnet wird, kann mithilfe von Service Workern offline ausgeführt werden. Möglicherweise ist es sinnvoll, ein Gerät ohne Datenverbindung schnell zu simulieren, wenn Sie diese Art von App erstellen.

Um eine Offline-Netzwerkerfahrung zu simulieren, wählen Sie das Dropdown-Menü >Keine Drosselungvor.>

Das Offline-Dropdownmenü:

Langsame Netzwerkverbindungen emulieren

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

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

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

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

Auf der Registerkarte des Netzwerktools wird ein Warnsymbol angezeigt, das Sie daran erinnert, dass die Drosselung aktiviert ist:

Siehe auch:

• Simulieren einer langsameren Netzwerkverbindung in "Netzwerkaktivität überprüfen".
• TODO-App

Erstellen eines benutzerdefinierten Drosselungsprofils

Zusätzlich zu Voreinstellungen, wie langsames oder schnelles 4G, können Sie auch Ihre eigenen benutzerdefinierten Drosselungsprofile hinzufügen.

So erstellen Sie ein benutzerdefiniertes Drosselungsprofil:

1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Webseite, z. B. die 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 Netzwerktool aus.

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

   Oder wählen Sie "Anpassen und SteuernderDrosselungder DevTools-Einstellungen>>" aus.

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

5. Klicken Sie im Abschnitt Netzwerkdrosselungsprofile 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 in das Textfeld "Download"10 ein (für 10 kbit/s).

8. Geben Sie in das Textfeld "Upload"10 ein (für 10 kbit/s).

9. Geben Sie im Textfeld "Latenz " 10 (für 10 ms) ein.

10. Geben Sie in das Textfeld "Paketverlust " 1 (für 1 %) ein.

11. Geben Sie in das Textfeld "Länge der Paketwarteschlange"10 ein.

12. Aktivieren Sie das Kontrollkästchen Paketneuanordnung :

    

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

    Das benutzerdefinierte Drosselprofil wird angezeigt:

    

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

15. Wählen Sie das Netzwerktool aus.

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

    

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

Siehe auch:

• Richten Sie ein benutzerdefiniertes Netzwerkdrosselungsprofil in der Drosselung ein.

Drosseln von WebSocket-Verbindungen

Zusätzlich zu HTTP-Anforderungen können 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 zu veranschaulichen.

So beobachten Sie die WebSocket-Drosselung:

1. Führen Sie die Schritte im vorherigen Abschnitt "Erstellen eines benutzerdefinierten Drosselungsprofils" aus.

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

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

   Wenn Sie die Webseite des Online-WebSocket-Testers verwenden, klicken Sie auf die Schaltfläche Verbinden .

   Wenn Sie kein PieSocket-Konto erstellen, um ein API-Token abzurufen, zeigt die Webseite "Verbindung hergestellt - {"error":"Unbekannter API-Schlüssel"}" an.

   Wenn Sie ein PieSocket-Konto erstellen, um ein API-Token zu erhalten, zeigt die Webseite einfach "Verbindung hergestellt" an.

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ü Drosselungdie Option Benutzerdefiniert>10 kbps aus.

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

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

7. Klicken Sie auf der Webseite des Online-WebSocket-Testers auf die Schaltfläche Senden .

   Die Konsole auf der Webseite des Online-WebSocket-Testers 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 dem Client und dem 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 aus dem Tool "Netzwerkbedingungen"

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

1. Klicken Sie im Netzwerktool auf die Schaltfläche Weitere Netzwerkbedingungen ( Das Tool "Netzwerkbedingungen" wird im Bereich "Schnellansicht " unten in 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.

Außerkraftsetzen von HTTP-Antwortheadern

Siehe auch:

• Außerkraftsetzen von Webseitenressourcen mit lokalen Kopien (Registerkarte "Außerkraftsetzungen")
• Außerkraftsetzung von Dateien und HTTP-Antwortheadern in Lokale Außerkraftsetzung von Webinhalten und HTTP-Antwortheadern.

Außerkraftsetzen des Benutzer-Agents

So setzen Sie den Benutzer-Agent manuell außer Kraft:

1. Klicken Sie im Netzwerk-Tool auf die Schaltfläche Weitere Netzwerkbedingungen ( Das Tool "Netzwerkbedingungen" wird im Bereich "Schnellansicht " unten in DevTools geöffnet.

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

3. Wählen Sie eine Benutzeragent-Option aus dem Menü aus, oder geben Sie einen benutzerdefinierten Benutzeragenten in das Textfeld ein.

Festlegen von Benutzer-Agent-Clienthinweisen

Wenn Ihre Website Benutzeragent-Clienthinweise verwendet und Sie diese testen möchten, können Sie sie entweder im Tool Netzwerkbedingungen oder unter Emulieren mobiler Geräte (Geräteemulation) festlegen.

So legen Sie im Tool " Netzwerkbedingungen " Clienthinweise für den Benutzeragenten fest:

1. Klicken Sie im Netzwerk-Tool auf Weitere Netzwerkbedingungen ( Das Tool "Netzwerkbedingungen" wird im Bereich "Schnellansicht " unten in DevTools geöffnet.

2. Deaktivieren Sie im Abschnitt Benutzer-Agent das Kontrollkästchen Browserstandard verwenden , und erweitern Sie dann Hinweise zum Benutzeragent-Client:

   

3. Wählen Sie in der Dropdownliste des Benutzer-Agenten einen vordefinierten Browser und ein vordefiniertes Gerät aus. Oder übernehmen Sie den Standardwert " Benutzerdefiniert...", und geben Sie Informationen in das Textfeld "Geben Sie einen benutzerdefinierten Benutzeragenten ein " ein.

4. Geben Sie für beide Auswahlmöglichkeiten (vordefiniert oder benutzerdefiniert) die folgenden Benutzeragent-Clienthinweise an:

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

   Sie können jeden der Benutzeragenten-Clienthinweise festlegen oder ändern. Es sind keine Pflichtwerte vorhanden.

5. Wählen Sie Aktualisieren aus.

6. Um die Änderungen zu überprüfen, klicken Sie auf Konsole und geben Sie navigator.userAgentDataein. Erweitern Sie die Ergebnisse nach Bedarf, um Änderungen an den Benutzer-Agent-Daten anzuzeigen.

Siehe auch:

• Hinweise zum Erkennen von Microsoft Edge auf 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 in das Textfeld Suchen Ihre Abfragezeichenfolge ein, und drücken Sie dann die Eingabetaste.

   Klicken Sie optional auf die Schaltfläche Groß-/Kleinschreibung anpassen , 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 übereinstimmende Anforderung gelb hervor. Das Netzwerktool öffnet auch die Registerkarte "Header" oder "Antwort" und hebt die Zeichenfolge hervor, die dort entsprach (falls vorhanden).

Um die Suchergebnisse zu aktualisieren, klicken Sie auf der Registerkarte "Suchen " auf die Schaltfläche "Aktualisieren ()".

Um die Suchergebnisse zu löschen, klicken Sie 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 mithilfe des Suchtools

Filteranforderungen

Sie können Anforderungen nach Eigenschaften, Typ oder Zeit filtern und Daten-URLs ausblenden. Die Dropdownliste Weitere Status enthält die folgenden Optionen und Statusprüfzeichen:

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

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

Filteranforderungen nach Eigenschaften

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

Wenn das Textfeld nicht angezeigt wird, ist der Bereich "Filter" wahrscheinlich ausgeblendet. siehe Ausblenden des Bereichs Filter 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 mime-type:image/png larger-than:1K z. B. alle PNG-Dateien an, die größer als 1 KB sind. Die Filter für mehrere Eigenschaften entsprechen Operationen AND . OR Vorgänge werden nicht unterstützt.

Die vollständige Liste der unterstützten Eigenschaften:

Filteranforderungen nach Typ

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

Werden die Schaltflächen nicht angezeigt, ist der Filterbereich möglicherweise ausgeblendet. Siehe Ausblenden des Bereichs Filter unten.

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

Filteranforderungen nach Zeit

Klicken und ziehen Sie im Übersichtsbereich nach links oder rechts, um nur Anforderungen anzuzeigen, die in diesem Zeitraum aktiv waren. Der Filter ist inklusiv. Alle Anforderungen, die während der hervorgehobenen Zeit aktiv waren, werden angezeigt.

Filtern aller Anforderungen, die um 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 und mit data: einer Daten-URL beginnt.

Um die Anforderungen auszublenden, deaktivieren Sie das Kontrollkästchen Daten-URLs ausblenden :

Erweiterungs-URLs ausblenden

Um sich auf den Code zu konzentrieren, den Sie verfassen, können Sie irrelevante Anforderungen herausfiltern, die von Erweiterungen gesendet werden, die Sie möglicherweise in Microsoft Edge installiert haben. Erweiterungsanforderungen haben 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 , sodass daneben ein Häkchen angezeigt wird:

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

Nur die Anforderungen mit blockierten Antwortcookies anzeigen

Wenn Sie alles mit Ausnahme der Anforderungen mit Antwortcookies herausfiltern möchten, die aus irgendeinem Grund blockiert wurden, 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 Antwortcookie blockiert wurde, wählen Sie die Anforderung aus (unter Name), öffnen Sie die Registerkarte Cookies (rechts), und bewegen Sie den Mauszeiger über 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 "Überprüfen" aus.

   DevTools wird geöffnet.

4. Wählen Sie das Netzwerktool aus.

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

6. Aktualisieren Sie die Webseite.

   Viele Nachrichten werden im Netzwerktool aufgelistet.

7. Wählen Sie in 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 auf eine Stelle außerhalb der Dropdownliste, um sie zu schließen.

   Anforderungen, für die Antwortcookies blockiert wurden, werden angezeigt, wie 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 Info-Symbol ().

    Die QuickInfo lautet zum Beispiel: "Dieser Versuch, ein Cookie über einen Set-Cookie-Header zu setzen, wurde aufgrund von Benutzereinstellungen blockiert."

    

    Die Status-Leiste unten zeigt die Anzahl der angezeigten Anforderungen im Vergleich zur Gesamtsumme an.

Darüber hinaus zeigt das Netzwerktool ein Warnsymbol () neben einer Anforderung an, bei der Cookies aufgrund von Edge-Flags oder -Konfiguration blockiert wurden. Fahre mit der Maus über das Symbol, um eine QuickInfo mit einem Hinweis anzuzeigen, und klicke darauf, um zum Tool "Probleme " zu wechseln, um weitere Informationen zu erhalten.

Nur blockierte Anforderungen anzeigen

Um alles außer blockierten Anforderungen herauszufiltern, wählen Sie in der Aktionsleiste FilterWeitere Filter>Blockierte Anforderungen, sodass ein Häkchen angezeigt wird. Um dies zu testen, können Sie das Tool zum Blockieren von Netzwerkanforderungen im Schnellansichtsbereich unten in DevTools verwenden. Weitere Informationen finden Sie unter "Blockieren von Anforderungen " in "Netzwerkaktivität überprüfen".

Zum Beispiel:

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

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Netzwerktool aus.

4. Aktualisieren Sie die Webseite.

   In der Tabelle "Anforderungen" sind , .css.png, und .js Dateien aufgelistet.html.

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

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

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

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

7. Drücken Sie ein- bis zweimal die ESC-Taste , damit der Bereich "Schnellansicht " am unteren Rand der DevTools geöffnet wird.

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

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

9. Klicken Sie im Blockierungstool für Netzwerkanforderungen auf die Schaltfläche Blockierungsmuster für Netzwerkanforderungen hinzufügen ("").

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

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

    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 defektes Bild zusammen mit dem Alternativtext des Bilds (dem Microsoft Edge DevTools-Logo) angezeigt.

    • Im Netzwerktool listet die Tabelle "Anforderungen " nur Dateien auf .png . Die Tabelle "Anforderungen" hebt blockierte Anforderungen als roten Text hervor.

    • Im Netzwerk-Tool zeigt die Status-Leiste unten die Anzahl der angezeigten Anforderungen aus der Gesamtsumme an, z. B. 2 / 5 Anforderungen.

Nur Anforderungen von Drittanbietern anzeigen

Um alles mit Ausnahme der Anforderungen herauszufiltern, deren Ursprung sich vom Seitenursprung unterscheidet, wählen Sie in der Aktionsleiste Filterdie Option Weitere Filter>für Anforderungen von Drittanbietern aus, sodass ein Häkchen angezeigt wird. Probieren Sie es auf der Demoseite " Netzwerkaktivität untersuchen " aus.

Die Status-Leiste unten zeigt die Anzahl der angezeigten Anforderungen im Vergleich zur Gesamtsumme an.

Sortieranforderungen

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

Sortieren nach Spalten

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

Nach Aktivitätsphase sortieren

Die Wasserfallspalte ist standardmäßig deaktiviert. So aktivieren Sie die Wasserfall-Spalte: Klicken Sie mit der rechten Maustaste auf einen Tabellenkopf "Anforderungen ", und wählen Sie dann den einfachen Wasserfall-Menüpunkt aus, der kein Untermenü hat.

So ändern Sie, wie Anforderungen in der Spalte "Wasserfall " sortiert werden:

• 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 Anforderung, die initiiert wurde, wird oben platziert.

  • Antwortzeit – Die erste Anforderung, die mit dem Download begonnen hat, wird oben platziert.

  • End Time : Die erste abgeschlossene Anforderung wird oben platziert.

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

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

In diesen Beschreibungen wird davon ausgegangen, dass die jeweilige Option von der kürzesten zur längsten Option geordnet ist. Klicken Sie auf die Überschrift der Wasserfall-Spalte, um die Reihenfolge umzukehren.

Im Folgenden wird die Sortierung des Wasserfalls nach Gesamtdauer gezeigt. Der hellere Teil jedes Balkens ist die Wartezeit und der dunklere Teil die Zeit für das Herunterladen von Bytes:

Anforderungen analysieren

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

Anforderungsprotokoll anzeigen

Verwenden Sie die Tabelle "Anforderungen ", um ein Protokoll aller Anforderungen anzuzeigen, die gestellt wurden, während DevTools geöffnet war. Um weitere Informationen zu jedem Element anzuzeigen, klicken Sie auf oder bewegen Sie den Mauszeiger 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.
• Typ. Der MIME-Typ der angeforderten Ressource.
• ausgeführt wird. Die folgenden Objekte oder Prozesse können Anforderungen initiieren:
  • Parser. Der HTML-Parser.
  • Umleiten. Eine HTTP-Umleitung.
  • Skripts verwendet werden. Eine JavaScript-Funktion.
  • Sonstige. Ein anderer Prozess oder eine andere Aktion, z. B. das Navigieren zu einer Seite über einen Link oder das Eingeben einer URL in der Adressleiste.
• Größe. Die kombinierte Größe der Antwortheader plus des Antworttexts, wie vom Server bereitgestellt.
• Zeit. Die Gesamtdauer vom Beginn der Anforderung bis zum Empfang des letzten Bytes in der Antwort.
• Erfüllt von. Ob die Anforderung vom HTTP-Cache oder dem Service Worker der App erfüllt wurde.

Die Wasserfallspalte ist standardmäßig deaktiviert. Um die Wasserfall-Spalte zu aktivieren, klicken Sie mit der rechten Maustaste auf einen Tabellenkopf "Anforderungen ", und wählen Sie dann den einfachen Wasserfall-Menüpunkt aus, der kein Untermenü hat.

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 einzublenden. Neben den aktuell angezeigten Spalten sind Häkchen markiert.

Benutzerdefinierte Spalten für Antwortheader hinzufügen

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"und "Headerspalten verwalten" > aus.

   Das Popupfenster "Kopfzeilenspalten verwalten " wird geöffnet.

2. Klicken Sie auf die Schaltfläche Benutzerdefinierten Header hinzufügen , geben Sie den Namen des benutzerdefinierten Headers ein, und klicken Sie dann auf Hinzufügen.

   

Gruppieren von Anforderungen nach Inlineframes

Wenn Inlineframes auf einer Seite viele Anforderungen initiieren, können Sie das Anforderungsprotokoll benutzerfreundlicher gestalten, indem Sie sie gruppieren.

So gruppieren Sie Anforderungen nach iframes:

1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Webseite, z. B. die Referenz zum Tool "Netzwerk" und "Demo".

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Netzwerktool aus.

4. Aktualisieren Sie die Webseite.

   In der TabelleAnforderungen des Netzwerktools werden Zeilen angezeigt für:

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

5. Klicken Sie auf der Demowebseite auf die Schaltfläche "iframes laden ".

   In der Tabelle "Anforderungen " werden viele Zeilen hinzugefügt:

   

6. Klicken Sie im Netzwerktool auf die Schaltfläche Netzwerkeinstellungen () und aktivieren Sie dann das Kontrollkästchen Nach Frame gruppieren .

   In der Tabelle "Anforderungen " werden erweiterbare Rahmennamen angezeigt.

7. Klicken Sie in der Tabelle "Anforderungen " auf ein erweitertes Dreieck in einem Rahmen.

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

   

Anzeigen der Timing-Beziehung von Anforderungen

Verwenden Sie die Spalte Wasserfall des Bereichs Anforderungen , um die Zeitbeziehungen von Anforderungen anzuzeigen. Die standardmäßige organization der Wasserfallspalte verwendet die Startzeit der Anforderungen. Anforderungen, die sich weiter links befinden, wurden also früher gestartet als Anforderungen, die weiter rechts liegen.

Die Wasserfallspalte ist standardmäßig deaktiviert. Um die Wasserfall-Spalte zu aktivieren, klicken Sie mit der rechten Maustaste auf einen Tabellenkopf "Anforderungen ", und wählen Sie dann den einfachen Wasserfall-Menüpunkt aus, der kein Untermenü hat.

Informationen zu den verschiedenen Möglichkeiten, wie Sie den Wasserfall sortieren können, finden Sie oben unter Sortieren nach Aktivitätsphase.

Die Spalte Wasserfall des Fensters "Anforderungen ":

Analysieren der Nachrichten einer WebSocket-Verbindung

So zeigen Sie die Nachrichten einer WebSocket-Verbindung an:

1. Wechseln 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 "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wählen Sie das Netzwerktool aus.

   Die Schaltfläche "Alle Filter" ist standardmäßig ausgewählt. Der Netzwerkbereich ist leer und enthält keine Meldungen.

4. Aktualisieren Sie die Webseite.

   In der Tabelle"Anforderungen " des Netzwerktools sind viele Anforderungen aufgelistet.

5. Wählen Sie oben im Netzwerktool die Schaltfläche Socketfilter mit QuickInfo aus: WebSocket | Web-Transport | DirectSocket.

   Die gefilterte Liste der Anforderungen ist leer.

6. Klicken Sie auf der Webseite des Online-Websocket-Testers auf die Schaltfläche Verbinden .

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

   • Verbindung hergestellt
   • {"error":"Unbekannter API-Schlüssel"} mit einem nach unten weisenden Dreieck; die vom Server an den Browser gesendet werden.

   Im Tool Netzwerk wird auf der Registerkarte Nachrichten 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 auf der Registerkarte "Nachrichten " die folgende Meldung angezeigt:

   • {"error":"Unbekannter API-Schlüssel"} mit einem roten Pfeil nach unten; die vom Server an den Browser gesendet werden.

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

   Auf der Webseite zeigt die Konsole die Nachricht Hello world! mit einem Dreieck an, das nach oben zeigt; die vom Browser an den Server gesendet werden.

   Im Tool Netzwerk zeigt die Tabelle auf der Registerkarte Nachrichten die letzten 100 Nachrichten an. In diesem Fall wird die Meldung hinzugefügt:

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

Hinweis: Um rote Nach-unten-Meldungen (die vom Server angezeigt werden) sowie grüne Aufwärtspfeil-Meldungen zu erhalten, müssten Sie wie folgt vorgehen:

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 mit Ihren Abfrageparametern wird 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 "Anforderungen " enthält die folgenden drei Spalten:

• Daten: Die Nachrichtennutzlast. Wenn es sich bei der Nachricht um Nur-Text handelt, wird sie hier angezeigt. Bei binären Opcodes zeigt diese Spalte den Namen und Code des Opcodes an. Die folgenden Opcodes werden unterstützt:

  • Continuation Frame
  • Binärer Rahmen
  • Verbindung Frame schließen
  • Ping-Frame
  • Pong-Rahmen

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

• Zeit. Die Zeit, zu der die Nachricht empfangen oder gesendet wurde.

Analysieren von Ereignissen in einem Datenstrom

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

1. Wechseln Sie zu einer Webseite, auf der Ereignisse gestreamt werden, z. B. die Referenz Demo des Netzwerktools in einem neuen Fenster oder auf einer neuen Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Netzwerktool aus.

4. Aktualisieren Sie die Webseite.

   In der TabelleAnforderungen des Netzwerktools werden Zeilen angezeigt für:

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

5. Klicken Sie auf der Demowebseite auf die Schaltfläche "Vom Stream-Server gesendete 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 "Hallo"-Nachricht wird empfangen und einmal pro Sekunde angezeigt.

Geben Sie zum Filtern von Ereignissen einen regulären Ausdruck in die Filterleiste oben auf der Registerkarte "EventStream" ein.

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.

Vorschau eines Antworttexts anzeigen

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

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

2. Wählen Sie in 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 auf eine Anforderung an:

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

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

   

HTTP-Header anzeigen

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 in der Seitenleiste die Registerkarte "Überschriften " aus, und scrollen Sie dann nach unten zu den verschiedenen Abschnitten:

   • Allgemein
   • Header für frühe Hinweise (optional)
   • Antwortheader
   • Anforderungsheader

   

HTTP-Headerquelle anzeigen

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 in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Webseite, auf der XHR verwendet wird, z. B. "Entfernen von -ms-high-contrast und "Standardbasierte erzwungene Farben in Microsoft Edge".

2. Akzeptieren Sie Cookies in der Banner-Eingabeaufforderung, wenn diese angezeigt wird.

   In Regionen, in denen die Datenschutz-Grundverordnung (DSGVO) durchgesetzt wird, zeigt diese Seite ein Cookie-Banner 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 "Überprüfen" aus.

   DevTools wird geöffnet.

4. Wählen Sie das Netzwerktool aus.

5. Aktualisieren Sie die Webseite.

   In der Tabelle "Anforderungen " sind viele Anforderungen aufgelistet.

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 "Überschriften " aus:

   

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

Siehe auch:

• Anzeigen von HTTP-Headern (oben).

Warnung vor vorläufigen Kopfzeilen

Manchmal wird auf der Registerkarte "Kopfzeilen" die Warnmeldung "Vorläufige Kopfzeilen werden angezeigt" angezeigt. Dies kann folgende Ursachen haben:

• Die Anforderung wurde nicht über das Netzwerk gesendet, sondern von einem lokalen Cache verarbeitet, 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 von einem lokalen Cache verarbeitet, in dem die ursprünglichen Anforderungsheader nicht gespeichert werden. In diesem Fall können Sie oben im Netzwerktool das Kontrollkästchen Cache deaktivieren aktivieren, um die vollständigen Anforderungsheader anzuzeigen. Zum Beispiel:

1. Wechseln 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 Netzwerktool aus.

4. Aktualisieren Sie die Webseite.

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

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

   

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

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 deaktivieren (siehe oben).

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 " und dann wie folgt die Registerkarte "Nutzlast " in der Seitenleiste aus:

1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Webseite, z. B. die Referenz zum Tool "Netzwerk" und "Demo".

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Netzwerktool aus.

4. Aktualisieren Sie die Webseite.

   In der TabelleAnforderungen des Netzwerktools werden Zeilen angezeigt für:

   • 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. Zeile form-data-endpoint?hasfile=trueauswählen .

   Die Seitenleiste wird geöffnet, einschließlich der Registerkarte "Nutzlast ".

7. Wählen Sie die Registerkarte Nutzlast aus.

   Die Nutzlast der Anforderung wird angezeigt, einschließlich eines Abschnitts "Abfragezeichenfolgenparameter " und eines Abschnitts "Formulardaten ":

Auf der Registerkarte Konsole von DevTools befindet sich der Fehler:

• 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 Hosting keine Anwendungsserver, sondern nur statische Dateien ausführt.

Nutzlastquelle anzeigen

Standardmäßig zeigt das Netzwerktool die Nutzlast in einer für Menschen 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 einem für Menschen lesbaren Formular an hasfile. Im Abschnitt Formulardaten wird die Nutzlast in einem für Menschen lesbaren Formular angezeigt, für username, timestamp, und file:

   

2. Klicken Sie neben der Überschrift " Abfragezeichenfolgenparameter " auf die Schaltfläche "Quelle anzeigen ".

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

   Die Quellinformationen für die Nutzlast werden angezeigt:

   

URL-codierte Abfragezeichenfolgenparameter anzeigen

So zeigen Sie Abfragezeichenfolgenparameter in einem lesbaren Format an, jedoch ohne Codierungen:

1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Webseite, die Abfragezeichenfolgenparameter verwendet, wie z. B. die Referenz Demo zum Tool "Netzwerk".

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Netzwerktool aus.

4. Aktualisieren Sie die Webseite.

   In der Tabelle "Anforderungen" sind , .css.js, und .png Dateien aufgelistet.html.

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

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

   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 encoded-query-params-endpoint Zeile aus.

   Die Randleiste wird mit Registerkarten geöffnet.

7. Wählen Sie in der Seitenleiste die Registerkarte "Nutzlast " aus.

   Im Abschnitt "Parameter für Abfragezeichenfolgen" wird die URL wie folgt decodiert: https://contoso.com/àéèôçл

   

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

   Die URL wird nun mit codierten Zeichen (z. B %3A . und %2F) angezeigt, und die Beschriftung der Schaltfläche ändert sich in Decodierte anzeigen:

   

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

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

Cookies anzeigen

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

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

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

   

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

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

Anzeigen der Zeitaufschlüsselung einer Anforderung

So zeigen Sie die Zeitaufschlüsselung einer Anforderung an:

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

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

   

Für eine schnellere Möglichkeit, auf die Daten zuzugreifen, siehe Vorschau einer Timing-Aufschlüsselung.

Informationen zu den einzelnen Phasen, die im Timing-Bedienfeld angezeigt werden können, finden Sie weiter unten unter Timing-Aufschlüsselungsphasen erläutert.

Anzeigen einer Vorschau einer Timing-Aufschlüsselung

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

Die Wasserfallspalte ist standardmäßig deaktiviert. Um die Wasserfall-Spalte zu aktivieren, klicken Sie mit der rechten Maustaste auf einen Tabellenkopf "Anforderungen ", und wählen Sie dann den einfachen Wasserfall-Menüpunkt aus, der kein Untermenü hat.

Informationen zum Anzeigen der Daten ohne Daraufzeigen finden Sie oben unter Anzeigen der Zeitaufschlüsselung einer Anforderung.

Erläuterung der Phasen der Zeitaufschlüsselung

Jede dieser Phasen kann auf der Registerkarte "Timing " angezeigt werden:

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

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

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

• Startup. Wenn die Anforderung von einem Service Worker verarbeitet wird, ist der Start die Zeit, die der Service Worker zum Starten benötigte.

• respondWith. Wenn die Anforderung von einem Service Worker verarbeitet wird, ist respondWith die Zeit, die der Service Worker benötigt hat, um den fetchEvent.respondWith() Rückruf auszuführen.

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

• Erste Verbindung. Der Browser stellt eine Verbindung her, einschließlich TCP-Handshakes und Wiederholungsversuchen und verhandelt einen Secure Socket Layer (SSL).

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

• Anforderung gesendet. Die Anforderung wird gesendet.

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

• Anfrage 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. Dieser Zeitplan umfasst einen Roundtrip der Latenz und die Zeit, die der Server zum Vorbereiten der Antwort benötigt hat.

• Inhalte herunterladen. Der Browser empfängt die Antwort.

• Push erhalten. Der Browser empfängt Daten für diese Antwort über HTTP/2 Server Push.

• Lese-Push. Der Browser liest die zuvor empfangenen lokalen Daten.

Analysieren des Routings einer Service Worker-Anforderung

Um das Routing von Anforderungen zu visualisieren, zeigen Zeitachsen das Service Worker-Ereignis Startup und die respondWith Abrufereignisse an. Sie können eine Netzwerkanforderung, die über einen Service Worker geleitet wurde, debuggen und visualisieren.

So zeigen Sie die Zeitaufschlüsselung einer Service Worker-Anfrage an:

1. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Seite, auf der ein Service Worker verwendet wird, z. B. die pwamp-Demoseite .

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

   DevTools wird geöffnet.

3. Wählen Sie das Netzwerktool aus.

4. Seite neu laden.

5. Wählen Sie in der Liste der Anforderungen eine Netzwerkanforderung aus, die eine Service Worker-Datei durchlaufen hat. Wählen Sie beispielsweise about.css aus.

   Die Randleiste wird angezeigt.

6. Klicken Sie in der Seitenleiste auf die Registerkarte Timing :

   

   Im Abschnitt Service Worker werden Timing-Informationen zu den Start - und respondWith-Phasen angezeigt.

7. Klicken Sie auf den Erweiterungspfeil im respondWith-Abschnitt :

   

8. Klicken Sie im Abschnitt respondWith auf den Erweiterungspfeil für "Ursprüngliche Anforderung":

   

9. Klicken Sie bei "Antwort empfangen" auf den Erweiterungspfeil.

Initiatoren und Abhängigkeiten anzeigen

Um die Initiatoren und Abhängigkeiten einer Anforderung anzuzeigen, halten Sie die Umschalttaste gedrückt und bewegen Sie den Mauszeiger über die Anforderung in der Tabelle Anforderungen .

• Die Anforderungen, die die Hover-Anforderung initiiert haben, werden grün angezeigt.
• Die Abhängigkeiten der Hover-Anforderungen werden rot angezeigt.

Wenn die Tabelle Anforderungen chronologisch sortiert ist und Sie mit der Maus über eine Zeile fahren, wird in der vorhergehenden Zeile eine grüne Anforderung angezeigt. Die grüne Anforderung ist der Initiator der Abhängigkeit. Wenn in der Zeile davor eine andere grüne Anforderung angezeigt wird, ist diese höhere Anforderung der Initiator des Initiators. Und so weiter.

Ladeereignisse anzeigen

DevTools zeigt die Zeitsteuerung der DOMContentLoadedload und-Ereignisse an mehreren Stellen im Netzwerktool an:

• Im Übersichtsbereich mit vertikalen Linien.

• In der Spalte Wasserfall der Anforderungstabelle mit vertikalen Linien. Die Wasserfallspalte ist standardmäßig deaktiviert. Um die Wasserfall-Spalte zu aktivieren, klicken Sie mit der rechten Maustaste auf einen Tabellenkopf "Anforderungen ", und wählen Sie dann den einfachen Wasserfall-Menüpunkt aus, der kein Untermenü hat.

• Im Bereich "Zusammenfassung " unten im Netzwerktool mit Timing-Beschriftungen.

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

Anzeigen der Gesamtzahl der Anforderungen

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

Vorsicht: Diese Nummer verfolgt nur Anforderungen, die seit dem Öffnen von DevTools protokolliert wurden. Wenn andere Anforderungen aufgetreten sind, bevor DevTools geöffnet wurde, werden diese Anforderungen nicht gezählt.

Anzeigen der Gesamtgröße des Downloads

Die Gesamtgröße des Downloads der Anforderungen wird im Bereich "Zusammenfassung " am unteren Rand des Netzwerktools aufgeführt.

Vorsicht: Diese Nummer verfolgt nur Anforderungen, die seit dem Öffnen von DevTools protokolliert wurden. Wenn andere Anforderungen aufgetreten sind, bevor DevTools geöffnet wurde, werden die vorherigen Anforderungen nicht gezählt.

Informationen zum Überprüfen, wie groß Ressourcen sind, nachdem der Browser jedes Element dekomprimiert hat, finden Sie unter Anzeigen der nicht komprimierten Größe einer Ressource.

Anzeigen der Stapelüberwachung, die eine Anforderung verursacht hat

Nachdem eine JavaScript-Anweisung eine Ressource angefordert hat, bewegen Sie den Mauszeiger über die Initiatorspalte , um die Stapelüberwachung anzuzeigen, die zu der Anforderung führt.

Anzeigen der nicht komprimierten Größe einer Ressource

So zeigen Sie die übertragene Größe und die nicht komprimierte Größe einer Ressource gleichzeitig an:

1. Klicken Sie oben rechts im Netzwerktool auf das Symbol Netzwerkeinstellungen (Zahnrad). Eine Reihe von Kontrollkästchen wird angezeigt.

2. Aktivieren Sie das Kontrollkästchen "Zeilen mit großer Anforderung ".

3. Überprüfen Sie die Spalte "Größe" in der Tabelle "Anforderung". Der oberste Wert ist die übertragene Größe, und der untere Wert ist die Größe der Ressource, nachdem der Browser sie dekomprimiert hat:

   

Anforderungsdaten exportieren

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

Alle Netzwerkanforderungen in einer HAR-Datei speichern

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. Siehe HAR-Analysetool.

Um die Wahrscheinlichkeit eines versehentlichen Durchs vertraulicher Informationen zu verringern, können Sie das "bereinigte" Netzwerkprotokoll standardmäßig 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. Wechseln Sie in einem neuen Fenster oder auf einer neuen Registerkarte zu einer Webseite, z. B. die Demoseite " Netzwerkaktivität untersuchen ".

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Netzwerktool aus.

4. Aktualisieren Sie die Webseite.

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

   

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

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

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

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

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

   Die Seite Einstellungen> wird geöffnet.

2. Scrollen Sie nach unten zum Abschnitt Netzwerk .

3. Aktivieren Sie das Kontrollkästchen Generieren von HAR 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 Kopieren>Alle als HAR kopieren (mit vertraulichen Daten) aus.

   Oder klicken Sie in der Aktionsleiste oben auf die Schaltfläche " HAR exportieren (entweder bereinigt oder mit 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 zur Analyse mithilfe von HAR Analyzer 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 oben unter Anzeigen eines Anforderungsprotokolls.

Netzwerkanforderungen in die Zwischenablage kopieren

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 Sie mit der rechten Maustaste auf eine Anforderung, und wählen Sie dann Folgendes aus:

Siehe auch:

• Filteranforderungen weiter oben.

Formatierten JSON-Antwortwert in die Zwischenablage kopieren

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 in 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 in 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 wichtige Informationen zu fokussieren.

Ausblenden des Bereichs "Filter"

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

Verwenden von Zeilen mit großen Anforderungen

Verwenden Sie große Anforderungszeilen, wenn Sie mehr Leerzeichen in Ihrer Netzwerkanforderungstabelle wünschen. Einige Spalten bieten auch etwas mehr Informationen, wenn sie große Zeilen verwenden. Zum Beispiel:

• Der untere Wert der Spalte "Größe" ist die nicht komprimierte Größe einer Anforderung.

• In der Spalte "Priorität" (standardmäßig nicht angezeigt) wird sowohl die anfängliche (untere Zahl) als auch die endgültige (oberer Wert) Abrufpriorität angezeigt.

So aktivieren Sie große Zeilen:

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

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann "Überprüfen" aus.

   DevTools wird geöffnet.

3. Wählen Sie in DevTools das Netzwerktool 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 Übersichtsbereichs

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

Siehe auch

• Überprüfen der Netzwerkaktivität – Schritt-für-Schritt-Vorgehensweise und Einführung in das Netzwerktool .

Demo-Webseiten:

• Überprüfen der Netzwerkaktivität
• Referenz zum Tool "Netzwerk" Demo
• TODO-App

Diese Arbeit ist lizenziert unter einer Creative Commons Attribution 4.0 International License.