Netzwerkaktivität überprüfen

Kayce Basques

Dies ist ein praxisorientiertes Tutorial zu einigen der am häufigsten verwendeten Entwicklertools-Funktionen zur Prüfung der Netzwerkaktivität einer Seite.

In der Netzwerkreferenz finden Sie Informationen zu den Funktionen.

Lesen Sie weiter oder sehen Sie sich die Videoversion dieser Anleitung an:

Wann wird das Steuerfeld „Netzwerk“ verwendet?

Verwenden Sie im Allgemeinen das Steuerfeld „Network“ (Netzwerk), wenn Sie prüfen müssen, ob Ressourcen wie erwartet heruntergeladen oder hochgeladen werden. Die häufigsten Anwendungsfälle für das Steuerfeld „Netzwerk“ sind:

• Es wird geprüft, ob die Ressourcen tatsächlich hoch- oder heruntergeladen werden.
• Eigenschaften einer einzelnen Ressource überprüfen, z. B. HTTP-Header, Inhalt, Größe usw.

Wenn Sie die Leistung beim Laden von Seiten verbessern möchten, beginnen Sie nicht mit dem Bereich „Netzwerk“. Es gibt viele Arten von Problemen mit der Ladeleistung, die nicht mit der Netzwerkaktivität zusammenhängen. Beginnen Sie mit dem Lighthouse-Steuerfeld, da Sie dort gezielte Vorschläge zur Verbesserung Ihrer Seite erhalten. Siehe Websitegeschwindigkeit optimieren.

Steuerfeld „Netzwerk“ öffnen

Öffnen Sie die Demo und probieren Sie die Funktionen auf der Demoseite aus, um dieses Tutorial optimal zu nutzen.

1. Öffnen Sie die Demo „Jetzt starten“.

   

   Abbildung 1. Die Demo

   Sie können die Demo lieber in ein separates Fenster verschieben.

   

   Abbildung 2. Die Demo in einem Fenster und diese Anleitung in einem anderen Fenster

2. Öffnen Sie die Entwicklertools mit der Tastenkombination Strg + Umschalttaste + J oder Befehlstaste + Wahltaste + J (Mac). Das Steuerfeld Console wird geöffnet.

   

   Abbildung 3. Die Console

   Sie können die Entwicklertools lieber unten in Ihrem Fenster andocken.

   

   Abbildung 4. Am unteren Fensterrand angedockte Entwicklertools

3. Klicken Sie auf den Tab Netzwerk. Das Steuerfeld „Netzwerk“ wird geöffnet.

   

   Abbildung 5. Am unteren Fensterrand angedockte Entwicklertools

Im Moment ist der Bereich „Network“ leer. Das liegt daran, dass DevTools die Netzwerkaktivität nur dann protokolliert, wenn es geöffnet ist. Seit dem Öffnen der Entwicklertools sind keine Netzwerkaktivitäten aufgetreten.

Netzwerkaktivitäten protokollieren

So zeigen Sie die Netzwerkaktivität an, die eine Seite verursacht:

1. Lade die Seite neu. Im Steuerfeld „Netzwerk“ werden alle Netzwerkaktivitäten im Netzwerkprotokoll protokolliert.

   

   Abbildung 6. Das Netzwerkprotokoll

   Jede Zeile des Netzwerkprotokolls stellt eine Ressource dar. Standardmäßig werden die Ressourcen chronologisch aufgelistet. Die oberste Ressource ist normalerweise das Haupt-HTML-Dokument. Die unterste Ressource ist die Ressource, die zuletzt angefordert wurde.

   Jede Spalte enthält Informationen zu einer Ressource. Abbildung 6 zeigt die Standardspalten:

   • Status: Der HTTP-Antwortcode.
   • Typ: Der Ressourcentyp.
   • Initiator: Was hat dazu geführt, dass eine Ressource angefordert wurde. Wenn Sie auf einen Link in der Spalte „Initiator“ klicken, gelangen Sie zum Quellcode, der die Anfrage verursacht hat.
   • Zeit. Wie lange die Anfrage gedauert hat.
   • Wasserfall: Eine grafische Darstellung der verschiedenen Phasen der Anfrage. Bewegen Sie den Mauszeiger auf einen Wasserfall, um eine Aufschlüsselung zu sehen.

