In diesem Codelab wird der gesamte Netzwerkverkehr für eine etwas komplexere Beispielanwendung interpretiert. Am Ende der Übung haben Sie die nötigen Fähigkeiten, um herauszufinden, was Ihre eigene Webanwendung lädt und wann sie die einzelnen Anfragen stellt.
Rufen Sie den Netzwerkbereich auf.
Rufen Sie den Netzwerkbereich auf, um den Netzwerkverkehr für die Demoanwendung zu sehen.
- 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 Netzwerkverkehr zu sehen.
Im Netzwerkbereich werden alle Assets angezeigt, die aufgrund der ersten Navigation geladen wurden:
Einträge interpretieren
Jede Zeile des aufgezeichneten Netzwerkverkehrs steht für ein einzelnes Anfrage- und Antwortpaar.
Die erste Zeile mit dem Typ document ist die erste Navigationsanfrage für den HTML-Code der Web-App. Dies ist die Quelle für die Vermittlungsabfolge. Jede der nachfolgenden Anfragen für zusätzliche Assets (sogenannte Unterressourcen des Hauptdokuments) stammt aus dieser ursprünglichen Quelle.
Die zweite und dritte Zeile, in denen eine CSS-stylesheet und eine script-Unterressource geladen werden, sind abhängige Anfragen, die vom Hauptdokument initiiert wurden.
Wenn Sie sich ansehen, wann diese Anfragen gestellt werden, sehen Sie im Wasserfalldiagramm, dass sie erst sehr spät im Prozess der Antwort auf die Navigationsanfrage gestartet werden.
Zusammen sind die Anfragen für das HTML-Dokument, CSS und JavaScript erforderlich, um die vollständige Seite beim ersten Aufrufen anzuzeigen.
Zusätzliche Laufzeitanfragen erstellen
Der Netzwerkbereich ist noch geöffnet und zeichnet auf. Jetzt simulieren wir etwas, das bei vielen Web-Apps üblich ist: zusätzliche API-Anfragen, mit denen nach Abschluss der ersten Navigation weitere Daten zur Seite hinzugefügt werden.
Diese zusätzlichen Anfragen werden ausgelöst, wenn du in der App auf Find Me (Mich finden) und dann im angezeigten Pop-up auf Allow (Zulassen) klickst. So erlauben Sie der Website, auf Ihren aktuellen Standort zuzugreifen:
Sobald die Webanwendung einen Standort hat, mit dem sie arbeiten kann, werden durch Klicken auf Wikipedia-Einträge in der Nähe finden mehrere zusätzliche Netzwerkanfragen ausgelöst. Auf dem Bildschirm sollte Folgendes zu sehen sein:
Neue Einträge interpretieren
Wie zuvor steht jede Zeile des aufgezeichneten Netzwerkverkehrs für ein einzelnes Anfrage- und Antwortpaar.
Die erste Zeile der neuen Einträge stellt eine Anfrage mit dem Typ fetch dar, was der Art und Weise 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. Auch wenn es auf dem Screenshot etwas schwer zu erkennen ist, stammen die Einträge in der Spalte „Wasserfalldiagramm“ direkt aus der API-Antwort.
Bei all diesen zusätzlichen Anfragen variiert der Zeitpunkt, je nachdem, wie lange die Seite geöffnet war, bevor Sie auf Wikipedia-Einträge in der Nähe finden geklickt haben. Am wichtigsten ist hier, dass der Zeitpunkt von der ursprünglichen Navigationsanfrage getrennt ist. Das erkennen Sie an der großen Lücke in der Wasserfallanzeige, die den Zeitraum zwischen dem ersten Laden und der Wikipedia-API-Anfrage darstellt.
Anfragen, die nach einer gewissen Zeit nach der Navigation gestellt werden, fallen in die Kategorie „Laufzeitanfragen“, im Gegensatz zu den ersten Anfragen, die zum Anzeigen der Seite verwendet werden, wenn Sie sie zum ersten Mal aufrufen.
Zusammenfassung
Nachdem Sie die Schritte in diesem Codelab durchgegangen sind, kennen Sie jetzt die Tools, mit denen Sie analysieren können, was jede Webanwendung lädt.
Im Netzwerkbereich finden Sie Antworten auf die Frage, was geladen wird. Dazu dienen die URLs in der Spalte „Name“ und die Daten in der Spalte „Typ“. Außerdem sehen Sie in der Wasserfalldiagramm-Anzeige, wann die Daten geladen werden.
Außerdem haben Sie gesehen, dass Anfragen, die von einer Webseite gestellt werden, (normalerweise) in eine von zwei Kategorien eingeteilt werden können:
- Erste Anfragen, die direkt nach dem Aufrufen einer neuen Seite für HTML, JavaScript, CSS (und möglicherweise andere Assets) gestellt werden.
- Laufzeitanfragen, die aufgrund der Interaktion des Nutzers mit der Seite gestellt werden. Dies kann oft mit einer Anfrage an eine API beginnen und dann in mehrere Folgeanfragen auf Grundlage der abgerufenen API-Daten übergehen.