Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak interpretować całą sieć dla nieco złożonej przykładowej aplikacji. Na koniec ćwiczenia nabędziesz umiejętności potrzebne do określenia, czym jest Twoja aplikacja internetowa i kiedywysyła każde żądanie.
Przejdź do panelu Sieć
Przejdź do panelu Sieć, aby wyświetlić ruch w sieci na potrzeby wersji demonstracyjnej aplikacji.
Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran
Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
Kliknij kartę Sieć.
Aby zobaczyć ruch w sieci, odśwież stronę.
Panel Sieć pokazuje wszystkie zasoby wczytane ze względu na nawigacja:
Jak interpretować wpisy
Każdy wiersz zarejestrowanego ruchu w sieci odpowiada jednemu żądaniu i odpowiedzi parować.
Pierwszy wiersz, typ document, to wstępne żądanie nawigacji dla
w kodzie HTML aplikacji internetowej. To jest źródło kaskady; każdego z kolejnych
przepływ żądań dodatkowych zasobów (nazywanych zasobami podrzędnymi w głównym dokumencie)
pochodzące z tego oryginalnego źródła.
Drugi i trzeci wiersz z zasobem CSS stylesheet i zasobem podrzędnym script
są żądaniami zależnymi zainicjowanymi przez dokument główny.
Diagram kaskady pokazuje, kiedy te żądania są wysyłane. są podejmowane dopiero bardzo późno, prośba o nawigację.
Podsumowane: żądania dokumentów HTML, arkuszy CSS Do wyświetlenia całej strony w ciągu początkowej nawigacji.
Utwórz dodatkowe żądania środowiska wykonawczego
Gdy panel Sieć jest nadal otwarty i zarejestrowany, czas przeprowadzić symulację. często spotykany w wielu aplikacjach internetowych: dodatkowe żądania do interfejsu API używane do dodawania stronie po zakończeniu początkowej nawigacji.
Aby wywołać te dodatkowe żądania, kliknij Znajdź mnie w aplikacji, a następnie: Zezwól w wyskakującym okienku. Dzięki temu witryna będzie miała dostęp do Twojej bieżącej lokalizacji:
Gdy aplikacja internetowa ma już wybraną lokalizację, kliknij Znajdź w pobliżu. Wpisy w Wikipedii generują kilka dodatkowych żądań sieciowych. Ty powinno wyglądać mniej więcej tak:
Zinterpretuj nowe wpisy
Tak jak dotychczas, każdy wiersz zarejestrowanego ruchu w sieci odpowiada jednemu żądaniu i odpowiedzi.
Pierwszy wiersz nowych wpisów reprezentuje żądanie o typie fetch,
która odpowiada
sposób, w jaki aplikacja internetowa wysyła żądania danych
z interfejsu API Wikipedii.
Wszystkie kolejne wiersze to obrazy (png lub jpeg) powiązane z
Wpisy w Wikipedii. Chociaż na zrzucie ekranu jest to dość słabo widoczne,
wpisy w kolumnie kaskady są bezpośrednio kierowane z odpowiedzi interfejsu API.
W przypadku wszystkich tych dodatkowych żądań kiedy będzie się różnić w zależności od tego, Od czasu, gdy strona była otwarta, zanim klikniesz opcję Znajdź w pobliżu Wikipedię Wpisy. Najważniejsze jest, aby określić, kiedy następuje odłączenie od początkowym żądaniu nawigacji. Można to stwierdzić z dużej luki, która istnieje widok kaskadowy, który przedstawia okres, który upłynął początkowe wczytanie oraz wysłanie żądania do interfejsu API Wikipedii.
Żądania wysłane po przerwie czasowej po przejściu do nawigacji zaliczają się do tej kategorii „żądań środowiska wykonawczego”, w porównaniu z początkowym zestawem żądań używanych do wyświetlania stronie podczas pierwszego otwarcia tej strony.
Podsumowywanie rzeczy
Po wykonaniu wszystkich czynności z tego ćwiczenia z programowania wiesz już, służące do analizowania zawartości wczytywanej dowolnej aplikacji internetowej.
Panel Sieć ułatwia znalezienie odpowiedzi na pytanie, co jest wczytywane. adresy URL w kolumnie Nazwa i dane w kolumnie Typ oraz parametr kiedy jego wczytywanie przez widok kaskadowy.
Zauważyliśmy również, że żądania wysyłane przez stronę internetową można (zwykle) grupować w jedną z dwóch kategorii:
- Wstępne żądania wysyłane zaraz po przejściu na nową stronę, dotyczące HTML, JavaScript, CSS (i ewentualnie inne zasoby).
- Żądania środowiska wykonawczego zgłoszone w wyniku interakcji użytkownika ze stroną. Ten często zaczyna się od żądania do interfejsu API, a następnie przechodzi dalszych żądań na podstawie pobranych danych interfejsu API.