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 przejrzeć funkcje, zapoznaj się z dokumentacją sieci.

Przeczytaj ten artykuł lub obejrzyj film z samouczkiem:

Kiedy używać panelu Sieć

Ogólnie rzecz biorąc, panel Sieć służy do sprawdzania, czy zasoby są pobierane lub przesyłane zgodnie z oczekiwaniami. Najczęstsze przypadki użycia panelu Sieć:

• sprawdzić, czy zasoby są w ogóle 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ę wydajności wczytywania strony, nie zaczynaj od panelu Sieć. Istnieje wiele rodzajów problemów z wydajnością wczytywania, które nie są związane z aktywnością sieciową. Zacznij od panelu Lighthouse, ponieważ zawiera on konkretne sugestie dotyczące ulepszenia strony. Zobacz Optymalizowanie szybkości witryny.

Otwieranie panelu Sieć

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

1. Otwórz wersję demonstracyjną.

   

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

   

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

   

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

   

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

   

Panel Sieć jest obecnie pusty. Dzieje się tak, ponieważ Narzędzia deweloperskie rejestrują aktywność sieciową tylko wtedy, gdy są otwarte, a od momentu ich otwarcia nie wystąpiła żadna aktywność sieciowa.

Zapisuj aktywność sieciową

Aby wyświetlić aktywność sieciową powodowaną przez stronę:

1. Odśwież stronę. Panel Sieć rejestruje całą aktywność sieciową w Dzienniku sieci.

   

   Każdy wiersz w Dzienniku sieci reprezentuje zasób. Domyślnie zasoby są wymienione chronologicznie. Głównym zasobem jest zwykle główny dokument HTML. Ostatni zasób to ten, o który ostatnio poproszono.

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

   • Stan: kod odpowiedzi HTTP.
   • Typ: typ zasobu.
   • Inicjator: co spowodowało wysłanie żądania zasobu. Kliknięcie linku w kolumnie Inicjator powoduje przejście do kodu źródłowego, który spowodował wysłanie żądania.
   • Rozmiar: ilość zasobów przesłanych przez sieć.
   • Czas: czas trwania żądania.

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

3. Teraz w wersji demonstracyjnej kliknij przycisk 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 wysłanie prośby o ten plik.

   

Pokaż więcej informacji

Kolumny Dziennika sieci można skonfigurować. Możesz ukryć kolumny, których nie używasz. Dostępnych jest 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świetlana jest teraz domena każdego zasobu.

   

Symulowanie wolniejszego połączenia sieciowego

Połączenie sieciowe komputera, na którym tworzysz witryny, jest prawdopodobnie szybsze niż połączenia sieciowe urządzeń mobilnych Twoich użytkowników. Ograniczając wydajność strony, możesz lepiej ocenić, ile czasu zajmuje jej wczytanie na urządzeniu mobilnym.

1. Kliknij menu Ograniczanie, które domyślnie ma ustawienie Brak ograniczeń.

   

2. Wybierz 3G.

   

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

   

   Podczas kolejnych wizyt przeglądarka zwykle wyświetla 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 jest wczytywana przez użytkownika odwiedzającego ją po raz pierwszy.

Zrób zrzuty ekranu

Zrzuty ekranu pokazują, jak strona wygląda w różnych momentach podczas wczytywania, i informują, jakie zasoby są wczytywane w poszczególnych odstępach czasu.

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

1. Kliknij Ustawienia sieci ustawienia.

2. Zaznacz pole wyboru Zrzuty ekranu check_box.

3. Załaduj stronę ponownie, korzystając z opcji Empty Cache And Hard Reload. Jeśli chcesz przypomnieć sobie, jak to zrobić, przeczytaj artykuł Symulowanie wolniejszego połączenia. Karta Zrzuty ekranu zawiera miniatury pokazujące, jak strona wyglądała w różnych momentach procesu ładowania.

   

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

   

5. Kliknij pole wyboru Zrzuty ekranu, aby zamknąć kartę 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 sprawdzić nagłówki HTTP.

   

2. Kliknij kartę Podgląd, aby wyświetlić podstawowy kod HTML.

   

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

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

   

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

   

5. Kliknij kartę Timing, aby wyświetlić zestawienie aktywności sieciowej dla tego zasobu.

   

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

   

Nagłówki i odpowiedzi w sieci wyszukiwania

Użyj karty Wyszukiwanie, gdy chcesz wyszukać w nagłówkach HTTP i odpowiedziach wszystkich zasobów określony ciąg znaków lub wyrażenie regularne.

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

1. Kliknij Szukaj search na pasku działań panelu lub naciśnij Command + F (macOS) albo Control + F (Windows / Linux).

   Po lewej stronie dziennika sieci otworzy się karta Szukaj.

   

2. Wpisz Cache-Control i naciśnij Enter. Na karcie Wyszukiwanie znajduje się lista wszystkich wystąpień znaku Cache-Control znalezionych w nagłówkach lub treściach zasobów.

   

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ź.

   

4. Zamknij karty Szukaj i Nagłówki.

   

Filtruj zasoby

Narzędzia deweloperskie udostępniają wiele przepływów pracy do odfiltrowywania zasobów, które nie są istotne dla wykonywanego zadania.

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

1. Aby wyświetlić filtr, kliknij Filtr filter_alt.

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

Pole wprowadzania Filtruj 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 deweloperskie odfiltrowują wszystkie zasoby, których nazwy nie kończą się na j lub c, po którym następuje co najmniej 1 znak s.

   

3. Wpisz -main.css. Narzędzia deweloperskie odfiltrowują main.css. Jeśli jakikolwiek inny plik pasowałby do wzorca, również zostałby odfiltrowany.

   

4. Wpisz domain:raw.githubusercontent.com w polu tekstowym Filtr. Narzędzia deweloperskie odfiltrowują wszystkie zasoby, których adres URL nie pasuje do tej domeny.

   

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

5. Wyczyść okno do wprowadzania danych Filtruj z całego tekstu.

Filtrowanie według typu zasobu

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

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

   

2. Aby wyświetlić też skrypty, przytrzymaj klawisz Control lub Command (Mac), a następnie kliknij JS.

   

3. Aby usunąć filtry i ponownie wyświetlić wszystkie zasoby, kliknij Wszystkie.

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

Blokowanie żądań

Jak wygląda i jak działa strona, gdy niektóre z jej zasobów są niedostępne? Czy całkowicie przestał działać, czy nadal jest w jakiś sposób funkcjonalny? Blokuj żądania, aby dowiedzieć się:

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

   

2. Wpisz block, wybierz Show Request Blocking (Pokaż blokowanie żądań) i naciśnij 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 zaburzony, ponieważ jej główny arkusz stylów został zablokowany. Zwróć uwagę na wiersz main.css w Dzienniku sieci. Czerwony tekst oznacza, że zasób jest zablokowany.

   

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

Więcej funkcji Narzędzi deweloperskich związanych ze sprawdzaniem aktywności sieci znajdziesz w materiałach referencyjnych dotyczących sieci.