Netzwerkaktivität überprüfen

Kayce Basques

In diesem praktischen Tutorial werden einige der am häufigsten verwendeten Entwicklertools-Funktionen zum Untersuchen der Netzwerkaktivität einer Seite vorgestellt.

Wenn Sie stattdessen Funktionen durchsuchen möchten, lesen Sie die Netzwerkreferenz.

Lesen Sie weiter oder sehen Sie sich die Videoversion dieses Tutorials an:

Wann sollte der Bereich „Netzwerk“ verwendet werden?

Im Allgemeinen sollten Sie den Bereich Netzwerk verwenden, wenn Sie sicherstellen müssen, dass Ressourcen wie erwartet heruntergeladen oder hochgeladen werden. Die häufigsten Anwendungsfälle für den Bereich Netzwerk sind:

• Sicherstellen, dass Ressourcen überhaupt hoch- oder heruntergeladen werden.
• Untersuchen der Eigenschaften einer einzelnen Ressource, z. B. ihrer HTTP-Header, Inhalte, Größe usw.

Wenn Sie die Leistung des Seitenaufbaus verbessern möchten, beginnen Sie nicht mit dem Netzwerkbereich. Es gibt viele Arten von Problemen mit der Ladeleistung, die nicht mit der Netzwerkaktivität zusammenhängen. Beginnen Sie mit dem Bereich „Lighthouse“, da er Ihnen gezielte Vorschläge zur Verbesserung Ihrer Seite gibt. Weitere Informationen finden Sie unter Websitegeschwindigkeit optimieren.

Bereich „Netzwerk“ öffnen

Damit Sie dieses Tutorial optimal nutzen können, öffnen Sie die Demo und probieren Sie die Funktionen auf der Demoseite aus.

1. Öffnen Sie die Demo „Erste Schritte“.

   

   Möglicherweise möchten Sie die Demo in ein separates Fenster verschieben.

   

2. Öffnen Sie die Entwicklertools, indem Sie Strg + Umschalttaste + J oder Befehlstaste + Wahltaste + J (Mac) drücken. Der Bereich Console wird geöffnet.

   

   Möglicherweise möchten Sie die Entwicklertools unten im Fenster andocken.

   

3. Klicken Sie auf den Tab Netzwerk. Der Bereich Netzwerk wird geöffnet.

   

Der Bereich Netzwerk ist derzeit leer. Das liegt daran, dass die Entwicklertools die Netzwerkaktivität nur protokollieren, wenn sie geöffnet sind. Seit dem Öffnen der Entwicklertools ist keine Netzwerkaktivität aufgetreten.

Netzwerkaktivitäten protokollieren

So sehen Sie die Netzwerkaktivität, die durch eine Seite verursacht wird:

1. Aktualisieren Sie die Seite. Im Bereich Netzwerk wird die gesamte Netzwerkaktivität im Netzwerkprotokoll protokolliert.

   

   Jede Zeile des Netzwerkprotokolls stellt eine Ressource dar. Standardmäßig werden die Ressourcen in chronologischer Reihenfolge aufgeführt. Die oberste Ressource ist in der Regel das Haupt-HTML-Dokument. Die unterste Ressource ist die zuletzt angeforderte Ressource.

   Jede Spalte enthält Informationen zu einer Ressource. Die Standardspalten sind:

   • Status: Der HTTP-Antwortcode.
   • Typ: Der Ressourcentyp.
   • Initiator: Was hat dazu geführt, dass eine Ressource angefordert wurde? Wenn Sie in der Spalte „Initiator“ auf einen Link klicken, gelangen Sie zum Quellcode, der die Anfrage verursacht hat.
   • Größe: Die über das Netzwerk übertragene Ressourcenmenge.
   • Zeit: Wie lange die Anfrage gedauert hat.

2. Solange die Entwicklertools geöffnet sind, wird die Netzwerkaktivität im Netzwerkprotokoll aufgezeichnet. Sehen Sie sich dazu zuerst das Ende des Netzwerkprotokolls an und notieren Sie sich die letzte Aktivität.

3. Klicken Sie nun in der Demo auf die Schaltfläche Daten abrufen.

4. Sehen Sie sich noch einmal das Ende des Netzwerkprotokolls an. Es gibt eine neue Ressource namens getstarted.json. Durch Klicken auf die Schaltfläche Daten abrufen wurde diese Datei von der Seite angefordert.

   

