Sprawdzanie aktywności w sieci

Kayce Basques

To praktyczny samouczek dotyczący najczęściej używanych funkcji Narzędzi deweloperskich związanych ze sprawdzaniem aktywności sieciowej strony.

Jeśli chcesz przeglądać funkcje, zajrzyj do dokumentacji sieci.

Czytaj dalej lub obejrzyj film z tego samouczka:

Kiedy używać panelu Sieć

Ogólnie, gdy chcesz się upewnić, że zasoby są pobierane lub przesyłane zgodnie z oczekiwaniami, użyj panelu Sieć. Najczęstsze zastosowania panelu Sieć to:

• Upewnij się, że zasoby są rzeczywiście przesyłane lub pobierane.
• sprawdzanie właściwości poszczególnych zasobów, takich jak nagłówki HTTP, zawartość, rozmiar itp.;

Jeśli szukasz sposobów na poprawę szybkości wczytywania strony, nie zaczynaj od panelu Sieć. Istnieje wiele typów problemów z wydajnością wczytywania, które nie są związane z aktywizacją sieci. Zacznij od panelu Lighthouse, ponieważ zawiera on ukierunkowane sugestie dotyczące ulepszenia strony. Zapoznaj się z artykułem Optymalizacja szybkości witryny.

Otwórz panel Sieć

Aby w pełni wykorzystać ten samouczek, otwórz stronę demonstracyjną i wypróbuj funkcje.

1. Otwórz wersję demonstracyjną „Pierwsze kroki”.

   

   Możesz przenieść demonstrację do osobnego okna.

   

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

   

   Możesz dokować narzędzia dla deweloperów u dołu okna.

   

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

   

Obecnie panel Sieć jest pusty. Dzieje się tak, ponieważ Narzędzia deweloperskie rejestrują aktywność sieci tylko wtedy, gdy są otwarte, a od otwarcia Narzędzi deweloperskich nie wystąpiła żadna aktywność sieci.

Zapisuj aktywność sieciową

Aby wyświetlić aktywność sieci spowodowaną przez stronę:

1. Odśwież stronę. W panelu Sieć cała aktywność sieci jest rejestrowana w Dzienniku sieci.

   

   Każdy wiersz w logu sieci reprezentuje zasób. Domyślnie zasoby są wyświetlane w kolejności chronologicznej. Najwyższy zasób to zwykle główny dokument HTML. Dolny zasób to ten, którego dotyczyło ostatnie żądanie.

   Każda kolumna zawiera informacje o zasobie. Domyślne kolumny:

   • Stan: kod odpowiedzi HTTP.
   • Typ: typ zasobu.
   • Inicjator: co spowodowało wysłanie żądania zasobu. Kliknięcie linku w kolumnie Initiator (Inicjator) powoduje przejście do kodu źródłowego, który spowodował żądanie.
   • Rozmiar: ilość zasobów przesłanych przez sieć.
   • Czas: czas wykonania żądania.
   Uwaga: wykres nad dziennikiem sieci nosi nazwę Przegląd. W tym samouczku nie będziesz z niego korzystać, więc możesz go ukryć. Zobacz Ukrywanie ścieżki Przegląd
   .

2. Dopóki masz otwarte Narzędzia deweloperskie, będą one rejestrować aktywność sieciową w dzienniku sieci. Aby to zademonstrować, spójrz na dół dziennika sieci i zwróć uwagę na ostatnią aktywność.

3. W tym celu kliknij w demonstracji przycisk Get Data (Pobierz dane).

4. Ponownie spójrz na dół dziennika sieci. Jest nowy zasób o nazwie getstarted.json. Kliknięcie przycisku Pobierz dane spowodowało, że strona poprosiła o ten plik.

   

Pokaż więcej informacji

Kolumny logu sieci można konfigurować. Możesz ukryć kolumny, których nie używasz. Istnieje też wiele kolumn, które są domyślnie ukryte, ale mogą Ci się przydać.

1. Kliknij prawym przyciskiem myszy nagłówek tabeli Dziennik sieci i wybierz Domena. Wyświetla się domena każdej z tych zasobów.

   

Wskazówka: aby zobaczyć pełny adres URL zasobu, najedź kursorem na jego komórkę w kolumnie Nazwa.

Symulowanie wolniejszego połączenia z internetem

Połączenie sieciowe komputera, którego używasz do tworzenia witryn, jest prawdopodobnie szybsze niż połączenia sieciowe urządzeń mobilnych użytkowników. Ograniczenie wydajności strony pozwala lepiej określić, ile czasu zajmuje wczytanie strony na urządzeniu mobilnym.

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

   

2. Wybierz 3G.

   

3. Naciśnij i przytrzymaj Odśwież odśwież, a następnie wybierz Opróżnij pamięć podręczną i odśwież.

   

   Podczas kolejnych wizyt przeglądarka zwykle pobiera niektóre pliki z pamięci podręcznej, co przyspiesza wczytywanie strony. Wyczyść pamięć podręczną i wymuś ponowne wczytanie powoduje, że przeglądarka pobiera wszystkie zasoby z sieci. Jest to przydatne, gdy chcesz sprawdzić, jak strona wczytuje się w przypadku użytkownika, który odwiedza ją po raz pierwszy.

   Uwaga: proces opróżniania pamięci podręcznej i twardego odświeżania jest dostępny tylko wtedy, gdy Narzędzia deweloperskie są otwarte.

