Referenz zu Netzwerkfeatures

Dieser Artikel ist eine funktionsgesteuerte Bestandsaufnahme des Netzwerktools . Verwenden Sie das Tool Netzwerk , 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
• Ändern des Ladeverhaltens
  • Emulieren eines Erstbesuchers durch Deaktivieren des Browsercaches
  • Manuelles Löschen des Browsercaches
  • Offline emulieren
  • Emulieren langsamer Netzwerkverbindungen
  • Manuelles Löschen von Browsercookies
  • Überschreiben des Benutzer-Agents
• Festlegen von Clienthinweisen für den Benutzer-Agent
• Filtern von Anforderungen
  • Filtern von Anforderungen nach Eigenschaften
  • Filtern von Anforderungen nach Typ
  • Filtern von Anforderungen nach Zeit
  • Daten-URLs ausblenden
• Sortieranforderungen
  • Sortieren nach Spalte
  • Sortieren nach Aktivitätsphase
• Analysieren von Anforderungen
  • Anzeigen der Zeitsteuerungsbeziehung von Anforderungen
  • Anzeigen einer Vorschau eines Antworttexts
  • Anzeigen eines Antworttexts
  • Anzeigen von HTTP-Headern
  • Anzeigen von Abfragezeichenfolgenparametern
  • Cookies anzeigen
  • Anzeigen der Zeitlichen Aufschlüsselung einer Anforderung
  • 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 einer oder mehrerer Anforderungen in die Zwischenablage
  • Kopieren eines formatierten ANTWORT-JSON-Codes in die Zwischenablage
  • Kopieren von Eigenschaftswerten aus Netzwerkanforderungen in die Zwischenablage
• Ändern des Layouts des Bereichs "Netzwerk"
  • Ausblenden des Bereichs "Filter"
  • Große Anforderungszeilen
  • Ausblenden des Bereichs "Übersicht"

Aufzeichnen von Netzwerkanforderungen

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

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.

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.

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. Öffnen Sie in DevTools das Tool Netzwerk .

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

3. 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.

Ä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"

Im Tool Netzwerk können Sie das Tool Netzwerkbedingungen im Bereich Schnellansicht öffnen und dann den Browsercache dort deaktivieren:

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

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

Emulieren Sie langsame 3G-, schnelle 3G- und andere Verbindungsgeschwindigkeiten aus dem Dropdownmenü Keine Drosselung .

Dropdownmenü "Drosselung ":

Sie können aus verschiedenen Voreinstellungen wählen, z. B. Slow 3G oder Fast 3G. Um Ihre eigenen benutzerdefinierten Voreinstellungen hinzuzufügen, öffnen Sie das Drosselungsmenü, und wählen Sie Benutzerdefiniert>Hinzufügen aus.

DevTools zeigt ein Warnsymbol neben dem Netzwerktool an, um Sie daran zu erinnern, dass die Drosselung aktiviert ist.

Weitere Informationen finden Sie unter Simulieren einer langsameren Netzwerkverbindung unter Untersuchen der Netzwerkaktivität.

Emulieren langsamer Netzwerkverbindungen über das Tool "Netzwerkbedingungen"

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

