Sprawdzanie aktywności w sieci

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.

    Wersja demonstracyjna

    Rysunek 1. Wersja demonstracyjna

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

    Prezentacja w jednym oknie, a ten samouczek w innym

    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.

    Konsola

    Rysunek 3. Konsola

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

    Narzędzia deweloperskie zadokowane na dole okna

    Rysunek 4. Narzędzia deweloperskie zadokowane na dole okna

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

    Narzędzia deweloperskie zadokowane na dole okna

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

    Dziennik sieci

    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 trwania żą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.

    Nowy zasób w dzienniku sieci

    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.

    Włączanie kolumny Domena

    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.

    Włączanie ograniczania

    Rysunek 9. Włączanie ograniczania

  2. Wybierz Wolne 3G.

    Wybieram powolną sieć 3G

    Rysunek 10. Wybieram powolną sieć 3G

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

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

    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).Robienie zrzutów 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.

    zrzuty ekranu przedstawiające wczytanie strony;

    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.

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

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

  4. Ponownie kliknij Zrób zrzuty ekranu Robienie zrzutów 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.

    Karta Nagłówki

    Rysunek 14. Karta Nagłówki

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

    Karta Podgląd

    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.

    Karta Odpowiedź

    Rysunek 16. Karta Odpowiedź

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

    Karta Czas

    Rysunek 17. Karta Czas

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

    Przycisk Zamknij

    Rysunek 18. Przycisk Zamknij

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 Wyszukiwarka. Po lewej stronie dziennika sieci otworzy się okienko Wyszukiwanie.

    Panel wyszukiwania

    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.

    Wyniki wyszukiwania dla Cache-Control

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

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

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

  4. Zamknij okienko wyszukiwania i kartę Czas.

    Przyciski Zamknij

    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.

Pasek narzędzi filtrów

Rysunek 23. Pasek narzędzi filtrów

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

  1. Kliknij Filtruj Filtr, 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.

    Filtr w postaci ciągu znaków

    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.

    Filtr wyrażeń regularnych

    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.

    Filtr negatywny

    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.

    Filtr właściwości

    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.

    Wyświetlam tylko pliki CSS

    Rysunek 28. Wyświetlam tylko pliki CSS

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

    Wyświetlam tylko pliki CSS i 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ń.

    Menu polecenia

    Rysunek 30. Menu polecenia

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

    Pokaż blokowanie żądań

    Rysunek 31. Pokaż blokowanie żądań

  3. Kliknij Dodaj wzór Dodaj wzór.

  4. Wpisz main.css.

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

    Strona main.css została zablokowana

    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.