Netzwerkaktivität überprüfen

Kayce Basken

Twitter GitHub Glitch

Dies ist eine praxisorientierte Anleitung zu einigen der am häufigsten verwendeten Entwicklertools-Funktionen zur Prüfung der Netzwerkaktivität einer Seite.

Wenn Sie sich stattdessen die Funktionen ansehen möchten, finden Sie unter Netzwerkreferenz weitere Informationen.

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

Verwendung des Steuerfelds „Netzwerk“

Im Allgemeinen sollten Sie das Steuerfeld „Netzwerk“ verwenden, wenn Sie dafür sorgen müssen, dass Ressourcen wie erwartet heruntergeladen oder hochgeladen werden. Das sind die häufigsten Anwendungsfälle für das Steuerfeld „Netzwerk“:

• Sicherstellen, dass Ressourcen auch wirklich hoch- oder heruntergeladen werden.
• Die Attribute einer einzelnen Ressource überprüfen, z. B. HTTP-Header, Inhalt, Größe usw.

Wenn Sie die Leistung beim Seitenaufbau verbessern möchten, beginnen Sie nicht mit dem Steuerfeld „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. Weitere Informationen finden Sie unter Websitegeschwindigkeit optimieren.

Netzwerkbereich öffnen

Um diese Anleitung optimal zu nutzen, öffnen Sie die Demo und testen Sie die Funktionen auf der Demoseite.

1. Öffnen Sie den Demomodus für den Einstieg.

   

   Abbildung 1. Die Demo

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

   

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

2. Öffnen Sie die Entwicklertools durch Drücken von Strg + Umschalttaste + J oder Befehlstaste + Option + J (Mac). Die Konsole wird geöffnet.

   

   Abbildung 3. Die Konsole

   Sie können die Entwicklertools lieber am unteren Fensterrand andocken.

   

   Abbildung 4. Am unteren Fensterrand fixierte Entwicklertools

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

   

   Abbildung 5. Am unteren Fensterrand fixierte Entwicklertools

Der Bereich „Netzwerk“ ist momentan leer. Das liegt daran, dass die Entwicklertools die Netzwerkaktivität nur protokollieren, während sie geöffnet ist, und seit dem Öffnen der Entwicklertools keine Netzwerkaktivitäten aufgetreten sind.

Netzwerkaktivitäten protokollieren

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

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

   

   Abbildung 6. Das Netzwerkprotokoll

   Jede Zeile im Netzwerklog stellt eine Ressource dar. Standardmäßig sind die Ressourcen chronologisch aufgelistet. Die oberste Ressource ist normalerweise das HTML-Hauptdokument. 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: Die Ursache für die Anforderung einer Ressource. Wenn Sie in der Spalte „Initiator“ (Initiator) auf einen Link klicken, gelangen Sie zum Quellcode, der die Anfrage verursacht hat.
   • Zeit. Wie lange die Anfrage gedauert hat.

   • Wasserfall: Grafische Darstellung der verschiedenen Phasen der Anfrage. Bewegen Sie den Mauszeiger auf einen Wasserfall, um eine Aufschlüsselung zu sehen.

     Hinweis: Hinweis: Das Diagramm über dem Netzwerkprotokoll wird als Übersicht bezeichnet. Sie werden sie in dieser Anleitung nicht verwenden, können sie aber auch ausblenden. Weitere Informationen finden Sie unter [Übersichtsbereich ausblenden][6].

2. Solange die Entwicklertools geöffnet sind, werden die Netzwerkaktivitäten im Netzwerkprotokoll aufgezeichnet. Sehen Sie sich dazu zuerst unten im Netzwerklog die letzte Aktivität an.

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

4. Sehen Sie sich noch einmal den unteren Teil des Netzwerkprotokolls an. Es gibt eine neue Ressource mit dem Namen getstarted.json. Durch Klicken auf die Schaltfläche Daten abrufen wurde diese Datei von der Seite angefordert.

   

   Abbildung 7. Eine neue Ressource im Netzwerkprotokoll

Weitere Informationen

Die Spalten des Netzwerkprotokolls sind konfigurierbar. Nicht benötigte Spalten können ausgeblendet werden. Außerdem sind viele Spalten standardmäßig ausgeblendet, was für Sie nützlich sein könnte.

1. Klicken Sie mit der rechten Maustaste auf die Überschrift der Tabelle „Netzwerkprotokoll“ und wählen Sie Domain aus. Die Domain jeder Ressource wird jetzt angezeigt.

   

   Abbildung 8. Spalte „Domain“ aktivieren