Weitere Informationen

Die Spalten des Netzwerkprotokolls sind konfigurierbar. Sie können Spalten ausblenden, die Sie nicht verwenden. Außerdem gibt es viele Spalten, die standardmäßig ausgeblendet sind und die für Sie nützlich sein könnten.

1. Klicken Sie mit der rechten Maustaste auf den Header der Tabelle Netzwerkprotokoll und wählen Sie Domain aus. Die Domain jeder Ressource wird jetzt angezeigt.

   

Langsamere Netzwerkverbindung simulieren

Die Netzwerkverbindung des Computers, den Sie zum Erstellen von Websites verwenden, ist wahrscheinlich schneller als die Netzwerkverbindungen der Mobilgeräte Ihrer Nutzer. Durch Drosseln der Seite können Sie besser einschätzen, wie lange es dauert, bis eine Seite auf einem Mobilgerät geladen wird.

1. Klicken Sie auf das Drop-down-Menü Drosselung, das standardmäßig auf Keine Drosselung festgelegt ist.

   

2. Wählen Sie 3G aus.

   

3. Halten Sie Aktualisieren refresh gedrückt und wählen Sie dann Cache leeren und vollständig aktualisieren aus.

   

   Bei wiederholten Besuchen stellt der Browser in der Regel einige Dateien aus seinem Cache bereit, wodurch der Seitenaufbau beschleunigt wird. Mit Cache leeren und vollständig aktualisieren wird der Browser gezwungen, alle Ressourcen aus dem Netzwerk abzurufen. Das ist hilfreich, wenn Sie sehen möchten, wie ein Erstbesucher das Laden einer Seite erlebt.

Screenshots aufnehmen

Screenshots zeigen, wie Ihre Seite zu verschiedenen Zeitpunkten während des Ladevorgangs aussieht, und berichten, welche Ressourcen in jedem Intervall geladen werden.

So nehmen Sie Screenshots auf:

1. Klicken Sie auf Netzwerkeinstellungen settings.

2. Aktivieren Sie das Kästchen Screenshots check_box.

3. Aktualisieren Sie die Seite noch einmal mit dem Workflow Cache leeren und vollständig aktualisieren. Wenn Sie sich nicht mehr erinnern, wie das geht, lesen Sie den Abschnitt Langsamere Netzwerkverbindung simulieren. Auf dem Tab Screenshots finden Sie Thumbnails, wie die Seite zu verschiedenen Zeitpunkten während des Ladevorgangs aussah.

   

4. Klicken Sie auf das erste Thumbnail. In den Entwicklertools wird angezeigt, welche Netzwerkaktivität zu diesem Zeitpunkt stattgefunden hat.

   

5. Deaktivieren Sie das Kästchen Screenshots , um den Tab „Screenshots“ zu schließen.

6. Aktualisieren Sie die Seite noch einmal.

Details einer Ressource untersuchen

Klicken Sie auf eine Ressource, um weitere Informationen dazu zu erhalten. Jetzt ausprobieren:

1. Klicken Sie auf getstarted.html. Der Tab Header wird angezeigt. Auf diesem Tab können Sie HTTP-Header untersuchen.

   

2. Klicken Sie auf den Tab Vorschau , um eine einfache HTML-Darstellung zu sehen.

   

   Dieser Tab ist hilfreich, wenn eine API einen Fehlercode in HTML zurückgibt und es einfacher ist, das gerenderte HTML als den HTML-Quellcode zu lesen, oder wenn Sie Bilder untersuchen.

3. Klicken Sie auf den Tab Antwort , um den HTML-Quellcode zu sehen.

   

4. Klicken Sie auf den Tab Initiator , um eine Struktur zu sehen, die die Kette der Anfrageninitiatoren darstellt.

   

5. Klicken Sie auf den Tab Zeit , um eine Aufschlüsselung der Netzwerkaktivität für diese Ressource zu sehen.

   

6. Klicken Sie auf Schließen close, um wieder das Netzwerkprotokoll zu sehen.

   

Netzwerkheader und -antworten durchsuchen

Verwenden Sie den Tab Suchen , wenn Sie die HTTP-Header und -Antworten aller Ressourcen nach einer bestimmten String oder einem regulären Ausdruck durchsuchen müssen.

Angenommen, Sie möchten prüfen, ob Ihre Ressourcen angemessene Cache-Richtlinien verwenden.