2. Solange die Entwicklertools geöffnet sind, wird die Netzwerkaktivität im Netzwerkprotokoll aufgezeichnet. Sehen Sie sich zur Veranschaulichung zunächst den unteren Teil des Netzwerkprotokolls an und notieren Sie sich die letzte Aktivität.

3. Klicken Sie nun in der Demo auf die Schaltfläche Get Data (Daten abrufen).

4. Sehen Sie am Ende des Netzwerkprotokolls noch einmal nach. Es gibt eine neue Ressource mit dem Namen getstarted.json. Der Klick auf die Schaltfläche Daten abrufen hat dazu geführt, dass die Seite diese Datei anfordert.

   

   Abbildung 7. Eine neue Ressource im Netzwerkprotokoll

Weitere Informationen

Die Spalten des Netzwerkprotokolls sind konfigurierbar. Nicht verwendete Spalten können ausgeblendet werden. Außerdem sind viele Spalten standardmäßig ausgeblendet, was nützlich sein kann.

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.

   

   Abbildung 8. Spalte „Domain“ aktivieren

Langsamere Netzwerkverbindung simulieren

Die Netzwerkverbindung des Computers, mit dem Sie Websites erstellen, ist wahrscheinlich schneller als die Netzwerkverbindungen der Mobilgeräte Ihrer Nutzer. Durch Drosselung der Seite erhalten Sie eine bessere Vorstellung davon, wie lange eine Seite auf einem Mobilgerät zum Laden braucht.

1. Klicken Sie auf das Drop-down-Menü Throttling (Drosselung), das standardmäßig auf Online festgelegt ist.

   

   Abbildung 9. Drosselung aktivieren

2. Wähle Langsames 3G aus.

   

   Abbildung 10. Auswahl von langsamem 3G

3. Drücken Sie lange auf Aktualisieren und wählen Sie dann Cache leeren und vollständig neu laden aus.

   

   Abbildung 11. Cache leeren und vollständig aktualisieren

   Bei wiederholten Besuchen stellt der Browser normalerweise einige Dateien aus dem Cache bereit, wodurch der Seitenaufbau beschleunigt wird. Cache leeren und vollständig neu laden zwingt den Browser dazu, für alle Ressourcen das Netzwerk zu verwenden. Das ist hilfreich, wenn Sie sehen möchten, wie ein Erstbesucher einen Seitenaufbau erlebt.

Screenshots aufnehmen

Anhand von Screenshots können Sie sehen, wie eine Seite während des Ladevorgangs im Zeitverlauf ausgesehen hat.

1. Klicken Sie auf Capture Screenshots .

2. Aktualisieren Sie die Seite mithilfe des Workflows Cache leeren und vollständig neu laden erneut. Weitere Informationen finden Sie unter Langsame Verbindung simulieren. Der Bereich „Screenshots“ enthält Miniaturansichten, die zeigen, wie die Seite während des Ladevorgangs an verschiedenen Stellen angezeigt wurde.

   

   Abbildung 12. Screenshots des Seitenaufbaus

3. Klicke auf das erste Thumbnail. In den Entwicklertools sehen Sie, welche Netzwerkaktivität zu diesem Zeitpunkt stattgefunden hat.

   

   Abbildung 13. Die Netzwerkaktivität beim ersten Screenshot

4. Klicken Sie noch einmal auf Capture Screenshots (Screenshots aufnehmen), um den Screenshot-Bereich zu schließen.

5. Aktualisieren Sie die Seite noch einmal.

Details einer Ressource prüfen

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

1. Klicken Sie auf getstarted.html. Der Tab Headers (Überschriften) wird angezeigt. Verwenden Sie diesen Tab, um HTTP-Header zu prüfen.

   

   Abbildung 14. Tab „Headers“

