W tym ćwiczeniu dowiesz się, jak interpretować cały ruch w sieci w przypadku nieco złożonej przykładowej aplikacji. Po zakończeniu ćwiczenia będziesz mieć umiejętności potrzebne do ustalenia, co wczytuje Twoja aplikacja internetowa i kiedy wysyła każde żądanie.
Otwieranie panelu Sieć
Otwórz panel Sieć, aby zobaczyć ruch w sieci dla aplikacji demonstracyjnej.
- Naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Sieć.
- Odśwież stronę, aby zobaczyć ruch w sieci.
W panelu Sieć widoczne są wszystkie zasoby wczytane w wyniku początkowej nawigacji:
Jak interpretować wpisy
Każdy wiersz zarejestrowanego ruchu w sieci odpowiada pojedynczej parze żądania i odpowiedzi.
Pierwszy wiersz, o typie document, to początkowe żądanie nawigacji dotyczące kodu HTML aplikacji internetowej. Jest to źródło kaskady. Każde z kolejnych żądań dodatkowych zasobów (znanych jako zasoby podrzędne dokumentu głównego) pochodzi z tego pierwotnego źródła.
Drugi i trzeci wiersz, które pokazują ładowanie zasobu podrzędnego CSS stylesheet i script, to żądania zależne, które zostały zainicjowane przez dokument główny.
Jeśli spojrzysz na to, kiedy te żądania są wysyłane, zobaczysz na diagramie kaskadowym, że są one uruchamiane dopiero na bardzo późnym etapie procesu odpowiadania na żądanie nawigacji.
Żądania dotyczące dokumentu HTML, CSS i JavaScriptu są potrzebne do wyświetlenia pełnej strony podczas początkowej nawigacji.
Tworzenie dodatkowych żądań środowiska wykonawczego
Gdy panel Sieć jest nadal otwarty i rejestruje dane, zasymulujmy coś, co jest typowe dla wielu aplikacji internetowych: dodatkowe żądania do interfejsu API służące do dodawania kolejnych danych do strony po zakończeniu początkowej nawigacji.
Aby wywołać te dodatkowe żądania, kliknij w aplikacji Znajdź mnie, a następnie w wyświetlonym wyskakującym okienku kliknij Zezwól. Dzięki temu witryna będzie miała dostęp do Twojej bieżącej lokalizacji:
Gdy aplikacja internetowa ma już lokalizację, kliknięcie Znajdź wpisy w Wikipedii w pobliżu powoduje wysłanie kilku dodatkowych żądań sieciowych. Powinno pojawić się coś takiego:
Interpretowanie nowych wpisów
Tak jak wcześniej, każdy wiersz zarejestrowanego ruchu w sieci reprezentuje pojedynczą parę żądania i odpowiedzi.
Pierwszy wiersz nowych wpisów reprezentuje żądanie typu fetch, które odpowiada sposobowi, w jaki aplikacja internetowa żąda danych z interfejsu API Wikipedii.
Wszystkie poniższe wiersze to obrazy (png lub jpeg) powiązane z wpisami w Wikipedii. Chociaż na zrzucie ekranu jest to słabo widoczne, wpisy w kolumnie Wodospad pochodzą bezpośrednio z odpowiedzi interfejsu API.
W przypadku wszystkich tych dodatkowych żądań czas będzie się różnić w zależności od tego, jak długo strona była otwarta, zanim kliknięto Znajdź wpisy w Wikipedii w pobliżu. Najważniejsze jest to, że moment jest odłączony od początkowego żądania nawigacji. Można to stwierdzić na podstawie dużej luki w widoku kaskadowym, która reprezentuje okres między początkowym wczytywaniem a żądaniem do interfejsu API Wikipedii.
Żądania wysyłane po upływie pewnego czasu od przejścia na stronę należą do kategorii „żądań w czasie działania”, w odróżnieniu od początkowego zestawu żądań używanych do wyświetlenia strony po pierwszym przejściu na nią.
Podsumowanie
Po wykonaniu czynności opisanych w tych ćwiczeniach znasz już narzędzia, których możesz używać do analizowania tego, co wczytuje dowolna aplikacja internetowa.
Panel Sieć pomaga odpowiedzieć na pytanie, co jest wczytywane, za pomocą adresów URL w kolumnie Nazwa i danych w kolumnie Typ, a także kiedy jest wczytywane, za pomocą wyświetlania kaskadowego.
Wiesz też, że żądania wysyłane przez stronę internetową można (zwykle) podzielić na 2 kategorie:
- Początkowe żądania wysyłane zaraz po przejściu na nową stronę, dotyczące kodu HTML, JavaScriptu, CSS (i potencjalnie innych zasobów).
- Żądania środowiska wykonawczego wysyłane w wyniku interakcji użytkownika ze stroną. Często może się to zaczynać od żądania do interfejsu API, a następnie przechodzić do kilku kolejnych żądań na podstawie pobranych danych interfejsu API.