Netzwerkbereich der Entwicklertools erkunden

Jeff Posnick

Öffne diesen Glitch in einem zweiten Tab, um dem Codelab zu folgen.

Hinweis : In diesem Codelab werden die Chrome-Entwicklertools verwendet. Laden Sie Chrome herunter, falls Sie dies noch nicht getan haben.

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.

Hinweis : Bei den Screenshots und Anleitungen in diesem Codelab wird davon ausgegangen, dass Sie Chrome verwenden. Jeder Browser hat seine eigenen Entwicklertools, die möglicherweise nicht mit dem übereinstimmen, was Sie in diesem Codelab sehen.

Zum Steuerfeld „Netzwerk“ gehen

Gehen Sie zum Bereich „Netzwerk“, um den Netzwerkverkehr für die Demo zu sehen. .

1. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild

2. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.

3. Klicken Sie auf den Tab Netzwerk.

4. Aktualisieren Sie die Seite, um den Netzwerkverkehr zu sehen.

Im Steuerfeld „Netzwerk“ werden alle Assets angezeigt, die aufgrund der Navigation:

Hinweis : Die tatsächlichen Spalten im Bereich „Netzwerk“ können abweichen. Der Screenshot zeigt eine vereinfachte Ansicht, in der alle Spalten außer den Spalten Name, Typ und Wasserfall ausgeblendet sind.

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:

Hinweis : Sie können auch die Berechtigung zur Standortbestimmung verweigern. In diesem Fall greift die Web-App auf einen Standardstandort zurück.

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:

1. Erste Anfragen, die direkt nach dem Aufrufen einer neuen Seite gestellt wurden, HTML, JavaScript, CSS und möglicherweise andere Assets
2. 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.