To ćwiczenie w Codelabs przeprowadzi Cię przez proces interpretacji całego ruchu sieciowego w przypadku dość złożonej przykładowej aplikacji. Po zakończeniu ćwiczenia będziesz mieć umiejętności potrzebne do określenia, co wczytuje Twoja aplikacja internetowa i kiedy wysyła każde żądanie.
Otwórz panel Sieć.
Aby zobaczyć ruch w sieci w przypadku aplikacji demonstracyjnej, przejdź do panelu Sieć.
Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran
.Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
Kliknij kartę Sieć.
Aby zobaczyć ruch w sieci, załaduj ponownie stronę.
Panel Sieć zawiera wszystkie komponenty załadowane z powodu Twojej początkowej nawigacji:
Interpretowanie wpisów
Każdy wiersz zarejestrowanego ruchu w sieci odpowiada jednej parze żądanie–odpowiedź.
Pierwszy wiersz o typie document to początkowe żądanie nawigacji dotyczące kodu HTML aplikacji internetowej. Jest to źródło kaskady. Każde kolejne żądanie dotyczące dodatkowych komponentów (zwanych podzasobami głównego dokumentu) pochodzi z tego pierwotnego źródła.
Drugi i trzeci wiersz, pokazujący wczytywanie zasobu pomocniczego CSS stylesheet i script, to żądania zależne, które zostały zainicjowane przez dokument główny.
Jeśli przyjrzymy się czasom, w których wysyłane są te żądania, widać na diagramie kaskadowym, że nie są one uruchamiane aż do późnego etapu procesu odpowiadania na żądanie dotyczące nawigacji.
W zbiorze żądania dotyczące dokumentu HTML, CSS i JavaScript są potrzebne do wyświetlenia pełnej strony podczas początkowej nawigacji.
Utwórz dodatkowe żądania w czasie wykonywania
Panel Sieć jest nadal otwarty i rejestruje dane. Czas na symulację czegoś, co jest typowe dla wielu aplikacji internetowych: dodatkowych żądań interfejsu API służących do dodawania na stronie kolejnych danych po zakończeniu początkowej nawigacji.
Aby wywołać te dodatkowe żądania, kliknij Znajdź mnie w aplikacji, a potem w wyskakującym okienku kliknij Zezwól. Umożliwi to stronie dostęp do Twojej bieżącej lokalizacji:
Gdy aplikacja internetowa ma już lokalizację, kliknięcie Znajdź w pobliżu wpisy na Wikipedii powoduje wysłanie kilku dodatkowych żądań sieciowych. Powinien pojawić się ekran podobny do tego:
Interpretowanie nowych wpisów
Tak jak wcześniej, każdy wiersz zarejestrowanego ruchu w sieci odpowiada parze żądanie–odpowiedź.
Pierwsza nowa pozycja w kolumnie „Type” (Typ) reprezentuje żądanie o typie fetch, które odpowiada sposobowi, w jaki aplikacja internetowa prosi o dane z interfejsu Wikipedia API.
Wszystkie podane niżej wiersze to obrazy (png lub jpeg) powiązane z artykułami w Wikipedii. Chociaż na zrzucie ekranu trudno to zauważyć, wpisy w kolumnie Kaskada pochodzą bezpośrednio z odpowiedzi interfejsu API.
W przypadku wszystkich tych dodatkowych żądań kiedy będzie się to różnić w zależności od tego, jak długo strona była otwarta przed kliknięciem Znajdź artykuły z Wikipedii w pobliżu. Najważniejsze jest to, że when jest odłączony od początkowego żądania nawigacji. Możesz to stwierdzić na podstawie dużej przerwy w wyświetlaniu kaskady, która reprezentuje okres czasu między początkowym wczytaniem a wysłaniem żądania do interfejsu API Wikipedii.
Żądania wysyłane po pewnym czasie od nawigacji należą do kategorii „żądania w czasie wykonywania”, w przeciwieństwie do początkowego zestawu żądań służących do wyświetlenia strony, gdy użytkownik ją po raz pierwszy otworzył.
Podsumowanie
Po wykonaniu czynności opisanych w tym ćwiczeniu znasz narzędzia, których możesz używać do analizowania tego, co wczytuje dowolna aplikacja internetowa.
Panel Sieć pozwala określić, co jest wczytywane, na podstawie adresów URL w kolumnie Nazwa i danych w kolumnie Typ, a także kiedy, dzięki wyświetleniu ścieżki.
Wiadomo też, że żądania wysyłane przez stronę internetową można (zwykle) podzielić na 1 z 2 kategorii:
- Początkowe żądania wysyłane zaraz po przejściu na nową stronę dotyczące kodu HTML, JavaScript, CSS (i potencjalnie innych zasobów).
- Żądania w czasie wykonywania kodu, które są wysyłane w odpowiedzi na interakcje użytkownika ze stroną. Często zaczyna się od żądania do interfejsu API, a potem przechodzi w kilka dalszych żądań na podstawie odebranych danych z interfejsu API.