1. Klicken Sie in der Aktionsleiste des Bereichs auf Suchen search oder drücken Sie Befehlstaste + F (macOS) oder Strg + F (Windows / Linux).

   Der Tab Suchen wird links neben dem Netzwerkprotokoll geöffnet.

   

2. Geben Sie Cache-Control ein und drücken Sie die Eingabetaste. Auf dem Tab Suchen werden alle Instanzen von Cache-Control aufgeführt, die in Ressourcenheadern oder -inhalten gefunden wurden.

   

3. Klicken Sie auf ein Ergebnis, um es aufzurufen. Wenn die Abfrage in einem Header gefunden wurde, wird der Tab „Header“ geöffnet. Wenn die Abfrage im Inhalt gefunden wurde, wird der Tab Antwort geöffnet.

   

4. Schließen Sie den Tab Suchen und den Tab Header.

   

Ressourcen filtern

Die Entwicklertools bieten zahlreiche Workflows zum Herausfiltern von Ressourcen, die für die aktuelle Aufgabe nicht relevant sind.

Die Symbolleiste Filter sollte standardmäßig aktiviert sein. Falls nicht:

1. Klicken Sie auf Filter filter_alt, um sie anzuzeigen.

Nach String, regulärem Ausdruck oder Attribut filtern

Das Eingabefeld Filter unterstützt viele verschiedene Arten von Filtern.

1. Geben Sie png in das Eingabefeld Filter ein. Es werden nur die Dateien angezeigt, die den Text png enthalten. In diesem Fall sind die einzigen Dateien, die dem Filter entsprechen, die PNG-Bilder.

   

2. Geben Sie /.*\.[cj]s+$/ ein. Die Entwicklertools filtern alle Ressourcen heraus, deren Dateiname nicht mit einem j oder einem c gefolgt von einem oder mehreren s Zeichen endet.

   

3. Geben Sie -main.css ein. Die Entwicklertools filtern main.css heraus. Wenn eine andere Datei mit dem Muster übereinstimmt, wird sie ebenfalls herausgefiltert.

   

4. Geben Sie domain:raw.githubusercontent.com in das Textfeld Filter ein. Die Entwicklertools filtern alle Ressourcen mit einer URL heraus, die nicht mit dieser Domain übereinstimmt.

   

   Eine vollständige Liste der filterbaren Attribute finden Sie unter Anfragen nach Attributen filtern.

5. Entfernen Sie den gesamten Text aus dem Eingabefeld Filter.

Nach Ressourcentyp filtern

So konzentrieren Sie sich auf einen bestimmten Dateityp, z. B. Stylesheets:

1. Klicken Sie auf CSS. Alle anderen Dateitypen werden herausgefiltert.

   

2. Wenn Sie auch Skripts sehen möchten, halten Sie die Strg-Taste oder die Befehlstaste (Mac) gedrückt und klicken Sie dann auf JS.

   

3. Klicken Sie auf Alle , um die Filter zu entfernen und wieder alle Ressourcen zu sehen.

Weitere Workflows zum Filtern finden Sie unter Anfragen filtern.

Anfragen blockieren

Wie sieht eine Seite aus und wie verhält sie sich, wenn einige ihrer Ressourcen nicht verfügbar sind? Funktioniert sie überhaupt nicht oder ist sie noch einigermaßen funktionsfähig? Blockieren Sie Anfragen, um das herauszufinden:

1. Drücken Sie Strg + Umschalttaste + P oder Befehlstaste + Umschalttaste + P (Mac), um das Befehlsmenü zu öffnen.

   

2. Geben Sie block ein, wählen Sie Anfragenblockierung anzeigen aus und drücken Sie die Eingabetaste.

   

3. Klicken Sie auf die Schaltfläche Muster hinzufügen.

4. Geben Sie main.css ein.

   

5. Klicken Sie auf Hinzufügen.

6. Aktualisieren Sie die Seite. Wie erwartet ist das Styling der Seite etwas durcheinander, da das Haupt-Stylesheet blockiert wurde. Beachten Sie die Zeile main.css im Netzwerkprotokoll. Der rote Text bedeutet, dass die Ressource blockiert ist.

   

7. Deaktivieren Sie das Kästchen Anfragenblockierung aktivieren.

Weitere Informationen zu Entwicklertools-Funktionen zum Untersuchen der Netzwerkaktivität finden Sie in der Netzwerkreferenz.