Informacje o funkcjach sieci

Filtruj żądania według typu

Aby filtrować żądania według typu żądania, w panelu Sieć kliknij przyciski All (Wszystkie), Fetch/XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest lub Other (dowolny inny typ, którego nie ma na tej liście).

Jeśli nie widzisz tych przycisków, okienko Filtry jest prawdopodobnie ukryte. Zobacz Ukrywanie panelu filtrów.

Aby włączyć wiele filtrów typów jednocześnie, przytrzymaj Command (Mac) lub Control (Windows, Linux) i kliknij,

Filtruj żądania według czasu

Kliknij i przeciągnij w lewo lub w prawo w panelu Przegląd, by wyświetlić tylko te prośby, które były aktywne w danym okresie. Filtr uwzględnia integrację społeczną. Widoczne są wszystkie żądania, które były aktywne w wyróżnionym czasie.

Ukryj adresy URL danych

Adresy URL danych to małe pliki umieszczone w innych dokumentach. Każde żądanie widoczne w tabeli Żądania rozpoczynające się od data: jest adresem URL danych.

Aby ukryć te żądania, zaznacz Ukryj adresy URL danych.

Pasek stanu u dołu pokazuje liczbę wyświetlonych żądań w całej łącznej liczbie.

Ukryj adresy URL rozszerzeń

Aby skupić się na swoim kodzie, możesz odfiltrowywać nietrafne żądania wysyłane przez rozszerzenia zainstalowane w Chrome. Żądania rozszerzeń mają adresy URL, które zaczynają się od chrome-extension://.

Aby ukryć prośby o rozszerzenia, zaznacz Ukryj adresy URL rozszerzeń.

Pasek stanu u dołu pokazuje liczbę wyświetlonych żądań w całej łącznej liczbie.

Pokaż tylko żądania z zablokowanymi plikami cookie odpowiedzi

Aby odfiltrować wszystko poza żądaniami z plikami cookie odpowiedzi zablokowanymi z dowolnego powodu, zaznacz Zablokowane pliki cookie odpowiedzi. Wypróbuj tę funkcję na tej stronie demonstracyjnej.

Pasek stanu u dołu pokazuje liczbę wyświetlonych żądań w całej łącznej liczbie.

Aby dowiedzieć się, dlaczego plik cookie odpowiedzi został zablokowany, wybierz żądanie, otwórz kartę Pliki cookie i najedź kursorem na ikonę informacji .

Pokaż tylko zablokowane żądania

Aby odfiltrować wszystko z wyjątkiem zablokowanych żądań, zaznacz Zablokowane żądania. Aby to sprawdzić, użyj karty szuflady Blokowanie żądań sieciowych.

Zablokowane żądania w tabeli Żądania są wyróżnione na czerwono. Pasek stanu u dołu pokazuje liczbę wyświetlonych żądań w całej łącznej liczbie.

Pokaż tylko żądania innych firm

Aby odfiltrować wszystko z wyjątkiem żądań, których źródło różni się od pochodzenia strony, sprawdź Żądania zewnętrzne. Wypróbuj tę funkcję na tej stronie demonstracyjnej.

Pasek stanu u dołu pokazuje liczbę wyświetlonych żądań w całej łącznej liczbie.

Sortuj prośby

Domyślnie żądania w tabeli Żądania są sortowane według czasu zainicjowania, ale możesz posortować tabelę, korzystając z innych kryteriów.

Sortuj według kolumny

Kliknij nagłówek dowolnej kolumny w tabeli Żądania, aby posortować żądania według tej kolumny.

Sortuj według fazy aktywności

Aby zmienić sposób sortowania żądań w narzędziu Waterfall, kliknij prawym przyciskiem myszy nagłówek tabeli Żądania, najedź kursorem na Kaskada i wybierz jedną z tych opcji:

• Czas rozpoczęcia. Pierwsze zainicjowane żądanie znajduje się u góry.
• Czas odpowiedzi. Pierwsze żądanie, którego pobieranie zostało rozpoczęte, znajduje się u góry.
• Czas zakończenia. Pierwsze zakończone żądanie znajduje się na górze.
• Całkowity czas trwania. Żądanie z najkrótszą konfiguracją połączenia oraz żądaniem / odpowiedzią znajduje się u góry.
• Czas oczekiwania. Żądanie, w którym przeprowadzono najkrótszy czas oczekiwania na odpowiedź, znajduje się u góry.

