Sprawdzanie aktywności w sieci

Kayce Basques

Ten praktyczny samouczek dotyczący niektórych najczęściej używanych funkcji Narzędzi deweloperskich związanych z sprawdzaniem aktywności w sieci na stronie.

Jeśli wolisz przeglądać funkcje, zobacz Informacje o sieci.

Przeczytaj ten samouczek lub obejrzyj jego wersję wideo:

Kiedy używać panelu Sieć

Ogólnie panel Sieć przydaje się, gdy chcesz mieć pewność, że zasoby są pobierane lub przesyłane zgodnie z oczekiwaniami. Najczęstsze zastosowania panelu Sieć:

• Sprawdzenie, czy zasoby są rzeczywiście przesyłane lub pobierane.
• Badanie właściwości pojedynczego zasobu, np. jego nagłówków HTTP, treści, rozmiaru itd.

Jeśli szukasz sposobów na poprawę szybkości ładowania stron, nie zaczynaj od panelu Sieć. Istnieje wiele rodzajów problemów z wydajnością wczytywania, które nie są związane z aktywnością sieci. Zacznij od panelu Lighthouse, ponieważ zawiera on spersonalizowane sugestie, jak ulepszyć stronę. Przeczytaj artykuł Optymalizowanie szybkości witryny.

Otwórz panel Sieć

Aby w pełni wykorzystać możliwości samouczka, otwórz wersję demonstracyjną i wypróbuj funkcje ze strony demonstracyjnej.

1. Otwórz prezentację dla początkujących.

   

   Rysunek 1. Wersja demonstracyjna

   Możesz przenieść wersję demonstracyjną do osobnego okna.

   

   Rysunek 2. Prezentacja w jednym oknie, a ten samouczek w innym

2. Otwórz Narzędzia deweloperskie, naciskając Control + Shift + J lub Command + Option + J (Mac). Otworzy się panel Konsola.

   

   Rysunek 3. Konsola

   Możesz zadokować Narzędzia deweloperskie u dołu okna.

   

   Rysunek 4. Narzędzia deweloperskie zadokowane na dole okna

3. Kliknij kartę Sieć. Otworzy się panel Sieć.

   

   Rysunek 5. Narzędzia deweloperskie zadokowane na dole okna

Obecnie panel Sieć jest pusty. Dzieje się tak, ponieważ Narzędzia deweloperskie rejestrują aktywność tylko wtedy, gdy są otwarte, i od chwili ich otwarcia nie zarejestrowano żadnej aktywności w sieci.

Zapisuj aktywność sieciową

Aby wyświetlić aktywność sieciową wywoływaną przez stronę:

1. Odśwież stronę. Wszystkie działania sieciowe są rejestrowane w dzienniku sieci w panelu Sieć.

   

   Rysunek 6. Dziennik sieci

   Każdy wiersz dziennika sieci odpowiada zasobowi. Domyślnie zasoby są wymienione chronologicznie. Głównym zasobem jest zwykle główny dokument HTML. Na dole znajduje się zasób, którego dotyczyło ostatnie żądanie.

   Każda kolumna zawiera informacje o zasobie. Rysunek 6 przedstawia domyślne kolumny:

   • Stan. Kod odpowiedzi HTTP.
   • Typ. Typ zasobu.
   • Inicjator. Co spowodowało żądanie zasobu. Po kliknięciu linku w kolumnie „Inicjator” przejdziesz do kodu źródłowego, który wywołał żądanie.
   • Czas. czas realizacji żądania;

   • Wodospad. Graficzne przedstawienie różnych etapów żądania. Najedź kursorem na wodospad, aby zobaczyć podział.

2. Dopóki Narzędzia deweloperskie są otwarte, aktywność sieci będzie rejestrowana w dzienniku sieci. Aby to zademonstrować, najpierw spójrz na dół dziennika sieci i zanotuj ostatnią aktywność.

3. Teraz w prezentacji kliknij przycisk Pobierz dane.

4. Ponownie spójrz na dół dziennika sieci. Pojawił się nowy zasób o nazwie getstarted.json. Kliknięcie przycisku Pobierz dane spowodowało wysłanie przez stronę żądania dotyczącego tego pliku.

   

   Rysunek 7. Nowy zasób w dzienniku sieci

Pokaż więcej informacji

Kolumny dziennika sieci można konfigurować. Możesz ukryć kolumny, których nie używasz. Poza tym wiele kolumn jest domyślnie ukrytych, co może okazać się przydatne.