Hinweis: Tipp: Sie können die vollständige URL einer Ressource sehen, indem Sie in der Spalte Name den Mauszeiger auf die entsprechende Zelle bewegen.

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 das Drosseln der Seite erhalten Sie eine bessere Vorstellung davon, wie lange eine Seite auf einem Mobilgerät zum Laden benötigt.

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

   

   Abbildung 9. Drosselung aktivieren

2. Wählen Sie Langsames 3G aus.

   

   Abbildung 10. Langsames 3G auswählen

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

   

   Abbildung 11. Cache leeren und vollständig aktualisieren

   Bei wiederholten Besuchen stellt der Browser normalerweise einige Dateien aus seinem Cache bereit, wodurch der Seitenaufbau beschleunigt wird. Cache leeren und feste Aktualisierung durchführen zwingt den Browser, alle Ressourcen im Netzwerk zu finden. Das ist hilfreich, wenn Sie wissen möchten, wie eine Seite bei einem Erstbesucher dargestellt wird.

   Hinweis: Hinweis: Der Workflow Cache leeren und komplett aktualisieren ist nur verfügbar, wenn die Entwicklertools geöffnet sind.

Screenshots erstellen

In den Screenshots kannst du sehen, wie die Seite im Laufe der Zeit aussah, während sie geladen wurde.

1. Klicken Sie auf Screenshots aufnehmen .

2. Aktualisieren Sie die Seite über den Workflow Cache leeren und komplett aktualisieren noch einmal. Weitere Informationen finden Sie unter Langsamere Verbindung simulieren. Der Bereich „Screenshots“ enthält Miniaturansichten, die zeigen, wie die Seite an verschiedenen Stellen während des Ladevorgangs dargestellt wurde.

   

   Abbildung 12. Screenshots des Seitenaufbaus

3. Klicken Sie auf die erste Miniaturansicht. In den Entwicklertools sehen Sie, welche Netzwerkaktivität zu diesem Zeitpunkt aufgetreten ist.

   

   Abbildung 13. Netzwerkaktivität während des ersten Screenshots

4. Klicken Sie noch einmal auf Screenshots aufnehmen , um den Bereich „Screenshots“ zu schließen.

5. Aktualisieren Sie die Seite.

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 wird angezeigt. Auf diesem Tab können Sie HTTP-Header prüfen.

   

   Abbildung 14. Tab „Headers“

2. Klicken Sie auf den Tab Vorschau. Ein einfaches Rendering des HTML-Codes wird angezeigt.

   

   Abbildung 15. Der 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 geprüft werden.

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

   

   Abbildung 16: Der Tab „Antworten“

   Hinweis: Tipp: Wenn eine Datei komprimiert ist, wird der Inhalt der Datei zur besseren Lesbarkeit neu formatiert, wenn Sie auf dem Tab Antwort unten auf die Schaltfläche Format klicken.

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: Die Schaltfläche „Schließen“

Header und Antworten im Suchnetzwerk

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

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

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

   

   Abbildung 19: Im Suchbereich

2. Geben Sie Cache-Control ein und drücken Sie die Eingabetaste. Im Suchfenster 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 sich anzusehen. 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

DevTools bietet zahlreiche Workflows zum Herausfiltern von Ressourcen, die für die jeweilige Aufgabe nicht relevant sind.

Abbildung 23: Filtersymbolleiste

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

1. Klicken Sie auf Filter , um ihn einzublenden.

Nach String, regulärem Ausdruck oder Property filtern

Das Textfeld Filter unterstützt viele verschiedene Filtertypen.

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

   

   Abbildung 24: Ein Stringfilter

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

   

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

3. Geben Sie -main.css ein. In den Entwicklertools wird main.css herausgefiltert. Entspricht eine andere Datei dem Muster, wird sie ebenfalls herausgefiltert.

   

   Abbildung 26. Ein negativer Filter

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.

   

   Abbildung 27: Ein Attributfilter

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

5. Entfernen Sie den gesamten Text im Textfeld Filter.

Nach Ressourcentyp filtern

So legen Sie den Fokus 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-Taste oder die 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.

Informationen zu anderen Filter-Workflows finden Sie unter Filteranfragen.

Anfragen blockieren

Wie sieht eine Seite aus und wie funktioniert sie, wenn einige ihrer Ressourcen nicht verfügbar sind? Schlägt er vollständig aus oder funktioniert er noch in gewissem Umfang? Blockieren Sie Anfragen, um Folgendes herauszufinden:

1. Drücken Sie Strg + Umschalt + P oder Befehlstaste + Umschalt + P (Mac), um das Befehlstaste + P 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 etwas durcheinander, da ihr 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 ausgeben, um deinen Award zu erhalten.

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