In diesem Codelab erfahren Sie, wie Sie für eine etwas komplexe Beispielanwendung. Am Ende der Übung können Sie herausfinden, was Ihre eigene Webanwendung ist. geladen wird und wann die einzelnen Anfragen gestellt werden.
Zum Steuerfeld „Netzwerk“ gehen
Gehen Sie zum Bereich „Netzwerk“, um den Netzwerkverkehr für die Demo zu sehen. .
Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild
Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + 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 Steuerfeld „Netzwerk“ werden alle Assets angezeigt, die aufgrund der Navigation:
Einträge interpretieren
Jede Zeile des aufgezeichneten Netzwerktraffics stellt eine einzelne Anfrage und Antwort dar. Paar zusammen.
Die erste Zeile vom Typ document ist die erste Navigationsanfrage für die
im HTML-Code der Webanwendung. Dies ist die Quelle für die Vermittlungsabfolge: jede der nachfolgenden
Ablauf von Anfragen für zusätzliche Assets (sogenannte Unterressourcen des Hauptdokuments)
aus dieser Originalquelle.
In der zweiten und dritten Zeile werden eine CSS-stylesheet und eine Unterressource vom Typ script angezeigt.
geladen werden, abhängige Anfragen, die vom Hauptdokument initiiert wurden.
Das Wasserfalldiagramm zeigt, wann diese Anfragen gesendet werden. erst sehr spät im Prozess der Reaktion auf die Navigationsanfrage.
Zusammengenommen sind die Anforderungen für das HTML-Dokument, JavaScript wird benötigt, um während der für die erste Navigation.
Zusätzliche Laufzeitanfragen erstellen
Während der Bereich Netzwerk noch geöffnet ist und die Aufzeichnung läuft, ist es an der Zeit, etwas zu simulieren. bei vielen Web-Apps üblich: zusätzliche API-Anfragen werden verwendet, um nach Abschluss der anfänglichen Navigation auf der Seite angezeigt werden.
Lösen Sie diese zusätzlichen Anfragen aus, indem Sie in der App auf Wollen mich klicken und dann Zulassen im angezeigten Pop-up-Fenster. Dadurch kann die Website auf deinen aktuellen Standort zugreifen:
Sobald die Web-App über einen geeigneten Speicherort verfügt, klicken Sie auf In der Nähe suchen Wikipedia-Einträge führen zu mehreren zusätzlichen Netzwerkanfragen. Ich sollte in etwa so aussehen:
Neue Einträge interpretieren
Wie zuvor stellt jede Zeile des aufgezeichneten Netzwerktraffics eine einzelne Anfrage dar. und Antwortpaar.
Die erste Zeile der neuen Einträge stellt eine Anfrage vom Typ fetch dar.
Dies entspricht dem
wie die Webanwendung Daten anfordert
aus dem Wikipedia-API.
Die folgenden Zeilen enthalten alle Bilder (png oder jpeg), die mit
Wikipedia-Einträge Obwohl es auf dem Screenshot etwas schwer zu erkennen ist,
Einträge in der Spalte "Wasserfall" werden direkt aus der API-Antwort übernommen.
Bei all diesen zusätzlichen Anfragen variiert das Wann wie lange Sie die Seite geöffnet hatten, bevor Sie auf Wikipedia-Artikel in der Nähe suchen Einträge: Das Wichtigste dabei ist, dass das when-Element vom ersten Navigationsanfrage an. Sie können dies an der großen Lücke erkennen, die Wasserfall-Anzeige, die einen Zeitraum darstellt, der zwischen den das anfängliche Laden und der Zeitpunkt der Wikipedia API-Anfrage.
Anfragen, die nach einer Zeitverzögerung nach einer Navigation gestellt werden, fallen in die Kategorie. „Laufzeitanfragen“, im Gegensatz zu den ersten Anfragen, die für die Seite angezeigt, als Sie sie zum ersten Mal aufgerufen haben.
Zusammenfassung
Nachdem Sie die Schritte in diesem Codelab durchgegangen sind, kennen Sie jetzt die Tools, mit denen Sie analysieren können, was irgendeine Webanwendung lädt.
Im Bereich „Network“ (Netzwerk) erfahren Sie, was geladen wird. die URLs in der Spalte „Name“ und die Daten in der Spalte „Typ“ zusammen mit Wann über die Wasserfallanzeige geladen werden.
Außerdem haben Sie gesehen, dass Anfragen von Webseiten (normalerweise) in einer von zwei Kategorien:
- Erste Anfragen, die direkt nach dem Aufrufen einer neuen Seite gestellt wurden, HTML, JavaScript, CSS und möglicherweise andere Assets
- Laufzeitanfragen, die als Ergebnis der Nutzerinteraktion mit der Seite gestellt wurden. Dieses kann oft mit einer Anfrage an eine API beginnen und dann in mehreren Folgeanfragen basierend auf den abgerufenen API-Daten.