W tych opisach przyjęliśmy, że poszczególne opcje są uporządkowane od najkrótszej do najdłuższej. Kliknięcie nagłówka kolumny Waterfall odwraca kolejność.

W tym przykładzie obszar Waterfall jest posortowany według łącznego czasu trwania. Najlżejsza część każdego słupka to czas spędzony na oczekiwaniu. Najciemniejszy fragment to czas pobierania bajtów.

Analizowanie żądań

Jeśli Narzędzia deweloperskie są otwarte, wszystkie żądania są rejestrowane w panelu Network (Sieć). Żądania możesz analizować w panelu Sieć.

Wyświetlanie logu żądań

Użyj tabeli Requests (Żądania), aby wyświetlić dziennik wszystkich żądań wysłanych, gdy Narzędzia deweloperskie są otwarte. Kliknięcie lub najechanie kursorem na żądanie pozwala wyświetlić więcej informacji na jego temat.

Tabela Żądania domyślnie zawiera te kolumny:

• Nazwa: Nazwa pliku zasobu lub identyfikator zasobu.
• Stan. Ta kolumna może zawierać te wartości:
  • Kod stanu HTTP, np. 200 lub 404.
  • CORS error dla żądań nie powiodło się z powodu udostępniania zasobów między serwerami zewnętrznymi (CORS).
  • Typowa (failed) lub (blocked:origin) w przypadku innych żądań.
• Typ. Typ MIME żądanego zasobu.
• Inicjator. Żądania mogą inicjować te obiekty lub procesy:
  • Parser. Parser HTML w Chrome.
  • Przekierowanie. Przekierowanie HTTP.
  • Skrypt. Funkcja JavaScript.
  • Inne do innych procesów lub czynności, takich jak wejście na stronę za pomocą linku lub wpisanie adresu URL w pasku adresu.
• Rozmiar. Łączny rozmiar nagłówków odpowiedzi z jej treścią dostarczony przez serwer.
• Czas. Łączny czas od początku żądania do momentu otrzymania ostatniego bajtu w odpowiedzi.
• Wodospad. Wizualne zestawienie aktywności związanej z każdym żądaniem.

Dodawanie i usuwanie kolumn

Kliknij prawym przyciskiem myszy nagłówek tabeli Żądania i wybierz opcję ukrycia lub wyświetlenia opcji. Obok obecnie wyświetlanych opcji znajdują się znaczniki wyboru.

Możesz dodać lub usunąć te kolumny dodatkowe: Ścieżka, URL, Metoda, Protokół, Schemat, Domena, Adres zdalny, Zdalna przestrzeń adresowa, Przestrzeń adresowa inicjatora, Pliki cookie, Ustaw pliki cookie, Priorytet, Identyfikator połączenia i Zawiera zastąpienia.

Dodaj kolumny niestandardowe

Aby dodać kolumnę niestandardową do tabeli Żądania:

1. Kliknij prawym przyciskiem myszy nagłówek tabeli Żądania i wybierz Nagłówki odpowiedzi > Zarządzaj kolumnami nagłówków.
2. W oknie dialogowym kliknij Dodaj niestandardowy nagłówek, wpisz jego nazwę i kliknij Dodaj.

Grupuj żądania według wbudowanych ramek

Jeśli wbudowane ramki na stronie inicjują wiele żądań, możesz poprawić jakość dziennika żądań, grupując je.

Aby grupować żądania według elementów iframe, otwórz Ustawienia w panelu Sieć i zaznacz Grupuj według ramki.

Aby wyświetlić żądanie zainicjowane przez wbudowaną ramkę, rozwiń je w dzienniku żądań.

sprawdzanie czasu realizacji żądań względem siebie,

Korzystając z opcji Kaskada, możesz sprawdzać czasy realizacji żądań. Domyślnie widok Waterfall jest organizowany według czasu rozpoczęcia wysyłania żądań. Tak więc żądania znajdujące się dalej od lewej rozpoczynają się wcześniej niż te daleko po prawej.

Zobacz Sortowanie według fazy aktywności, aby zobaczyć różne sposoby sortowania Kaskady.

Analizowanie komunikatów połączenia WebSocket

Aby wyświetlić komunikaty połączenia WebSocket:

1. W kolumnie Nazwa tabeli Żądania kliknij adres URL połączenia WebSocket.
2. Kliknij kartę Wiadomości. Tabela pokazuje 100 ostatnich wiadomości.

Aby odświeżyć tabelę, ponownie kliknij nazwę połączenia WebSocket w kolumnie Nazwa tabeli Żądania.

Tabela zawiera 3 kolumny:

• Dane. Ładunek wiadomości. Jeśli wiadomość jest zwykłym tekstem, jest tutaj wyświetlany. W przypadku kodów operacji binarnych ta kolumna zawiera nazwę i kod kodu operacji. Obsługiwane są te kody operacji: Ramka kontynuacyjna, Ramka binarna, Ramka zamknięcia połączenia, Ramka ping i Ramka Pong.
• Długość. Długość ładunku wiadomości w bajtach.
• Czas. Godzina odebrania lub wysłania wiadomości.

Wiadomości są oznaczane kolorami w zależności od typu:

• Wychodzące SMS-y są jasnozielone.
• Przychodzące SMS-y mają kolor biały.
• Kody operacyjne WebSocket są jasnożółte.
• Błędy są świecące na czerwono.

Wyświetlanie podglądu treści odpowiedzi

Aby wyświetlić podgląd treści odpowiedzi:

1. Kliknij adres URL prośby w kolumnie Nazwa w tabeli Żądania.
2. Kliknij kartę Podgląd.

Ta karta najbardziej przydaje się do przeglądania obrazów.

Wyświetl treść odpowiedzi

Aby wyświetlić treść odpowiedzi na żądanie:

1. Kliknij adres URL prośby w kolumnie Nazwa w tabeli Żądania.
2. Kliknij kartę Odpowiedź.

Wyświetl nagłówki HTTP

Aby wyświetlić dane nagłówka HTTP żądania:

1. Kliknij prośbę w tabeli Żądania.
2. Otwórz kartę Nagłówki i przewiń stronę w dół do sekcji Ogólne, Nagłówki odpowiedzi lub Nagłówki żądań.

W sekcji Ogólne w Narzędziach deweloperskich obok odebranego kodu stanu HTTP wyświetla się zrozumiały dla człowieka komunikat o stanie.

W sekcji Nagłówki odpowiedzi możesz najechać kursorem na wartość nagłówka i kliknąć przycisk Edytuj , aby zastąpić nagłówek odpowiedzi lokalnie.

Wyświetl źródło nagłówka HTTP

Domyślnie na karcie Nagłówki nazwy nagłówków są wyświetlane w kolejności alfabetycznej. Aby wyświetlić nazwy nagłówków HTTP w kolejności, w jakiej zostały odebrane:

1. Otwórz kartę Nagłówki dla interesującego Cię żądania. Zobacz Wyświetlanie nagłówków HTTP.
2. Obok sekcji Nagłówek żądania lub Nagłówek odpowiedzi kliknij Wyświetl źródło.

Ostrzeżenie o nagłówkach tymczasowych

Czasami na karcie Nagłówki wyświetla się ostrzeżenie Provisional headers are shown.... Może się tak zdarzyć z tych przyczyn:

• Żądanie nie zostało wysłane przez sieć, ale dostarczone z lokalnej pamięci podręcznej, która nie przechowuje oryginalnych nagłówków żądania. W takim przypadku możesz wyłączyć zapisywanie w pamięci podręcznej, aby zobaczyć pełne nagłówki żądań.

• Zasób sieci jest nieprawidłowy. Na przykład uruchom polecenie fetch("https://jec.fish.com/unknown-url/") w konsoli.

Ze względów bezpieczeństwa Narzędzia deweloperskie mogą też wyświetlać tylko nagłówki tymczasowe.

Wyświetl ładunek żądania

Aby wyświetlić ładunek żądania, czyli parametry ciągu zapytania i dane formularza, wybierz żądanie z tabeli Żądania i otwórz kartę Ładunek.

Wyświetl źródło ładunku

Domyślnie Narzędzia deweloperskie wyświetlają ładunek w postaci zrozumiałej dla człowieka.

Aby wyświetlić źródła parametrów ciągu zapytania i danych formularzy, na karcie Ładunek kliknij wyświetl źródło obok sekcji Parametry ciągu zapytania lub Dane formularza.

Wyświetl zdekodowane z adresu URL argumenty parametrów ciągu zapytania

Aby włączyć kodowanie adresów URL dla argumentów, na karcie Ładunek kliknij Wyświetl zdekodowane lub Wyświetl zdekodowane z adresu URL.

Wyświetl pliki cookie

Aby wyświetlić pliki cookie wysłane w nagłówku HTTP żądania:

1. Kliknij adres URL prośby w kolumnie Nazwa w tabeli Żądania.
2. Kliknij kartę Pliki cookie.

Opis poszczególnych kolumn znajdziesz w sekcji Pola.

