In diesem Codelab erfahren Sie, wie Sie den gesamten Netzwerkverkehr für eine etwas komplexe Beispielanwendung interpretieren. Am Ende der Übung haben Sie die nötigen Fähigkeiten, um herauszufinden, was Ihre eigene Webanwendung lädt und wann sie jede Anfrage stellt.
Rufen Sie den Bereich „Netzwerk“ auf.
Rufen Sie den Bereich „Netzwerk“ auf, um den Netzwerkverkehr für die Demoanwendung zu sehen.
Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild
.Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Optionstaste + J auf einem Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Netzwerk.
Aktualisieren Sie die Seite, um den Netzwerktraffic zu sehen.
Im Bereich „Netzwerk“ werden alle Assets angezeigt, die aufgrund Ihrer ersten Navigation geladen wurden:
Einträge auswerten
Jede Zeile des aufgezeichneten Netzwerktraffics steht für ein einzelnes Anfrage- und Antwortpaar.
Die erste Zeile mit dem Typ document ist die erste Navigationsanfrage für die HTML-Datei der Webanwendung. Das ist die Quelle für die Abfolge. Alle nachfolgenden Anfragen nach zusätzlichen Assets (als Unterressourcen des Hauptdokuments bezeichnet) gehen von dieser ursprünglichen Quelle aus.
Die zweite und dritte Zeile, in der eine CSS-stylesheet- und eine script-Unterressource geladen wird, sind abhängige Anfragen, die vom Hauptdokument initiiert wurden.
Das Diagramm der Vermittlungsabfolge zeigt, dass diese Anfragen erst sehr spät gestartet werden, wenn die Navigationsanfrage beantwortet wird.
Zusammengenommen sind die Anfragen für das HTML-Dokument, CSS und JavaScript erforderlich, um die vollständige Seite während der ersten Navigation anzuzeigen.
Einige zusätzliche Laufzeitanfragen erstellen
Das Steuerfeld Netzwerk ist noch geöffnet und erfasst Daten. Jetzt ist es an der Zeit, etwas zu simulieren, das für viele Webanwendungen üblich ist: zusätzliche API-Anfragen, mit denen der Seite nach der ersten Navigation weitere Daten hinzugefügt werden.
Sie können diese zusätzlichen Anfragen auslösen, indem Sie in der App auf Finden Sie mich und dann im Pop-up-Fenster auf Zulassen klicken. Dadurch kann die Website auf Ihren aktuellen Standort zugreifen:
Sobald die Webanwendung einen Standort hat, auf den sie sich beziehen kann, führt das Klicken auf Wikipedia-Einträge in der Nähe suchen zu mehreren zusätzlichen Netzwerkanfragen. Die Ansicht sollte in etwa so aussehen:
Neue Einträge auswerten
Wie bereits erwähnt, steht jede Zeile des aufgezeichneten Netzwerktraffics für ein einzelnes Anfrage- und Antwortpaar.
Die erste Zeile der neuen Einträge steht für eine Anfrage vom Typ fetch, was der Art entspricht, wie die Webanwendung Daten von der Wikipedia API anfordert.
Die folgenden Zeilen sind alle Bilder (png oder jpeg), die mit den Wikipedia-Einträgen verknüpft sind. Auf dem Screenshot ist es etwas schwer zu erkennen, aber die Einträge in der Spalte „Abfolge“ stammen direkt aus der API-Antwort.
Bei allen diesen zusätzlichen Anfragen hängt das Wann davon ab, wie lange Sie die Seite geöffnet hatten, bevor Sie auf Wikipedia-Einträge in der Nähe suchen geklickt haben. Das Wichtigste dabei ist, dass when von der ursprünglichen Navigationsanfrage getrennt ist. Das ist an der großen Lücke im Wasserfalldiagramm zu erkennen, die den Zeitraum zwischen dem ersten Laden und der Wikipedia API-Anfrage darstellt.
Anfragen, die nach einer gewissen Zeit nach einer Navigation erfolgen, fallen in die Kategorie „Laufzeitanfragen“. Das gilt nicht für die ersten Anfragen, die zum Anzeigen der Seite verwendet wurden, als Sie sie zum ersten Mal aufgerufen haben.
Zusammenfassung
Nachdem Sie die Schritte in diesem Codelab ausgeführt haben, sind Sie jetzt mit den Tools vertraut, mit denen Sie analysieren können, was eine beliebige Webanwendung lädt.
Im Bereich „Netzwerk“ können Sie anhand der URLs in der Spalte „Name“ und der Daten in der Spalte „Typ“ herausfinden, was geladen wird. Außerdem sehen Sie in der abfolgebasierten Darstellung, wann die Inhalte geladen werden.
Außerdem haben Sie gesehen, dass Anfragen, die von einer Webseite stammen, in der Regel in eine von zwei Kategorien gruppiert werden können:
- Erste Anfragen für HTML, JavaScript, CSS (und möglicherweise andere Assets), die direkt nach dem Aufrufen einer neuen Seite gesendet werden.
- Laufzeitanfragen, die aufgrund der Nutzerinteraktion mit der Seite gestellt werden. Dies kann oft mit einer Anfrage an eine API beginnen und dann in mehrere Folgeanfragen münden, die auf den abgerufenen API-Daten basieren.