2. Klicken Sie auf den Tab Vorschau. Es wird ein grundlegendes HTML-Rendering gezeigt.

   

   Abbildung 15. Tab „Vorschau“

   Dieser Tab ist hilfreich, wenn eine API einen Fehlercode in HTML zurückgibt und der gerenderte HTML-Code einfacher zu lesen ist als der HTML-Quellcode oder wenn Bilder untersucht werden.

3. Klicken Sie auf den Tab Response (Antwort). Der HTML-Quellcode wird angezeigt.

   

   Abbildung 16. Tab „Response“

4. Klicken Sie auf den Tab Timing. Eine Aufschlüsselung der Netzwerkaktivität für diese Ressource wird angezeigt.

   

   Abbildung 17. Tab „Timing“

5. Klicken Sie auf Schließen , um das Netzwerkprotokoll noch einmal aufzurufen.

   

   Abbildung 18. Schaltfläche „Schließen“

In Header und Antworten des Netzwerks suchen

Im Bereich Suchen können Sie die HTTP-Header und -Antworten aller Ressourcen nach einem bestimmten String oder regulären Ausdruck durchsuchen.

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

1. Klicken Sie auf Suchen . Der Suchbereich wird links neben dem Netzwerkprotokoll geöffnet.

   

   Abbildung 19. Suchbereich

2. Geben Sie Cache-Control ein und drücken Sie die Eingabetaste. Im Suchbereich werden alle Instanzen von Cache-Control aufgelistet, die in Ressourcenheadern oder Inhalten gefunden werden.

   

   Abbildung 20. Suchergebnisse für Cache-Control

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

   

   Abbildung 21. Ein auf dem Tab „Headers“ hervorgehobenes Suchergebnis

4. Schließen Sie das Suchfenster und den Tab „Timing“.

   

   Abbildung 22. Schaltflächen zum Schließen

Ressourcen filtern

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

Abbildung 23. Symbolleiste „Filter“

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

1. Klicken Sie auf Filter , um sie aufzurufen.

Nach String, regulärem Ausdruck oder Attribut filtern

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

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

   

   Abbildung 24. Stringfilter

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

   

   Abbildung 25. Einen Filter für reguläre Ausdrücke

3. Geben Sie -main.css ein. Die Entwicklertools filtern main.css heraus. Stimmt eine andere Datei mit dem Muster überein, werden sie ebenfalls herausgefiltert.

   

   Abbildung 26. Ein negativer Filter

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

   

   Abbildung 27. Einen Property-Filter

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

5. Löschen Sie den Eintrag im Textfeld 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.

   

   Abbildung 28. Nur CSS-Dateien werden angezeigt

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

   

   Abbildung 29. Nur CSS- und JS-Dateien werden angezeigt

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

Weitere Informationen zu Filter-Workflows finden Sie unter Filteranfragen.

Anfragen blockieren

Wie sieht und verhalten sich eine Seite, wenn einige ihrer Ressourcen nicht verfügbar sind? Schlägt sie vollständig fehl oder funktioniert sie noch etwas? Sie können Anfragen blockieren, um Folgendes herauszufinden:

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

   

   Abbildung 30. Das Befehlsmenü

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

   

   Abbildung 31. Anfrageblockierung anzeigen

3. Klicken Sie auf Muster hinzufügen .

4. Geben Sie main.css ein.

   

   Abbildung 32. main.css wird blockiert

5. Klicken Sie auf Hinzufügen.

6. Lade die Seite neu. Wie erwartet, ist der Stil der Seite leicht durcheinandergeraten, da das Haupt-Stylesheet blockiert wurde. Beachten Sie die Zeile main.css im Netzwerkprotokoll. Der rote Text bedeutet, dass die Ressource blockiert wurde.

   

   Abbildung 33. main.css wurde blockiert

7. Entfernen Sie das Häkchen aus dem Kästchen Anfrageblockierung aktivieren.

Nächste Schritte

Herzlichen Glückwunsch! Sie haben die Anleitung abgeschlossen. Klicke auf Award verteilen, um deinen Award zu erhalten.

In der Netzwerkreferenz finden Sie weitere Entwicklertools-Funktionen zur Prüfung der Netzwerkaktivität.