Aby dowiedzieć się, jak zmodyfikować pliki cookie, przeczytaj sekcję Wyświetlanie, edytowanie i usuwanie plików cookie.

Wyświetlanie rozkładu czasowego żądania

Aby wyświetlić rozkład czasowy żądania:

1. Kliknij adres URL prośby w kolumnie Nazwa w tabeli Żądania.
2. Kliknij kartę Czas.

Aby szybciej uzyskać dostęp do tych danych, zobacz Podgląd zestawienia czasu.

Więcej informacji o każdym z etapów można znaleźć na karcie Czas w artykule Omówienie faz podziału czasu.

Wyświetl podgląd zestawienia czasu

Aby wyświetlić podgląd podziału czasowego żądania, najedź kursorem na pozycję żądania w kolumnie Kaskada w tabeli Żądania.

Sposób dostępu do tych danych, który nie wymaga najeżdżania kursorem, znajdziesz w sekcji Wyświetlanie rozkładu czasowego żądania.

Omówienie faz podziału czasu

Oto więcej informacji o każdym z etapów, które możesz zobaczyć na karcie Czas:

• Kolejkowanie. Przeglądarka ustawia żądania w kolejce przed rozpoczęciem połączenia i gdy:
  • Istnieją żądania o wyższym priorytecie.
  • Dla tego punktu początkowego jest już otwartych 6 połączeń TCP, a taki jest limit. Dotyczy tylko HTTP/1.0 i HTTP/1.1.
  • Przeglądarka przez chwilę przydziela miejsce w pamięci podręcznej dysku.
• Wstrzymana. Po rozpoczęciu połączenia żądanie może zostać wstrzymane z dowolnego powodu opisanego w sekcji Queueing.
• Wyszukiwanie DNS. Przeglądarka rozpoznaje adres IP żądania.
• Początkowe połączenie. Przeglądarka nawiązuje połączenie, w tym uzgadnianie/ponowne próby połączenia TCP i negocjuje protokół SSL.
• Negocjowanie serwera proxy. Przeglądarka negocjuje żądanie z serwerem proxy.
• Prośba wysłana Wysyłam prośbę.
• Przygotowanie ServiceWorker. Przeglądarka uruchamia skrypt service worker.
• Żądanie do obiektu ServiceWorker. Żądanie jest wysyłane do skryptu service worker.
• Oczekiwanie (TTFB). Przeglądarka czeka na pierwszy bajt odpowiedzi. TTFB oznacza czas do pierwszego bajtu. Ten czas obejmuje 1 przebieg oczekiwania w obie strony oraz czas potrzebny na przygotowanie odpowiedzi przez serwer.
• Pobieranie treści. Przeglądarka otrzymuje odpowiedź bezpośrednio z sieci lub od skryptu service worker. Ta wartość to łączny czas czytania treści odpowiedzi. Wartości wyższe od oczekiwanych mogą wskazywać na powolne działanie sieci lub na to, że przeglądarka jest zajęta wykonywaniem innych zadań, co opóźnia odczyt odpowiedzi.
• Odbieranie push. Przeglądarka otrzymuje dane w tej odpowiedzi przy użyciu metody push z serwera HTTP/2.
• Reading Push. Przeglądarka odczytuje wcześniej otrzymane dane lokalne.

Wyświetl inicjatorów i zależności

Aby wyświetlić inicjatorów i zależności żądania, przytrzymaj Shift i najedź kursorem na żądanie w tabeli żądań. Kolory inicjatorów w Narzędziach deweloperskich – zielony, a zależności – czerwony.

Jeśli tabela Żądania jest uporządkowana chronologicznie, pierwsze zielone żądanie nad żądaniem, na które najedziesz kursorem, jest inicjatorem zależności. Jeśli powyżej znajduje się inna prośba w kolorze zielonym, oznacza to, że prośba o wyższy poziom jest zainicjowana przez inicjatora. I tak dalej.

Wyświetl zdarzenia wczytywania

Narzędzia deweloperskie wyświetlają czasy zdarzeń DOMContentLoaded i load w wielu miejscach w panelu Sieć. Zdarzenie DOMContentLoaded ma kolor niebieski, a zdarzenie load – czerwony.

Wyświetlanie łącznej liczby żądań

Łączna liczba żądań jest podana w panelu Podsumowanie u dołu panelu Sieć.

Wyświetlanie łącznego rozmiaru przeniesionych i załadowanych zasobów

