Sprawdzanie aktywności w sieci

Kayce Basques

Twitter GitHub Usterka

Ten praktyczny samouczek przedstawia najczęściej używane funkcje Narzędzi deweloperskich związane z sprawdzaniem aktywności strony w sieci.

Jeśli chcesz przejrzeć funkcje przeglądania, patrz Materiały referencyjne sieci.

Przeczytaj lub obejrzyj wersję wideo tego samouczka:

Kiedy używać panelu Sieć

Z reguły używaj panelu Sieć, gdy chcesz się upewnić, że zasoby są pobierane lub przesyłane zgodnie z oczekiwaniami. Typowe przypadki użycia panelu Sieć to:

• Sprawdzanie, czy zasoby są rzeczywiście przesyłane lub pobierane.
• Sprawdzanie właściwości poszczególnych zasobów, takich jak nagłówki HTTP, zawartość czy rozmiar.

Jeśli szukasz sposobów na poprawę wydajności wczytywania stron, nie zaczynaj od panelu Sieć. Występuje 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 ukierunkowane sugestie, jak ulepszyć stronę. Więcej informacji znajdziesz w artykule Optymalizacja szybkości witryny.

Otwórz panel Sieć

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

1. Otwórz wersję demonstracyjną.

   

   Rysunek 1. Wersja demonstracyjna

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

   

   Rysunek 2. Wersja demonstracyjna 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.

   

   Rysunek 3. Konsola

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

   

   Rysunek 4. Narzędzia deweloperskie zadokowane u dołu okna

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

   

   Rysunek 5. Narzędzia deweloperskie zadokowane u dołu okna

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

Zapisuj aktywność sieci

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

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

   

   Rysunek 6. Dziennik sieci

   Każdy wiersz dziennika sieciowego reprezentuje zasób. Domyślnie zasoby są wymienione chronologicznie. Najważniejszym zasobem jest zwykle główny dokument HTML. Dolny zasób to ten, który został zgłoszony jako ostatni.

   Każda kolumna zawiera informacje o zasobie. Rysunek 6 przedstawia domyślne kolumny:

   • Stan. Kod odpowiedzi HTTP.
   • Typ. Typ zasobu.
   • Inicjator. Co spowodowało wysłanie żądania zasobu. Aby przejść do kodu źródłowego, który wywołał żądanie, kliknij link w tej kolumnie.
   • Czas. Czas trwania żądania.

   • Wodospad. Graficzne przedstawienie różnych etapów żądania. Najedź kursorem na wodospad, aby zobaczyć podział.

     Uwaga: Uwaga: wykres nad dziennikiem sieci jest nazywany Przeglądem. Nie będziesz używać jej w tym samouczku, więc możesz ją ukryć. Zobacz [Ukrywanie panelu Przegląd][6].

2. Jeśli masz otwarte Narzędzia deweloperskie, aktywność sieciowa będzie rejestrować w Dzienniku sieci. Aby to zademonstrować, najpierw spójrz na dół dziennika sieciowego i zanotuj ostatnią aktywność.

3. Teraz w wersji demonstracyjnej kliknij przycisk Pobierz dane.

4. Ponownie sprawdź u dołu Dziennika sieciowego. Dostępny jest nowy zasób o nazwie getstarted.json. Kliknięcie przycisku Pobierz dane spowodowało, że strona wysłała żądanie tego pliku.

   

   Rysunek 7. Nowy zasób w logu sieci

Pokaż więcej informacji

Kolumny dziennika sieci można skonfigurować. Możesz ukryć nieużywane kolumny. Jest też wiele kolumn, które są domyślnie ukryte, co może okazać się przydatne.

1. Kliknij prawym przyciskiem myszy nagłówek tabeli Log sieciowy i wybierz Domain (Domena). Domena każdego zasobu jest teraz widoczna.

   

   Rysunek 8. Włączanie kolumny Domena

Uwaga: Wskazówka Aby zobaczyć pełny adres URL zasobu, najedź kursorem na 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. Dzięki ograniczaniu strony możesz się dowiedzieć, jak długo trwa wczytywanie strony na urządzeniu mobilnym.

1. Kliknij menu Ograniczanie, które domyślnie ma wartość Online.

   

   Rysunek 9. Włączanie ograniczania

2. Wybierz Wolna sieć 3G.

   

   Rysunek 10. Wybieranie wolnego 3G

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

   

   Rysunek 11. Opróżnij pamięć podręczną i wymuś ponowne załadowanie

   Przy kolejnych wizytach przeglądarka zwykle wyświetla niektóre pliki z pamięci podręcznej, co przyspiesza wczytywanie strony. Opcja Opróżnij pamięć podręczną i mocne ponowne załadowanie wymusza na przeglądarce przejście do sieci w celu pobrania wszystkich zasobów. Jest to przydatne, gdy chcesz sprawdzić, jak strona wczytuje się po raz pierwszy.

   Uwaga: Uwaga: proces Opróżnij pamięć podręczną i ponownie załaduj jest dostępny tylko wtedy, gdy otwarte są Narzędzia deweloperskie.

Robienie zrzutów ekranu

Zrzuty ekranu pozwalają zobaczyć, jak strona wyglądała w czasie podczas wczytywania.

1. Kliknij Zrób zrzuty ekranu .

2. Załaduj ponownie stronę jeszcze raz, wykonując procedurę Opróżnij pamięć podręczną i utrudnij ponowne załadowanie. Jeśli potrzebujesz przypomnienia, by to zrobić, przeczytaj artykuł Symulacja wolniejszego połączenia. Okienko Zrzuty ekranu zawiera miniatury przedstawiające wygląd strony w różnych miejscach podczas procesu wczytywania.

   

   Rysunek 12. Zrzuty ekranu z wczytywaniem strony

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

   

   Rysunek 13. aktywność w sieci, która miała miejsce na pierwszym zrzucie ekranu;

