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 chcesz przeglądać funkcje, zajrzyj do dokumentacji sieci.

Czytaj dalej lub obejrzyj film z tego samouczka:

Kiedy używać panelu Sieć

Ogólnie panel Sieć należy używać, gdy trzeba się upewnić, że zasoby są pobierane lub przesyłane zgodnie z oczekiwaniami. Najczęstsze zastosowania panelu Sieć:

• 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 stron, nie zacznij 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 konkretne sugestie dotyczące ulepszania strony. Zapoznaj się z artykułem Optymalizacja 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 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ę. Panel Sieć rejestruje całą aktywność sieci w Dzienniku sieci.

   

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

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

   • Stan: kod odpowiedzi HTTP.
   • Typ: typ zasobu.
   • Initiator (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 realizacji żądania.
   Uwaga: wykres nad dziennikam sieci to Przegląd. W tym samouczku nie będziesz z niego korzystać, więc możesz go ukryć. Zapoznaj się z sekcją Ukrywanie ścieżki przeglądu.

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

3. W tym celu kliknij w tym pokazie 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, że strona poprosiła o ten plik.

   

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 Dziennik sieci i wybierz Domena. Domena każdego zasobu zostanie wyświetlona.

   

Wskazówka: pełny adres URL zasobu możesz zobaczyć, najeżdżając kursorem na jego komórkę w kolumnie Nazwa.

Symulowanie wolniejszego połączenia sieciowego

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 oszacować, 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ż.

   

   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 sprawdzić, jak wczytywanie strony wygląda z perspektywy 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 są otwarte Narzędzia deweloperskie.

Zrób zrzuty 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. Włącz check_box Zrzuty ekranu.

3. Załaduj stronę ponownie, korzystając z procesu Opróżnij pamięć podręczną i ponownie załaduj. 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ć zestawienie aktywności sieci dla tego zasobu.

   

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

   

Wyszukaj nagłówki i odpowiedzi sieci

Użyj karty Szukaj, 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 rozsądnych zasad dotyczących pamięci podręcznej.

1. Kliknij Szukaj . Zostanie otwarta karta Search (Wyszukiwanie) po lewej stronie dziennika sieci.

   

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ści, 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. Aby go wyświetlić, kliknij Filtruj filter_alt.

Filtruj 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świetlają się 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 nazwa nie kończy się znakiem j ani 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 pasuje do tego wzorca, zostanie również odfiltrowany.

   

4. Wpisz domain:raw.githubusercontent.com w polu tekstowym Filtr. Odfiltrowują one wszystkie zasoby z adresem URL, który nie pasuje 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 Żądania filtrowania.

Blokuj żądania

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 Control+Shift+P lub Command+Shift+P (Mac), by 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 czerwieni 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.