Robienie zrzutów ekranu

Zrzuty ekranu pokazują, jak wygląda Twoja strona w różnych momentach podczas wczytywania, oraz informują, jakie zasoby są wczytywane w każdym interwale.

Aby zrobić zrzut ekranu, wykonaj te czynności:

1. Kliknij Ustawienia sieci ustawienia.

2. Zaznacz pole wyboru check_box Zrzuty ekranu.

3. Załaduj stronę ponownie, korzystając z procesu Opróżnij pamięć podręczną i ponownie załaduj stronę. Jeśli potrzebujesz przypomnienia, jak to zrobić, zapoznaj się z artykułem Symulowanie wolniejszego połączenia. Karta Zrzuty ekranu zawiera miniatury przedstawiające wygląd strony w różnych punktach procesu wczytywania.

   

4. Kliknij pierwszą miniaturę. Narzędzia dla programistów pokazują, jaka aktywność w sieci miała miejsce w danym momencie.

   

5. Aby zamknąć kartę Zrzuty ekranu, odznacz pole wyboru Zrzuty ekranu.

6. Załaduj stronę ponownie.

Sprawdzanie szczegółów zasobu

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

1. Kliknij getstarted.html. Wyświetli się karta Nagłówki. Na tej karcie możesz sprawdzać nagłówki HTTP.

   

2. Aby wyświetlić podstawowe renderowanie kodu HTML, kliknij kartę Podgląd.

   

   Ta karta jest przydatna, gdy interfejs API zwraca kod błędu w formacie HTML i łatwiej jest odczytać wyrenderowany kod HTML niż kod źródłowy HTML lub podczas sprawdzania obrazów.

3. Aby wyświetlić kod źródłowy HTML, kliknij kartę Odpowiedź.

   

   Wskazówka: gdy plik jest zminimalizowany, kliknięcie przycisku Format data_object na dole karty Odpowiedź spowoduje ponowne sformatowanie zawartości pliku w celu ułatwienia jej odczytania.

4. Kliknij kartę Inicjator, aby wyświetlić drzewo, które odwzorowuje łańcuch inicjatora żądania.

   

5. Kliknij kartę Czas, aby wyświetlić szczegółowe informacje o aktywności w sieci dotyczącej tego zasobu.

   

6. Aby ponownie wyświetlić log sieci, kliknij Zamknij zamknij.

   

Nagłówki i odpowiedzi sieci wyszukiwania

Użyj karty Szukaj, gdy chcesz przeszukać nagłówki i odpowiedzi HTTP wszystkich zasobów pod kątem określonego ciągu znaków lub wyrażenia regularnego.

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

1. Kliknij Szukaj szukaj. Po lewej stronie karty Dziennik sieci otworzy się karta Szukaj.

   

2. Wpisz Cache-Control i naciśnij Enter. Na karcie Szukaj znajduje się lista wszystkich wystąpień wartości Cache-Control, które zostały znalezione w nagłówkach zasobów lub treści.

   

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ściach, otworzy się karta Odpowiedź.

   

4. Zamknij karty Szukaj i Nagłówki.

   

Filtruj zasoby

DevTools udostępnia wiele przepływów pracy umożliwiających odfiltrowywanie zasobów, które nie są istotne dla danego zadania.

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

1. Kliknij Filtr filter_alt, aby go wyświetlić.

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

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

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

   

2. Wpisz /.*\.[cj]s+$/. Narzędzia dla programistów odfiltrowują wszystkie zasoby o nazwie, która nie kończy się na j lub c, po której następuje co najmniej 1 znak s.

   

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

   

4. Wpisz domain:raw.githubusercontent.com w polu tekstowym Filtr. Narzędzie DevTools odfiltrowuje wszystkie zasoby z adresami URL, które nie pasują do tej domeny.

   

   Pełną listę właściwości, według których można filtrować żądania, znajdziesz w artykule Filtrowanie żądań według właściwości.

5. Wyczyść pole Filtr z tekstu.

Filtrowanie według typu zasobu

Aby skupić się na określonym typie pliku, np. na arkuszach stylów:

1. Kliknij CSS. Wszystkie inne typy plików są odfiltrowywane.

   

2. Aby wyświetlić skrypty, przytrzymaj klawisz Control lub Command (Mac) i kliknij JS.

   

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

Inne przepływy pracy związane z filtrowaniem znajdziesz w sekcji Filtrowanie żądań.

Blokowanie żądań

Jak wygląda i działa strona, gdy niektóre jej zasoby są niedostępne? Czy nie działa w ogóle, czy nadal w pewnym stopniu działa? Blokuj żądania, aby dowiedzieć się:

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

   

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

   

3. Kliknij przycisk Dodaj wzór.

4. Wpisz main.css.

   

5. Kliknij Dodaj.

6. Odśwież stronę. Zgodnie z oczekiwaniami styl strony jest nieco zniekształcony, ponieważ główny arkusz stylów został zablokowany. Zwróć uwagę na wiersz main.css w dzienniku sieci. Tekst w kolorze czerwonym oznacza, że zasób jest zablokowany.

   

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

Więcej informacji o funkcjach Narzędzi deweloperskich związanych z sprawdzaniem aktywności sieciowej znajdziesz w materiałach dotyczących sieci.