1. Klicken Sie im Tool Netzwerk auf Weitere Netzwerkbedingungen ( . Das Tool Netzwerkbedingungen wird im Bereich Schnellansicht 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.

Ü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 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 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.

Filtern von Anforderungen

Sie können Anforderungen nach Eigenschaften, Typ oder Uhrzeit filtern und Daten-URLs ausblenden.

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.

Das Textfeld 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 derzeit nicht unterstützt.

Die vollständige Liste der unterstützten Eigenschaften:

Eigenschaft	Details
domain	Zeigt nur Ressourcen aus der angegebenen Domäne an. Sie können ein Wildcardzeichen (*) verwenden, um mehrere Domänen einzuschließen. Zeigt beispielsweise Ressourcen aus allen Domänennamen an, *.com die auf enden .com. DevTools füllt das Dropdownmenü "AutoVervollständigen" mit allen gefundenen Domänen auf.
has-response-header	Zeigt die Ressourcen an, die den angegebenen HTTP-Antwortheader enthalten. DevTools füllt das Dropdownmenü "AutoVervollständigen" mit allen gefundenen Antwortheadern auf.
is	Verwenden Sie is:running , um Ressourcen zu suchen WebSocket .
larger-than	Zeigt Ressourcen in Bytes an, die größer als die angegebene Größe sind. Das Festlegen eines Werts von 1000 entspricht dem Festlegen eines Werts von 1k.
method	Zeigt Ressourcen an, die über einen angegebenen HTTP-Methodentyp abgerufen wurden. DevTools füllt das Dropdownmenü mit allen gefundenen HTTP-Methoden auf.
mime-type	Zeigt Ressourcen eines angegebenen MIME-Typs an. DevTools füllt das Dropdownmenü mit allen gefundenen MIME-Typen auf.
mixed-content	Zeigen Sie alle gemischten Inhaltsressourcen (mixed-content:all) oder nur die ressourcen an, die derzeit angezeigt werden (mixed-content:displayed).
scheme	Zeigt Ressourcen an, die über ungeschütztes HTTP (scheme:http) oder geschütztes HTTPS (scheme:https) abgerufen wurden.
set-cookie-domain	Zeigt Ressourcen mit einem Set-Cookie Header mit einem Domain Attribut an, das dem angegebenen Wert entspricht. DevTools füllen das AutoVervollständigen mit allen gefundenen Cookiedomänen auf.
set-cookie-name	Zeigt Ressourcen mit einem Set-Cookie Header mit einem Namen an, der dem angegebenen Wert entspricht. DevTools füllen das AutoVervollständigen mit allen gefundenen Cookienamen auf.
set-cookie-value	Zeigt Ressourcen mit einem Set-Cookie Header mit einem Wert an, der dem angegebenen Wert entspricht. DevTools füllen das AutoVervollständigen mit allen gefundenen Cookiewerten auf.
status-code	Zeigt Ressourcen an, die dem spezifischen HTTP-status-Code entsprechen. DevTools füllt das Dropdownmenü autoVervollständigen mit allen gefundenen status Codes auf.

Filtern von Anforderungen nach Typ

Klicken Sie im Bereich Netzwerk auf die Schaltflächen, um Anforderungen nach Anforderungstyp zu filtern:

• XHR
• JS
• CSS
• Img
• Medien
• Font
• Doc
• WS – WebSocket.
• Manifest
• Sonstige: Alle anderen Typen, die hier nicht aufgeführt sind.

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

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

Verwenden Sie die Typfilter , um JS-, CSS- und Dokumentressourcen anzuzeigen:

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:

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

So ändern Sie, wie der Wasserfall Anforderungen sortiert:

• 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. 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 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.
• Wasserfall. Eine visuelle Aufschlüsselung der Aktivität jeder Anforderung.

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 von Spalten für Antwortheader

Um der Tabelle Anforderungen eine benutzerdefinierte Spalte hinzuzufügen, klicken Sie mit der rechten Maustaste auf die Kopfzeile der Tabelle Anforderungen, und wählen Sie dann Antwortheader>Spalten verwalten aus. Das Popupfenster Kopfzeilenspalten verwalten wird geöffnet. 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.

Anzeigen der Zeitsteuerungsbeziehung von Anforderungen

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

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

Die Spalte Wasserfall des Bereichs Anforderungen :

Anzeigen einer Vorschau eines Antworttexts

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

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

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

   

Anzeigen eines Antworttexts

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

1. Klicken Sie in der Tabelle Anforderung 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 Anforderung auf den Namen der Anforderung.

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

   

Anzeigen von Abfragezeichenfolgenparametern

So zeigen Sie die Abfragezeichenfolgenparameter einer HTTP-Anforderung in einem lesbaren Format an:

1. Klicken Sie in der Tabelle Anforderung auf den Namen der Anforderung.
2. Wählen Sie auf der Randleiste die Registerkarte Nutzlast aus:

Um stattdessen die Quelle der Abfragezeichenfolgenparameter anzuzeigen, klicken Sie auf Quelle anzeigen.

Anzeigen von URL-codierten Abfragezeichenfolgenparametern

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

1. Klicken Sie in der Tabelle Anforderung auf den Namen der Anforderung.
2. Wählen Sie auf der Randleiste die Registerkarte Nutzlast aus.
3. Klicken Sie auf URL-codiert anzeigen.

Cookies anzeigen

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

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

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

   

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.

Anzeigen einer Vorschau der Zeitlichen Aufschlüsselung einer Anforderung:

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.
• 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

Speichern aller Netzwerkanforderungen in einer HAR-Datei

So speichern Sie alle Netzwerkanforderungen in einer HAR-Datei:

1. Klicken Sie in der Tabelle Anforderungen mit der rechten Maustaste auf eine Anforderung, und wählen Sie dann Alle als HAR mit Inhalt speichern aus.

   

2. 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.

Nachdem Sie eine HAR-Datei gespeichert haben, können Sie sie zur Analyse wieder in DevTools importieren, indem Sie die HAR-Datei in die Tabelle Anforderungen ziehen und ablegen.

Kopieren einer oder mehrerer Anforderungen in die Zwischenablage

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

Name	Details
Linkadresse kopieren	Kopieren Sie die URL der Anforderung in die Zwischenablage.
Antwort kopieren	Kopieren Sie den Antworttext in die Zwischenablage.
Als Abruf kopieren
Als cURL kopieren	Kopieren Sie die Anforderung als cURL Befehl.
Alle als Fetch kopieren
Alle als cURL kopieren	Kopieren Sie alle Anforderungen als Kette von cURL Befehlen.
Alle als HAR kopieren	Kopieren Sie alle Anforderungen als HAR-Daten.

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 Anforderung 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, um ihn zu überprüfen.

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, um ihn zu überprüfen.

Ändern des Layouts des Bereichs "Netzwerk"

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.

Große 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 große Zeilen verwendet werden. Der untere Wert der Spalte Größe ist beispielsweise die unkomprimierte Größe einer Anforderung.

Um große Zeilen zu aktivieren, aktivieren Sie das Kontrollkästchen Große Anforderungszeilen . Beispiel für große Anforderungszeilen im Bereich Anforderungen :

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 .

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite finden Sie hier und wird von Kayce Basques geschrieben.

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