1. Kliknij prawym przyciskiem myszy nagłówek tabeli dziennika sieciowego i wybierz Domain (Domena). Domena każdego zasobu zostanie wyświetlona.

   

   Rysunek 8. Włączanie kolumny Domena

Symulowanie wolniejszego połączenia sieciowego

Połączenie sieciowe komputera, którego używasz do tworzenia witryn, jest prawdopodobnie szybsze niż połączenie sieciowe urządzeń mobilnych użytkowników. Ograniczając stronę, możesz uzyskać lepszy obraz czasu wczytywania strony na urządzeniu mobilnym.

1. Kliknij menu Ograniczanie, które jest domyślnie ustawione na Online.

   

   Rysunek 9. Włączanie ograniczania

2. Wybierz Wolne 3G.

   

   Rysunek 10. Wybieram powolną sieć 3G

3. Naciśnij i przytrzymaj Załaduj ponownie , a następnie wybierz Opróżnij pamięć podręczną i wymuś ponowne załadowanie.

   

   Rysunek 11. Opróżnij pamięć podręczną i załaduj ponownie

   Przy kolejnych wizytach przeglądarka zwykle wyświetla niektóre pliki ze swojej pamięci podręcznej, co przyspiesza wczytywanie strony. Opróżnij pamięć podręczną i wymuś ponowne załadowanie wymusza na przeglądarce przejście do sieci w przypadku wszystkich zasobów. Jest to przydatne, gdy chcesz się dowiedzieć, jak odbiera się strona po raz pierwszy.

Robienie zrzutów ekranu

Zrzuty ekranu pozwalają zobaczyć, jak strona wyglądała w czasie wczytywania.

1. Kliknij Capture Screenshots (Zapisz zrzuty ekranu).

2. Załaduj ponownie stronę ponownie, korzystając z procesu Opróżnij pamięć podręczną i wymuś ponowne załadowanie. Jeśli chcesz przypomnieć sobie, jak to zrobić, przeczytaj sekcję Symulacja wolniejszego połączenia. Okienko Zrzuty ekranu zawiera miniatury przedstawiające wygląd strony w różnych punktach procesu wczytywania.

   

   Rysunek 12. zrzuty ekranu przedstawiające wczytanie strony;

3. Kliknij pierwszą miniaturę. Narzędzia deweloperskie pokazują, jaka aktywność w sieci miała miejsce w danym momencie.

   

   Rysunek 13. aktywność w sieci, która miała miejsce podczas pierwszego zrzutu ekranu;

4. Ponownie kliknij Zrób zrzuty ekranu , aby zamknąć okienko Zrzuty ekranu.

5. Załaduj stronę ponownie.

Sprawdzanie szczegółów zasobu

Kliknij zasób, aby dowiedzieć się więcej na jego temat. Wypróbuj tę funkcję już teraz:

1. Kliknij getstarted.html. Widoczna jest karta Nagłówki. Użyj tej karty, by sprawdzić nagłówki HTTP.

   

   Rysunek 14. Karta Nagłówki

2. Kliknij kartę Podgląd. Widoczny jest podstawowy sposób renderowania kodu HTML.

   

   Rysunek 15. Karta Podgląd

   Ta karta jest przydatna, gdy interfejs API zwraca kod błędu w kodzie HTML i jest łatwiejszy do odczytania niż w przypadku kodu źródłowego HTML lub podczas sprawdzania obrazów.

3. Kliknij kartę Odpowiedź. Wyświetlany jest kod źródłowy HTML.

   

   Rysunek 16. Karta Odpowiedź

4. Kliknij kartę Czas. Wyświetlane jest zestawienie aktywności sieciowej tego zasobu.

   

   Rysunek 17. Karta Czas

5. Kliknij Zamknij , aby ponownie wyświetlić dziennik sieci.

   

   Rysunek 18. Przycisk Zamknij

Wyszukaj nagłówki i odpowiedzi sieci

Okienko Szukaj umożliwia wyszukiwanie w nagłówkach HTTP i odpowiedziach wszystkich zasobów określonego ciągu znaków lub wyrażenia regularnego.

Załóżmy na przykład, że chcesz sprawdzić, czy Twoje zasoby korzystają z uzasadnionych zasad pamięci podręcznej.

1. Kliknij Szukaj . Po lewej stronie dziennika sieci otworzy się okienko Wyszukiwanie.

   

   Rysunek 19. Panel wyszukiwania

