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

    witryna demonstracyjna,

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

    Demonstracja w jednym oknie, a ten samouczek w innym.

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

    Panel Konsola w Narzędziach deweloperskich

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

    Narzędzia deweloperskie zadokowano u dołu okna.

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

    Panel sieci w narzędziu DevTools zadokowany u dołu okna.

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.

    Dziennik sieci z 5 żądaniami.

    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.

  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.

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

    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łą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.

    Menu ograniczania w panelu Sieć

  2. Wybierz 3G.

    Wybieranie 3G w panelu Sieć.

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

    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 sprawdzić, jak wczytywanie strony wygląda z perspektywy użytkownika, który odwiedza ją po raz pierwszy.

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 .

  2. Włącz 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.

    Zrzuty ekranu przedstawiające wczytywanie strony w panelu Sieć.

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

    Aktywność sieci podczas pierwszego zrzutu ekranu.

  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.

    Karta Nagłówki w panelu Sieć.

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

    Karta Podgląd w panelu Sieć

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

    Karta Odpowiedź w panelu Sieć.

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

    Karta Initiator (Inicjator) w panelu Network (Sieć).

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

    Karta Czas w panelu Sieć.

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

    Przycisk Zamknij na karcie szczegółów.

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.

    Karta Szukaj 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.

    Wyniki wyszukiwania dla kontroli pamięci podręcznej.

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

    Wynik wyszukiwania wyróżniony na karcie Nagłówki

  4. Zamknij karty Szukaj i Nagłówki.

    Przyciski Zamknij

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 filtrów.

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

  1. Aby go wyświetlić, kliknij Filtruj .

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.

    Wyniki filtrowania ciągu znaków w dzienniku sieciowym.

  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.

    Wyniki filtra wyrażeń regularnych są uwzględniane w dzienniku sieci.

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

    Filtrowanie negatywne powoduje zapisywanie wyników w dzienniku sieci.

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

    Filtrowanie właściwości w dzienniku sieci

    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.

    Panel sieciowy wyświetlający tylko pliki CSS.

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

    Panel sieci przedstawiający tylko pliki CSS i 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ń.

    Menu poleceń w panelu Sieć

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

    Opcja „Pokaż blokowanie żądań”.

  3. Kliknij przycisk Dodaj wzór.

  4. Wpisz main.css.

    Blokowanie pliku main.css w panelu Sieć

  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.

    Plik main.css został 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.