4. Ponownie kliknij Zrób zrzuty ekranu , aby zamknąć okienko Zrzuty ekranu.

5. Załaduj stronę ponownie.

Sprawdzanie szczegółów zasobu

Kliknij zasób, aby wyświetlić więcej informacji na jego temat. Wypróbuj tę funkcję już teraz:

1. Kliknij getstarted.html. Widoczna jest karta Nagłówki. Za pomocą tej karty możesz sprawdzać nagłówki HTTP.

   

   Rysunek 14. Karta Nagłówki

2. Kliknij kartę Podgląd. Pokazywane jest podstawowe renderowanie kodu HTML.

   

   Rysunek 15. Karta Podgląd

   Ta karta jest przydatna, gdy interfejs API zwraca kod błędu w kodzie HTML i sprawia, że wyrenderowany kod HTML jest łatwiejszy do odczytania niż kod źródłowy HTML, a także podczas sprawdzania obrazów.

3. Kliknij kartę Odpowiedź. Widoczny jest kod źródłowy HTML.

   

   Rysunek 16. Karta Odpowiedź

   Uwaga: Wskazówka: gdy plik jest zminimalizowany, kliknięcie przycisku Formatuj u dołu karty Odpowiedź powoduje przeformatowanie jego zawartości, aby zwiększyć czytelność.

4. Kliknij kartę Czas. Wyświetlane są informacje na temat aktywności w sieci dla tego zasobu.

   

   Rysunek 17. Karta Czas

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

   

   Rysunek 18. Przycisk Zamknij

Wyszukaj nagłówki i odpowiedzi sieci

Okienko Szukaj pozwala przeszukać nagłówki HTTP i odpowiedzi wszystkich zasobów w celu znalezienia określonego ciągu znaków lub wyrażenia regularnego.

Załóżmy na przykład, że chcesz sprawdzić, czy Twoje zasoby stosują uzasadnione zasady dotyczące pamięci podręcznej.

1. Kliknij Szukaj . Okienko wyszukiwania otworzy się po lewej stronie dziennika sieci.

   

   Rysunek 19. Okienko wyszukiwania

2. Wpisz Cache-Control i naciśnij Enter. W panelu wyszukiwania wyświetlane są wszystkie wystąpienia funkcji Cache-Control znalezione w nagłówkach lub treści zasobów.

   

   Rysunek 20. Wyniki wyszukiwania dla zapytania 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ź.

   

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

4. Zamknij panel wyszukiwania i kartę Harmonogram.

   

   Rysunek 22. Przyciski Zamknij

Filtruj zasoby

W Narzędziach deweloperskich dostępnych jest wiele przepływów pracy, które pozwalają odfiltrowywać zasoby, które nie są związane z danym zadaniem.

Rysunek 23. Pasek narzędzi Filtry

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 tekstowe Filtr obsługuje wiele różnych typów filtrowania.

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

   

   Rysunek 24. Filtr ciągu tekstowego

2. Wpisz /.*\.[cj]s+$/. Narzędzia deweloperskie odfiltrowują wszystkie zasoby o nazwach plików, które nie kończą się ciągiem j ani c, po którym następuje co najmniej 1 znak s.

   

   Rysunek 25. Filtr wyrażeń regularnych

3. Wpisz -main.css. Narzędzia deweloperskie odfiltrowują te filtry: main.css. Inne pliki pasujące do wzorca też zostaną odfiltrowane.

   

   Rysunek 26. filtr ujemny;

4. Wpisz domain:raw.githubusercontent.com w polu tekstowym Filtr. Narzędzia deweloperskie odfiltrowują zasoby z adresem URL niepasującym do tej domeny.

   

   Rysunek 27. Filtr właściwości

   Pełną listę właściwości możliwych do filtrowania znajdziesz w sekcji Filtrowanie żądań według usług.

5. Wyczyść pole tekstowe Filtr.

Filtruj według typu zasobu

Aby skupić się na określonym typie pliku, takim jak arkusze stylów:

1. Kliknij CSS. Pozostałe typy plików są odfiltrowywane.

   

   Rysunek 28. Wyświetlam tylko pliki CSS

2. Aby zobaczyć też skrypty, przytrzymaj klawisz Ctrl lub Command (Mac), a następnie kliknij JS.

   

   Rysunek 29. Wyświetlanie tylko plików CSS i JS

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

Informacje o innych przepływach pracy związanych z filtrowaniem znajdziesz w artykule Filtrowanie żądań.

Blokuj prośby

Jak wygląda i działa strona, gdy niektóre jej zasoby są niedostępne? Czy działa w całości, czy nadal działa? Blokuj prośby, aby dowiedzieć się:

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

   

   Rysunek 30. Menu poleceń

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

   

   Rysunek 31. Pokaż blokowanie żądań

3. Kliknij Dodaj wzór .

4. Wpisz main.css.

   

   Rysunek 32. Blokuję użytkownika main.css

5. Kliknij Dodaj.

6. Odśwież stronę. Zgodnie z oczekiwaniami, styl strony jest nieco zniekształcony, 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.

   

   Rysunek 33. Element „main.css” został zablokowany

7. Odznacz pole wyboru Włącz blokowanie próśb.

Dalsze kroki

Gratulacje, udało Ci się ukończyć samouczek. Kliknij Dispense Award, aby ją odebrać.

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