W panelu Podsumowanie u dołu panelu Sieć w Narzędziach deweloperskich wyświetlany jest łączny rozmiar przeniesionych i wczytywanych (nieskompresowanych) zasobów.

Zobacz artykuł Wyświetlanie nieskompresowanego rozmiaru zasobu, aby sprawdzić, jak duże są zasoby po ich zdekompresowaniu przez przeglądarkę.

Wyświetl zrzut stosu, który spowodował żądanie

Gdy instrukcja JavaScript powoduje żądanie zasobu, najedź kursorem na kolumnę Inicjator, aby wyświetlić zrzut stosu poprzedzający żądanie.

Wyświetlanie nieskompresowanego rozmiaru zasobu

Sprawdź Ustawienia > Użyj dużych wierszy w żądaniach, a potem spójrz na dolną wartość kolumny Rozmiar.

W tym przykładzie rozmiar skompresowanego dokumentu www.google.com przesłanego przez sieć wynosił 43.8 KB, a rozmiar nieskompresowany – 136 KB.

Eksportuj dane żądań

Zapisz wszystkie żądania sieciowe w pliku HAR

HAR (archiwum HTTP) to format pliku używany przez kilka narzędzi do eksportowania danych do obsługi sesji HTTP do eksportowania przechwyconych danych. Format to obiekt JSON z określonym zestawem pól.

Wszystkie żądania sieciowe możesz zapisać w pliku HAR na 2 sposoby:

• Kliknij prawym przyciskiem myszy dowolne żądanie w tabeli Requests (Żądania) i wybierz Save all as HAR with content (Zapisz wszystko w formacie HAR z treścią).
• Kliknij Eksportuj HAR na pasku działań u góry panelu Sieć.

Gdy masz plik HAR, możesz zaimportować go z powrotem do Narzędzi deweloperskich na potrzeby analizy na 2 sposoby:

• Przeciągnij plik HAR i upuść w tabeli Requests (Żądania).
• Kliknij Importuj plik HAR na pasku działań u góry panelu Sieć.

Skopiuj co najmniej jedną prośbę do schowka

W kolumnie Nazwa w tabeli Prośby kliknij prośbę prawym przyciskiem myszy, najedź kursorem na Kopiuj i wybierz jedną z tych opcji:

• Kopiuj adres linku. Skopiuj adres URL żądania do schowka.
• Kopiuj nazwę pliku. Skopiuj nazwę pliku do schowka.
• Kopiuj odpowiedź. Skopiuj treść odpowiedzi do schowka.
• Skopiuj jako PowerShell. Skopiuj żądanie jako polecenie PowerShell.
• Kopiuj jako pobranie. Skopiuj żądanie jako wywołanie pobierania.
• Kopiuj jako pobieranie Node.js. Skopiuj żądanie jako wywołanie pobierania w środowisku Node.js.
• Skopiuj jako cURL. Skopiuj żądanie jako polecenie cURL.
• Skopiuj wszystko jako PowerShell. Skopiuj wszystkie żądania jako łańcuch poleceń PowerShell.
• Skopiuj wszystko jako pobranie. Skopiuj wszystkie żądania jako łańcuch wywołań pobierania.
• Skopiuj wszystko jako pobranie przy użyciu Node.js. Skopiuj wszystkie żądania jako łańcuch wywołań pobierania w środowisku Node.js.
• Skopiuj wszystko jako cURL. Skopiuj wszystkie żądania w postaci łańcucha poleceń cURL.
• Skopiuj wszystko w formacie HAR. Skopiuj wszystkie żądania jako dane HAR.

Zmienianie układu panelu Sieć

Rozwiń lub zwiń sekcje interfejsu panelu Sieć, aby skupić się na tym, co jest dla Ciebie ważne.

Ukryj panel Filtry

Domyślnie w Narzędziach deweloperskich wyświetla się okienko Filtry. Kliknij Filtruj, aby go ukryć.

Używaj dużych wierszy żądań

Użyj dużych wierszy, jeśli chcesz mieć w tabeli żądań sieciowych więcej odstępów. Niektóre kolumny zawierają też więcej informacji przy dużych wierszach. Na przykład dolna wartość kolumny Rozmiar to nieskompresowany rozmiar żądania.

Otwórz Ustawienia i kliknij Użyj dużych wierszy żądań, aby włączyć duże wiersze.

Ukrywanie panelu Przegląd

Domyślnie w Narzędziach deweloperskich wyświetla się okienko Przegląd. Otwórz Ustawienia i odznacz pole wyboru Pokaż przegląd, aby je ukryć.