In diesem Codelab wird Schritt für Schritt erklärt, wie Sie den gesamten Netzwerkverkehr für eine relativ komplexe Beispielanwendung interpretieren. Am Ende der Übung verfügen Sie über die Fähigkeiten, herauszufinden, was Ihre eigene Webanwendung geladen wird und wann sie die einzelnen Anfragen sendet.
Netzwerkbereich aufrufen
Rufen Sie das Steuerfeld „Netzwerk“ auf, um den Netzwerkverkehr für die Demoanwendung zu sehen.
Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild
aus.Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Netzwerk.
Aktualisieren Sie die Seite, um den Netzwerkverkehr zu sehen.
Im Steuerfeld „Netzwerk“ werden alle Assets angezeigt, die aufgrund der ersten Navigation geladen wurden:
Interpretieren der Einträge
Jede Zeile mit aufgezeichnetem Netzwerkverkehr stellt ein einzelnes Anfrage- und Antwortpaar dar.
Die erste Zeile vom Typ document ist die ursprüngliche Navigationsanfrage für den HTML-Code der Webanwendung. Dies ist die Quelle für die Vermittlungsabfolge. Alle nachfolgenden Anfragen für zusätzliche Assets (sogenannte Unterressourcen des Hauptdokuments) fließen aus dieser ursprünglichen Quelle.
Die zweite und dritte Zeile, die eine CSS-stylesheet und eine script-Unterressource enthält, die geladen werden, sind abhängige Anfragen, die vom Hauptdokument initiiert wurden.
Wenn Sie sehen, wann diese Anfragen gestellt werden, zeigt das Wasserfalldiagramm, dass sie erst sehr spät im Prozess der Antwort auf die Navigationsanfrage gestartet werden.
Insgesamt sind die Anfragen für das HTML-Dokument, CSS und JavaScript erforderlich, um während der ersten Navigation die ganze Seite anzuzeigen.
Zusätzliche Laufzeitanfragen erstellen
Während der Bereich Netzwerk noch geöffnet ist und aufgezeichnet wird, ist es an der Zeit, etwas für viele Webanwendungen zu simulieren: zusätzliche API-Anfragen, mit denen nach der ersten Navigation weitere Daten zur Seite hinzugefügt werden können.
Lösen Sie diese zusätzlichen Anfragen aus, indem Sie in der App auf Suchen und dann im angezeigten Pop-up-Fenster auf Zulassen klicken. Dadurch kann die Website auf Ihren aktuellen Standort zugreifen:
Sobald der Web-App ein Standort zur Verfügung steht, mit dem Sie arbeiten können, werden durch Klicken auf Find Nearby Wikipedia Entries mehrere zusätzliche Netzwerkanfragen erhalten. Die Ausgabe sollte in etwa so aussehen:
Neue Einträge interpretieren
Wie zuvor stellt jede Zeile mit aufgezeichnetem Netzwerktraffic ein einzelnes Anfrage- und Antwortpaar dar.
Die erste Zeile der neuen Einträge stellt eine Anfrage vom Typ fetch dar. Dies entspricht der Methode, in der die Webanwendung Daten von der Wikipedia API anfordert.
Die folgenden Zeilen enthalten alle Bilder (png oder jpeg), die mit den Wikipedia-Einträgen verknüpft sind. Obwohl es aus dem Screenshot etwas schwer zu erkennen ist, fließen ihre Einträge in der Spalte "Wasserfall" direkt aus der API-Antwort.
Bei allen diesen zusätzlichen Anfragen variiert der Zeitpunkt je nachdem, wie lange die Seite bereits geöffnet ist, bevor Sie auf Find Nearby Wikipedia Posts klicken. Am wichtigsten ist hier, dass das when von der anfänglichen Navigationsanfrage getrennt wird. Sie können dies an der großen Lücke in der Wasserfall-Anzeige erkennen, die einen Zeitraum darstellt, der zwischen dem anfänglichen Laden und dem Zeitpunkt der Wikipedia API-Anfrage liegt.
Anfragen, die nach einer Navigation erst nach einer gewissen Zeit gestellt werden, fallen in die Kategorie „Laufzeitanfragen“, im Gegensatz zu den anfänglichen Anfragen, mit denen die Seite beim ersten Aufrufen angezeigt wurde.
Zusammenfassung
Nachdem Sie die Schritte in diesem Codelab durchlaufen haben, sind Sie mit den Tools vertraut, mit denen Sie analysieren können, was beliebige Webanwendung geladen wird.
Im Bereich „Network“ (Netzwerk) können Sie über die URLs in der Spalte „Name“ und die Daten in der Spalte „Type“ sowie über die Vermittlungsabfolge ermitteln, was geladen wird.
Außerdem haben Sie gesehen, dass Anfragen von einer Webseite (normalerweise) in eine von zwei Kategorien eingeteilt werden können:
- Erste Anfragen an HTML-, JavaScript-, CSS- und möglicherweise andere Assets, die direkt nach dem Aufrufen einer neuen Seite gestellt werden.
- Laufzeitanfragen, die infolge der Nutzerinteraktion mit der Seite gestellt wurden. Dies kann oft mit einer Anfrage an eine API beginnen und dann anhand der abgerufenen API-Daten mehrere Folgeanfragen ausführen.