2. Wpisz Cache-Control i naciśnij Enter. W panelu wyszukiwania są wymienione wszystkie wystąpienia elementu Cache-Control znalezione w nagłówkach lub treściach zasobów.

   

   Rysunek 20. Wyniki wyszukiwania: Cache-Control

3. Kliknij wynik, aby go wyświetlić. Jeśli zapytanie zostało znalezione w nagłówku, otworzy się karta Nagłówki. Jeśli zapytanie zostało znalezione w treści, otworzy się karta Odpowiedź.

   

   Rysunek 21. Wynik wyszukiwania wyróżniony na karcie Nagłówki

4. Zamknij okienko wyszukiwania i kartę Czas.

   

   Rysunek 22. Przyciski Zamknij

Filtruj zasoby

W Narzędziach deweloperskich dostępnych jest wiele przepływów pracy służących do odfiltrowywania zasobów, które nie są związane z bieżącym zadaniem.

Rysunek 23. Pasek narzędzi filtrów

Pasek narzędzi Filtry powinien być domyślnie włączony. Jeśli nie:

1. Kliknij Filtruj , aby je wyświetlić.

Filtruj według ciągu znaków, wyrażenia regularnego lub właściwości

Pole tekstowe Filtr obsługuje wiele różnych typów filtrowania.

1. Wpisz png w polu tekstowym Filtr. Wyświetlane są tylko pliki zawierające tekst png. W tym przypadku jedynymi plikami pasującymi do filtra są pliki PNG.

   

   Rysunek 24. Filtr w postaci ciągu znaków

2. Wpisz /.*\.[cj]s+$/. Narzędzia deweloperskie odfiltrowują wszystkie zasoby, których nazwa nie kończy się znakiem j ani c, po którym następuje co najmniej 1 znak s.

   

   Rysunek 25. Filtr wyrażeń regularnych

3. Wpisz -main.css. Narzędzia deweloperskie odfiltrowują main.css. Jeśli dowolny inny plik pasuje do wzorca, również zostanie odfiltrowany.

   

   Rysunek 26. Filtr negatywny

4. Wpisz domain:raw.githubusercontent.com w polu tekstowym Filtr. Odfiltrowują one wszystkie zasoby z adresem URL, który nie pasuje do tej domeny.

   

   Rysunek 27. Filtr właściwości

   Pełną listę właściwości z możliwością filtrowania znajdziesz w artykule Filtrowanie żądań według właściwości.

5. Wyczyść pole Filtr zawierające wszystkie teksty.

Filtruj według typu zasobu

Aby wybrać plik określonego typu, na przykład arkusz stylów:

1. Kliknij CSS. Pozostałe typy plików są odfiltrowywane.

   

   Rysunek 28. Wyświetlam tylko pliki CSS

2. Aby zobaczyć też skrypty, przytrzymaj Control lub Command (Mac) i kliknij JS.

   

   Rysunek 29. Wyświetlam tylko pliki CSS i JS

3. Kliknij Wszystkie, aby usunąć filtry i ponownie wyświetlić wszystkie zasoby.

Informacje o innych przepływach pracy filtrowania znajdziesz w artykule Filtrowanie żądań.

Blokuj żądania

Jak wygląda i działa strona, gdy niektóre jej zasoby są niedostępne? czy urządzenie działa zupełnie, czy też nadal działa? Blokuj żądania, aby dowiedzieć się:

1. Naciśnij Control+Shift+P lub Command+Shift+P (Mac), by otworzyć menu poleceń.

   

   Rysunek 30. Menu polecenia

2. Wpisz block, wybierz Pokaż blokowanie żądań i naciśnij Enter.

   

   Rysunek 31. Pokaż blokowanie żądań

3. Kliknij Dodaj wzór .

4. Wpisz main.css.

   

   Rysunek 32. Blokuję użytkownika main.css

5. Kliknij Dodaj.

6. Odśwież stronę. Zgodnie z oczekiwaniami styl strony jest trochę niepoprawny, ponieważ jej główny arkusz stylów został zablokowany. Zwróć uwagę na wiersz main.css w dzienniku sieci. Czerwony tekst oznacza, że zasób został zablokowany.

   

   Rysunek 33. Numer main.css został zablokowany

7. Odznacz pole wyboru Włącz blokowanie żądań.

Dalsze kroki

Gratulujemy! Udało Ci się ukończyć samouczek. Kliknij Dispense Award, aby odebrać nagrodę.

Zapoznaj się z informacjami o sieci, aby poznać więcej funkcji Narzędzi deweloperskich związanych ze sprawdzaniem aktywności sieci.