Dzięki nim dowiesz się, jak interpretować cały ruch sieciowy w nieco skomplikowanej przykładowej aplikacji. Na zakończenie tego ćwiczenia dowiesz się, co wczytuje Twoja aplikacja internetowa i kiedy wysyła żądania.
Przejdź do panelu Network (Sieć)
Przejdź do panelu Network (Sieć), aby wyświetlić ruch w sieci związany z aplikacją demonstracyjną.
Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem 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, załaduj ponownie stronę.
Panel Sieć pokazuje wszystkie zasoby wczytane ze względu na początkową nawigację:
Jak interpretować wpisy
Każdy wiersz zarejestrowanego ruchu w sieci odpowiada pojedynczej pary żądania i odpowiedzi.
Pierwszy wiersz (typ document) to początkowe żądanie nawigacji po kodzie HTML aplikacji internetowej. Jest to źródło kaskady, a każde kolejne żądania dodatkowych zasobów (nazywanych zasobami podrzędnymi dokumentu głównego) spływają z tego pierwotnego źródła.
Drugi i trzeci wiersz, w którym są wczytywane zasoby CSS stylesheet i zasoby podrzędne script, są żądaniami zależnymi zainicjowanymi przez dokument główny.
Diagram kaskadowy pokazuje, kiedy żądania są wysyłane, i pokazuje, że żądania te rozpoczynają się dopiero bardzo późno w procesie odpowiadania na żądania nawigacyjne.
Łączne żądania dokumentu HTML, CSS i JavaScriptu są niezbędne do wyświetlenia całej strony podczas początkowej nawigacji.
Utwórz dodatkowe żądania środowiska wykonawczego
Gdy panel Sieć jest nadal otwarty i rejestruje dane, nadszedł czas, aby przeprowadzić symulację typowej dla wielu aplikacji internetowych: dodatkowych żądań do interfejsu API używanych w celu dodania większej ilości danych do strony po zakończeniu wstępnej nawigacji.
Aby wywołać te dodatkowe prośby, w aplikacji kliknij Znajdź mnie, a potem w wyświetlonym wyskakującym okienku kliknij Zezwól. Dzięki temu strona będzie miała dostęp do Twojej bieżącej lokalizacji:
Gdy aplikacja internetowa ma już lokalizację, z którą będzie pracować, kliknięcie Znajdź wpisy w Wikipedii w pobliżu spowoduje wyświetlenie kilku dodatkowych żądań sieciowych. Powinno pojawić się coś takiego:
Interpretowanie nowych wpisów
Tak jak poprzednio, każdy wiersz zarejestrowanego ruchu w sieci odpowiada pojedynczej pary żądania i odpowiedzi.
Pierwszy wiersz nowych wpisów przedstawia żądanie o typie fetch, który odpowiada sposobowi, w jaki aplikacja internetowa żąda danych z interfejsu Wikipedia API.
Poniższe wiersze to obrazy (png lub jpeg) powiązane z wpisami w Wikipedii. Choć na zrzucie ekranu jest to trochę trudne do zauważenia na zrzucie ekranu, ich wpisy w kolumnie Kaskada pochodzą bezpośrednio z odpowiedzi interfejsu API.
W przypadku wszystkich tych dodatkowych żądań czas będzie się zmieniał w zależności od tego, jak długo strona była otwarta przed kliknięciem przycisku Znajdź wpisy w Wikipedii w pobliżu. Najważniejsze jest to, kiedy jest rozłączone z początkowym żądaniem nawigacji. Można to stwierdzić na podstawie dużej luki w wyświetlaczu kaskadowym, która reprezentuje okres, który upłynął między początkowym wczytywaniem a możliwością wysłania żądania do Wikipedii do interfejsu API.
Żądania wykonane po przerwie w korzystaniu z nawigacji należą do kategorii „żądania środowiska wykonawczego”, a nie do początkowego zbioru żądań używanego do wyświetlenia strony przy pierwszym otwarciu jej.
Podsumowanie
Po ukończeniu tych ćwiczeń w Codelabs znasz już narzędzia, których możesz używać do analizowania wczytywania dowolnej aplikacji internetowej.
Dzięki panelowi Sieć możesz uzyskać odpowiedź na pytanie, co jest wczytywane na podstawie adresów URL w kolumnie Nazwa i danych w kolumnie Typ, a także sprawdzić, kiedy wczytuje się dane.
Zauważasz też, że żądania wysyłane przez stronę internetową można (zwykle) grupować w jednej z 2 kategorii:
- Wstępne żądania dotyczące zasobów HTML, JavaScript, CSS (i potencjalnie innych) wysyłane zaraz po wejściu na nową stronę.
- Żądania środowiska wykonawczego wysyłane w wyniku interakcji użytkownika ze stroną. Często zaczyna się to od żądania wysyłanego do interfejsu API, a następnie przechodzi do kolejnych żądań na podstawie pobranych danych interfejsu API.