Informacje o funkcjach sieci

Odkryj nowe sposoby analizowania wczytywania strony w tym kompleksowym przewodniku po funkcjach analizy sieci w Narzędziach deweloperskich w Chrome.

Rejestrowanie żądań sieciowych

Domyślnie Narzędzia deweloperskie rejestrują wszystkie żądania sieciowe w panelu Sieć, o ile są otwarte.

Zatrzymaj rejestrowanie żądań sieciowych

Aby zatrzymać nagrywanie żądań:

• W panelu Sieć kliknij Zatrzymaj nagrywanie dziennika sieci. Zmieni kolor na szary, co oznacza, że Narzędzia deweloperskie nie rejestrują już żądań.
• Naciśnij Command + E (Mac) lub Control + E (Windows, Linux), gdy panel Sieć jest aktywny.

Wyczyść prośby

W panelu Sieć kliknij Wyczyść , aby usunąć wszystkie żądania z tabeli Żądania.

Zapisywanie żądań między wczytaniami strony

Aby zapisywać żądania między wczytaniami strony, zaznacz pole wyboru Preserve log (Zachowaj dziennik) w panelu Network (Sieć). Narzędzia deweloperskie zapisują wszystkie żądania, dopóki nie wyłączysz opcji Zachowaj log.

Rób zrzuty ekranu podczas wczytywania strony

Rób zrzuty ekranu, aby analizować, co widzą użytkownicy, gdy czekają na załadowanie strony.

Aby włączyć zrzuty ekranu, otwórz Ustawienia w panelu Sieć i wybierz Zrób zrzuty ekranu.

Aby zrobić zrzuty ekranu, odśwież stronę, gdy panel Sieć jest aktywny.

Po wykonaniu zrzutu ekranu możesz z nim wchodzić w interakcję w ten sposób:

• Najedź kursorem na zrzut ekranu, aby zobaczyć, kiedy został on zrobiony. Na osi czasu Przegląd pojawi się żółta linia.
• Kliknij miniaturę zrzutu ekranu, aby odfiltrować żądania, które wystąpiły po wykonaniu zrzutu ekranu.
• Kliknij dwukrotnie miniaturę, aby ją powiększyć.

Edytowanie i ponowne wysyłanie prośby

W tabeli Żądania możesz edytować i ponownie wysyłać dowolne żądanie sieciowe, które można pobrać:

1. Kliknij żądanie prawym przyciskiem myszy i wybierz Edytuj i wyślij ponownie jako pobieranie. Narzędzia deweloperskie otworzą panel Konsola z żądaniem wypełnionym jako wywołanie fetch(), zachowując pierwotne parametry żądania i kontekst wykonania.
2. Opcjonalnie możesz edytować wywołanie fetch() w konsoli, a następnie nacisnąć Enter, aby ponownie wysłać żądanie.

Zmienianie sposobu wczytywania

Symulowanie nowego użytkownika przez wyłączenie pamięci podręcznej przeglądarki

Aby emulować sposób, w jaki nowy użytkownik korzysta z Twojej witryny, zaznacz pole wyboru Wyłącz pamięć podręczną. Narzędzia deweloperskie wyłączają pamięć podręczną przeglądarki. Pozwala to dokładniej odtworzyć wrażenia nowego użytkownika, ponieważ przy kolejnych wizytach żądania są obsługiwane z pamięci podręcznej przeglądarki.

Wyłączanie pamięci podręcznej przeglądarki w panelu Stan sieci

Jeśli chcesz wyłączyć pamięć podręczną podczas pracy w innych panelach Narzędzi deweloperskich, użyj panelu wysuwanego Warunki sieciowe.

1. Kliknij ikonę , aby otworzyć panel Stan sieci.
2. Zaznacz lub odznacz pole Wyłącz pamięć podręczną.

Ręczne czyszczenie pamięci podręcznej przeglądarki

Aby w dowolnym momencie ręcznie wyczyścić pamięć podręczną przeglądarki, kliknij prawym przyciskiem myszy dowolne miejsce w tabeli Żądania i wybierz Wyczyść pamięć podręczną przeglądarki.

Emulacja trybu offline

Istnieje nowa klasa aplikacji internetowych, zwanych progresywnymi aplikacjami internetowymi, które mogą działać offline dzięki skryptom service worker. Podczas tworzenia tego typu aplikacji przydatna jest możliwość szybkiego symulowania urządzenia bez połączenia do transmisji danych.

Aby zasymulować całkowity brak połączenia z siecią, w menu Ograniczanie wykorzystania sieci obok pola wyboru Wyłącz pamięć podręczną wybierz Offline.

Narzędzia deweloperskie wyświetlają ikonę ostrzeżenia obok karty Sieć, aby przypomnieć, że tryb offline jest włączony.

Emulowanie wolnych połączeń sieciowych

Aby zasymulować szybkie 4G, wolne 4G lub 3G, wybierz odpowiednie gotowe ustawienie z menu Ograniczanie przepustowości na pasku działań u góry.

Jeśli w panelu Wydajność masz włączone Dane z pól, jedna z opcji ograniczania przepustowości w menu może być oznaczona jako zalecana na podstawie danych z Raportu na temat użytkowania Chrome.

Narzędzia deweloperskie wyświetlają ikonę ostrzeżenia obok panelu Sieć, aby przypomnieć Ci, że ograniczanie przepustowości jest włączone.

Tworzenie niestandardowych profili ograniczania przepustowości

Oprócz gotowych ustawień, takich jak wolne lub szybkie 4G, możesz też dodawać własne niestandardowe profile ograniczania przepustowości:

1. Otwórz menu Ograniczanie i wybierz Niestandardowe > Dodaj....
2. Skonfiguruj nowy profil ograniczania przepustowości zgodnie z opisem w sekcji ustawienia Ustawienia > Ograniczanie przepustowości.

3. Wróć do panelu Sieć i w menu Ograniczanie przepustowości wybierz nowy profil.

   

Narzędzia deweloperskie wyświetlają ikonę ostrzeżenia  obok panelu Sieć, aby przypomnieć, że ograniczanie przepustowości jest włączone.

Ograniczanie połączeń WebSocket

Oprócz żądań HTTP Narzędzia deweloperskie od wersji 99 ograniczają też połączenia WebSocket.

Aby zaobserwować ograniczanie przepustowości WebSocket:

1. Zainicjuj nowe połączenie, na przykład za pomocą narzędzia testowego.
2. W panelu Sieć wybierz Bez ograniczania i wyślij wiadomość przez połączenie.
3. Utwórz bardzo wolny niestandardowy profil ograniczania, na przykład 10 kbit/s. Taki wolny profil pomoże Ci zauważyć różnicę.
4. W panelu Sieć wybierz profil i wyślij kolejną wiadomość.
5. Włącz filtr WS, kliknij nazwę połączenia, otwórz kartę Wiadomości i sprawdź różnicę czasu między wysłanymi i powtórzonymi wiadomościami z ograniczeniem i bez niego. Na przykład:

Emulowanie powolnych połączeń sieciowych w panelu Warunki sieci

Jeśli chcesz ograniczyć przepustowość połączenia sieciowego podczas pracy w innych panelach Narzędzi deweloperskich, użyj panelu Warunki sieci.

1. Kliknij ikonę , aby otworzyć panel Stan sieci.
2. Wybierz szybkość połączenia w menu Ograniczanie wykorzystania sieci.

Ręczne usuwanie plików cookie przeglądarki

Aby w dowolnym momencie ręcznie wyczyścić pliki cookie przeglądarki, kliknij prawym przyciskiem myszy dowolne miejsce w tabeli Żądania i wybierz Wyczyść pliki cookie przeglądarki.

Zastępowanie nagłówków odpowiedzi HTTP

Zobacz Zastępowanie plików i nagłówków odpowiedzi HTTP lokalnie.

Zastępowanie klienta użytkownika

Aby ręcznie zastąpić klienta użytkownika:

1. Kliknij ikonę , aby otworzyć panel Stan sieci.
2. Odznacz pole wyboru Wybierz automatycznie.
3. Wybierz opcję klienta użytkownika z menu lub wpisz niestandardową w polu.

Wyszukaj żądania

Aby wyszukać nagłówki żądań, ładunki i odpowiedzi:

1. Aby otworzyć kartę Szukaj po prawej stronie, naciśnij ten skrót:

   • W systemie macOS naciśnij Command + F.
   • W systemie Windows lub Linux: Control + F.

2. Na karcie Szukaj wpisz zapytanie i naciśnij Enter. Opcjonalnie kliknij match_case lub regular_expression, aby włączyć odpowiednio rozróżnianie wielkości liter lub wyrażenia regularne.

3. Kliknij jeden z wyników wyszukiwania. W panelu Sieć pasujące żądanie zostanie wyróżnione na żółto. Dodatkowo panel otwiera kartę Nagłówki lub Odpowiedź i podświetla pasujący ciąg znaków, jeśli taki istnieje.

Aby odświeżyć wyniki wyszukiwania, kliknij odśwież Odśwież. Aby wyczyścić wyniki, kliknij ikonę blokady Wyczyść.

Więcej informacji o wszystkich sposobach wyszukiwania w Narzędziach deweloperskich znajdziesz w artykule Wyszukiwanie: znajdowanie tekstu we wszystkich wczytanych zasobach.

Filtruj żądania

Filtrowanie żądań według właściwości

Użyj pola Filtr, aby filtrować żądania według właściwości, takich jak domena lub rozmiar żądania, albo wpisz ciąg tekstowy, który pasuje do adresu URL, domeny, nazwy hosta lub portu żądania (np. localhost lub example.com), w tym żądań z tej samej witryny.

Jeśli nie widzisz tego pola, pasek Filtry jest prawdopodobnie ukryty. Zobacz Ukrywanie paska Filtry.

Aby odwrócić filtr, zaznacz pole wyboru Odwróć obok pola Filtr.

Możesz używać kilku właściwości jednocześnie, oddzielając je spacjami. Na przykład mime-type:image/gif larger-than:1K wyświetla wszystkie GIF-y o rozmiarze większym niż 1 kilobajt. Te filtry wielu właściwości są odpowiednikami operacji AND. Operacje OR nie są obsługiwane.

Poniżej znajdziesz pełną listę obsługiwanych właściwości.

• cookie-domain. Wyświetl zasoby, które ustawiają konkretną domenę pliku cookie.
• cookie-name. Wyświetl zasoby, które ustawiają określony plik cookie.
• cookie-path. Wyświetl zasoby, które ustawiają określoną ścieżkę pliku cookie.
• cookie-value. Wyświetl zasoby, które ustawiają określoną wartość pliku cookie.
• domain. Wyświetlaj tylko zasoby z określonej domeny. Aby uwzględnić wiele domen, możesz użyć symbolu wieloznacznego (*). Na przykład *.com wyświetla zasoby ze wszystkich nazw domen kończących się na .com. Narzędzia deweloperskie wypełniają menu autouzupełniania wszystkimi napotkanymi domenami.
• has-overrides. Wyświetl żądania, które zastąpiły content, headers, dowolne zastąpienia (yes) lub brak zastąpień (no). Do tabeli żądań możesz dodać odpowiednią kolumnę Ma zastąpienia.
• has-response-header. Wyświetl zasoby, które zawierają określony nagłówek odpowiedzi HTTP. Narzędzia deweloperskie wypełniają menu autouzupełniania wszystkimi nagłówkami odpowiedzi, które zostały wykryte.
• is. Użyj is:running, aby znaleźć zasoby WebSocket.
• larger-than Wyświetla zasoby większe niż podany rozmiar w bajtach. Ustawienie wartości 1000 jest równoważne ustawieniu wartości 1k.
• method. Wyświetl zasoby, które zostały pobrane za pomocą określonego typu metody HTTP. Narzędzia deweloperskie wypełniają menu autouzupełniania wszystkimi napotkanymi metodami HTTP.
• mime-type. Wyświetl zasoby określonego typu MIME. Narzędzia deweloperskie wypełniają menu autouzupełniania wszystkimi typami MIME, które napotkały.
• mixed-content. Wyświetl wszystkie zasoby z treścią mieszaną (mixed-content:all) lub tylko te, które są wyświetlane (mixed-content:displayed).
• priority. Wyświetl zasoby, których poziom priorytetu odpowiada określonej wartości.
• resource-type. Wyświetl zasoby określonego typu, np. obraz. Narzędzia deweloperskie wypełniają menu autouzupełniania wszystkimi typami zasobów, które napotkały.
• response-header-set-cookie. Pokaż nieprzetworzone nagłówki Set-Cookie na karcie Problemy. Nieprawidłowo sformułowane pliki cookie z nieprawidłowymi nagłówkami Set-Cookie będą oznaczane w panelu Sieć.
• scheme. Wyświetl zasoby pobrane przez niezabezpieczony protokół HTTP (scheme:http) lub zabezpieczony protokół HTTPS (scheme:https).
• set-cookie-domain. Wyświetl zasoby, które mają nagłówek Set-Cookie z atrybutem Domain pasującym do określonej wartości. Narzędzia deweloperskie wypełniają autouzupełnianie wszystkimi domenami plików cookie, które napotkały.
• set-cookie-name. Wyświetl zasoby, które mają nagłówek Set-Cookie o nazwie pasującej do określonej wartości. Narzędzia deweloperskie wypełniają autouzupełnianie wszystkimi nazwami plików cookie, które napotkały.
• set-cookie-value. Wyświetl zasoby, które mają nagłówek Set-Cookie o wartości zgodnej z podaną. Narzędzia deweloperskie wypełniają autouzupełnianie wszystkimi wartościami plików cookie, które zostały napotkane.
• status-code. Wyświetlaj tylko zasoby, których kod stanu HTTP jest zgodny z podanym kodem. Narzędzia deweloperskie wypełniają menu autouzupełniania wszystkimi kodami stanu, które napotkały.
• url. Wyświetl zasoby, które mają url pasujące do określonej wartości.

Filtruj żądania według typu

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

Jeśli nie widzisz tych przycisków, prawdopodobnie ukryty jest pasek działań Filtry. Zobacz Ukrywanie paska filtrów.

Aby wyświetlić zasoby wielu typów jednocześnie, przytrzymaj klawisz Command (Mac) lub Control (Windows, Linux), a następnie kliknij kilka filtrów typów.

Filtrowanie próśb według czasu

Przeciągnij w lewo lub w prawo na osi czasu Przegląd, aby wyświetlić tylko żądania, które były aktywne w tym przedziale czasu. Filtr jest inkluzywny. Wyświetlane są wszystkie żądania, które były aktywne w wyróżnionym okresie.

Ukryj adresy URL do strony z informacjami o usuwaniu danych

Adresy URL danych to małe pliki osadzone w innych dokumentach. Każde żądanie w tabeli Żądania, które zaczyna się od data:, jest adresem URL danych.

Aby ukryć te żądania, na pasku działań Filtry kliknij Więcej filtrów > check_box Ukryj adresy URL danych.

Pasek stanu u dołu wyświetla liczbę wyświetlonych żądań w stosunku do łącznej liczby żądań.

Ukrywanie adresów URL rozszerzeń

Aby skupić się na napisanym przez siebie kodzie, możesz odfiltrować nieistotne żądania wysyłane przez rozszerzenia zainstalowane w Chrome. Żądania rozszerzeń mają adresy URL zaczynające się od znaku chrome-extension://.

Aby ukryć żądania rozszerzeń, na pasku działań Filtry kliknij Więcej filtrów > check_box Ukryj adresy URL rozszerzeń.

Pasek stanu u dołu pokazuje liczbę wyświetlanych żądań w stosunku do ich łącznej liczby.

Pokaż tylko żądania z zablokowanymi plikami cookie odpowiedzi

Aby odfiltrować wszystko oprócz żądań z plikami cookie odpowiedzi zablokowanymi z jakiegokolwiek powodu, na pasku działań Filtry wybierz Więcej filtrów > check_box Zablokowane pliki cookie odpowiedzi.

Pasek stanu u dołu wyświetla liczbę wyświetlanych żądań w stosunku do łącznej liczby żądań.

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

Dodatkowo w panelu Sieć obok żądania z zablokowanymi plikami cookie (z powodu flag Chrome lub konfiguracji) wyświetla się ikona ostrzeżenia. Najedź kursorem na ikonę, aby wyświetlić etykietkę ze wskazówką, i kliknij ją, aby przejść do panelu Problemy i uzyskać więcej informacji.

Pokaż tylko zablokowane żądania

Aby odfiltrować wszystko oprócz zablokowanych żądań, na pasku działań Filtry wybierz Więcej filtrów > check_box Zablokowane żądania. Aby to przetestować, możesz użyć karty Blokowanie żądań sieciowych w szufladzie.

W tabeli Żądania zablokowane żądania są wyróżnione na czerwono. Pasek stanu u dołu wyświetla liczbę wyświetlonych żądań w stosunku do łącznej liczby żądań.

Pokaż tylko żądania od osób trzecich

Aby odfiltrować wszystko oprócz żądań, których źródło różni się od źródła strony, na pasku działań Filtry wybierz Więcej filtrów > check_box Żądania innych firm.

Pasek stanu u dołu wyświetla liczbę wyświetlonych żądań w stosunku do łącznej liczby żądań.

Sortowanie próśb

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

Sortuj według kolumny

Aby posortować prośby według danej kolumny, kliknij nagłówek dowolnej kolumny w tabeli Prośby.

Sortuj według fazy aktywności

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

• Czas rozpoczęcia. U góry znajduje się pierwsza zainicjowana prośba.
• Czas reakcji U góry znajduje się pierwsze żądanie, które rozpoczęło pobieranie.
• Godzina zakończenia. Pierwsza zakończona prośba znajduje się u góry.
• Łączny czas trwania. Żądanie z najkrótszą konfiguracją połączenia i żądaniem / odpowiedzią znajduje się na górze.
• Czas oczekiwania. Żądanie, które czekało najkrócej na odpowiedź, znajduje się na górze.

Opisy te zakładają, że poszczególne opcje są uszeregowane od najkrótszej do najdłuższej. Kliknięcie nagłówka kolumny Kaskada odwraca kolejność.

W tym przykładzie kaskada jest posortowana według łącznego czasu trwania. Jaśniejsza część każdego słupka to czas oczekiwania. Ciemniejsza część to czas poświęcony na pobieranie bajtów.

Analizowanie żądań

Dopóki Narzędzia deweloperskie są otwarte, wszystkie żądania są rejestrowane w panelu Sieć. Do analizowania żądań używaj panelu Sieć.

Wyświetlanie dziennika żądań

W tabeli Żądania możesz wyświetlić dziennik wszystkich żądań wysłanych, gdy narzędzia deweloperskie były otwarte. Kliknięcie lub najechanie kursorem na prośby spowoduje wyświetlenie dodatkowych informacji na ich temat.

Tabela Żądania domyślnie zawiera te kolumny:

• Nazwa: Nazwa pliku lub identyfikator zasobu.

• Stan. Ta kolumna może zawierać te wartości:

  

  • Kod stanu HTTP, np. 200 lub 404.
  • CORS error w przypadku żądań, które nie powiodły się z powodu współdzielenia zasobów pomiędzy serwerami z różnych domen (CORS).
  • (blocked:origin) w przypadku żądań z nieprawidłowo skonfigurowanymi nagłówkami. Najedź kursorem na tę wartość stanu, aby wyświetlić etykietkę z podpowiedzią dotyczącą tego, co poszło nie tak.
  • (failed), a następnie komunikat o błędzie.

• Typ. Typ MIME żądanego zasobu.

• Inicjator. Żądania mogą być inicjowane przez te obiekty lub procesy:

  • Parser. parser HTML w Chrome,
  • Przekierowanie Przekierowanie HTTP.
  • Script. Funkcja JavaScript. W takim przypadku panel Sieć zawiera link do odpowiedniego wiersza w pliku źródłowym.
  • Wczesne wskazówki. Odpowiedź HTTP 103 Early Hints.
  • Inne. Inny proces lub działanie, np. przejście na stronę za pomocą linku lub wpisanie adresu URL na pasku adresu.

• Rozmiar Łączny rozmiar nagłówków odpowiedzi i treści odpowiedzi dostarczonych przez serwer.

• Czas Łączny czas od rozpoczęcia żądania do otrzymania ostatniego bajtu w odpowiedzi.

• Kaskada. Wizualne zestawienie aktywności związanej z każdym żądaniem.

Dodaj lub usuń kolumny

Kliknij prawym przyciskiem myszy nagłówek tabeli Żądania i wybierz opcję, aby go ukryć lub wyświetlić. Wyświetlane opcje mają obok siebie znaczniki wyboru.

Możesz dodawać i usuwać te kolumny dodatkowe:

• Żądanie nr. Bezwzględna kolejność inicjowania żądań, domyślnie przypięta do pierwszej pozycji w tabeli Żądania.
• Ścieżka. Część adresu URL zawierająca ścieżkę.
• URL Pełny adres URL żądania.
• Metoda Metoda HTTP żądania (np. GET, POST, PUT, DELETE).
• Protokół. Protokół żądania (np. h2 dla HTTP/2, h3 dla HTTP/3 itd.).
• Schemat. Część adresu URL określająca schemat.
• Domena. Część adresu URL zawierająca domenę.
• Adres zdalny. Zdalny adres IP i port żądania.
• Przestrzeń adresów zdalnych. Przestrzeń adresów zdalnych żądania. Public – w przypadku publicznych adresów IP, Private – w przypadku prywatnych adresów IP.
• Przestrzeń adresów inicjatora. Przestrzeń adresów inicjatora żądania. Tak samo jak w przypadku pilota.
• Pliki cookie. Liczba plików cookie w żądaniu.
• Ustawione pliki cookie Liczba plików cookie w odpowiedzi.
• Priorytet. Priorytet żądania.
• Identyfikator połączenia. Identyfikator połączenia żądania w sesji klienta (jeśli istnieje).
• Ma zastąpienia Czy żądanie ma zastąpienia (tak, nie, treść lub nagłówki).
• Is Ad-Related Prawda czy fałsz?
• Wstępnie załadowane. Czy żądanie zostało zainicjowane przy użyciu spekulacyjnego wstępnego wczytywania.
• Blokowanie renderowania Czy żądanie blokuje renderowanie, potencjalnie blokuje renderowanie czy nie.
• Kaskada. wizualne zestawienie aktywności każdego żądania;

Dodawanie kolumn niestandardowych

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 kliknij Dodaj nagłówek niestandardowy, wpisz jego nazwę i kliknij Dodaj.

Grupowanie żądań według ramek wbudowanych

Jeśli ramki wbudowane na stronie inicjują wiele żądań, możesz ułatwić przeglądanie dziennika żądań, grupując je.

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

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

Wyświetlanie czasu trwania żądań względem siebie

Użyj kaskady, aby wyświetlić czas żądań względem siebie. Domyślnie kaskada jest uporządkowana według czasu rozpoczęcia żądań. Żądania znajdujące się bardziej po lewej stronie rozpoczęły się wcześniej niż te, które są bardziej po prawej stronie.

W sekcji Sortuj według fazy aktywności znajdziesz różne sposoby sortowania wykresu kaskadowego.

Analizowanie wiadomości w połączeniu WebSocket

Aby wyświetlić wiadomości połączenia WebSocket:

1. W kolumnie Nazwa w tabeli Żądania kliknij adres URL połączenia WebSocket.
2. Otwórz kartę Wiadomości. Tabela zawiera 100 ostatnich wiadomości.

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

Tabela zawiera 3 kolumny:

• Dane Ładunek wiadomości. Jeśli wiadomość jest w formacie zwykłego tekstu, pojawi się tutaj. W przypadku binarnych kodów operacji w tej kolumnie wyświetlana jest nazwa i kod operacji. Obsługiwane są te kody operacji: ramka kontynuacji, ramka binarna, ramka zamknięcia połączenia, ramka ping i ramka pong.
• Długość. Długość ładunku wiadomości w bajtach.
• Czas Czas odebrania lub wysłania wiadomości.

Wiadomości są oznaczone kolorami według typu:

• Wiadomości wychodzące są oznaczone jasnym kolorem zielonym.
• Odebrane SMS-y są białe.
• Kody operacji WebSocket są jasnożółte.
• Błędy są oznaczone jasnoczerwonym kolorem.

Analizowanie zdarzeń w strumieniu

Aby wyświetlić zdarzenia przesyłane strumieniowo przez serwery za pomocą interfejsów Fetch API, EventSource API i XHR:

1. Nagrywaj żądania sieciowe na stronie, która przesyła strumieniowo zdarzenia.
2. W sekcji Sieć wybierz żądanie i otwórz kartę EventStream.

Aby filtrować zdarzenia, określ wyrażenie regularne na pasku filtrowania u góry karty EventStream.

Aby wyczyścić listę zarejestrowanych zdarzeń, kliknij block Wyczyść.

Wyświetlanie podglądu treści odpowiedzi

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

1. Wybierz prośbę w kolumnie Nazwa w tabeli Prośby.
2. Otwórz kartę Podgląd.

Ta karta jest przydatna głównie do wyświetlania obrazów.

Wyświetlanie treści odpowiedzi

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

1. Wybierz prośbę w kolumnie Nazwa w tabeli Prośby.
2. Otwórz kartę Odpowiedź.

W przypadku odpowiedzi binarnych lub skompresowanych wybierz metodę dekodowania (Base64, Hex lub UTF-8) z menu u dołu karty Odpowiedź.

Wyświetlanie nagłówków HTTP

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

1. Wybierz prośbę w kolumnie Nazwa w tabeli Prośby.
2. Otwórz kartę Nagłówki i przewiń w dół do sekcji Ogólne, Nagłówki odpowiedzi, Nagłówki żądania i opcjonalnie Nagłówki Early Hints.

W sekcji Ogólne Narzędzia deweloperskie wyświetlają zrozumiały dla człowieka komunikat o stanie obok otrzymanego kodu stanu HTTP.

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

Wyświetlanie źródła 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 żądania, które Cię interesuje. Zobacz Wyświetlanie nagłówków HTTP.
2. Kliknij Wyświetl źródło obok sekcji Nagłówek żądania lub Nagłówek odpowiedzi.

Ostrzeżenie o nagłówkach prowizorycznych

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

• Żądanie nie zostało wysłane przez sieć, lecz udostępnione 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 żądania.

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

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

Wyświetlanie ładunku żądania

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

Wyświetlanie źródła ładunku

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

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

Wyświetlanie zakodowanych w adresie URL parametrów zapytania i formularza

Domyślnie narzędzia deweloperskie wyświetlają parametry ciągu zapytania i dane formularza w formacie dekodowanym na potrzeby adresu URL. Aby przełączać kodowanie URL argumentów na karcie Ładunek, kliknij Wyświetl zdekodowane z adresu URL lub Wyświetl zdekodowane.

Wyświetlanie binarnych i skompresowanych ładunków

W przypadku ładunków żądań binarnych lub skompresowanych wybierz metodę dekodowania (Base64, Hex lub UTF-8) z menu u dołu karty Ładunek.

Wyświetlanie plików cookie

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

1. Wybierz prośbę w kolumnie Nazwa w tabeli Prośby.
2. Otwórz kartę Pliki cookie.

Opis każdej kolumny znajdziesz w sekcji Pola.

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

Wyświetlanie sesji powiązanych z urządzeniem

Karta Sesje powiązane z urządzeniem zawiera informacje o odroczeniu (odświeżeniu) powiązane z wybraną prośbą we wszystkich aktywnych sesjach powiązanych z urządzeniem w witrynie.

Aby wyświetlić informacje o odroczeniu (odświeżaniu):

1. Wybierz prośbę w kolumnie Nazwa w tabeli Prośby.
2. Otwórz kartę Sesje powiązane z urządzeniem.

Karta Sesje powiązane z urządzeniem jest wyświetlana tylko w przypadku odpowiednich żądań z plikami cookie. Na karcie wyświetlane są wszystkie aktywne sesje powiązane z urządzeniem oraz informacja o tym, czy sesje odroczyły żądanie (a jeśli nie, to dlaczego). Dostępne opcje odroczenia:

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

Wyświetlanie zestawienia czasu żądania

Aby wyświetlić podział czasowy żądania:

1. Wybierz prośbę w kolumnie Nazwa w tabeli Prośby.
2. Otwórz kartę Czas.

Szybszy sposób uzyskiwania dostępu do tych danych znajdziesz w sekcji Wyświetlanie podglądu podziału czasowego.

Więcej informacji o poszczególnych fazach, które możesz zobaczyć na karcie Czas, znajdziesz w artykule Objaśnienie faz czasu.

Podgląd zestawienia czasu

Aby wyświetlić podgląd zestawienia czasu żądania, najedź kursorem na wpis żądania w kolumnie Kaskada w tabeli Żądania.

Aby dowiedzieć się, jak uzyskać dostęp do tych danych bez najeżdżania kursorem, przeczytaj artykuł Wyświetlanie zestawienia czasu żądania.

Objaśnienie faz zestawienia czasu

Poniżej znajdziesz więcej informacji o poszczególnych fazach, które mogą się pojawić na karcie Czas:

• Kolejkowanie Przeglądarka umieszcza żądania w kolejce przed rozpoczęciem połączenia i gdy:
  • Istnieją żądania o wyższym priorytecie. Priorytet żądania jest określany na podstawie takich czynników jak typ zasobu i jego lokalizacja w dokumencie. Więcej informacji znajdziesz w sekcji dotyczącej priorytetu zasobów w przewodniku po fetchpriority.
  • Dla tego pochodzenia jest już otwartych 6 połączeń TCP, co jest limitem. (Dotyczy tylko protokołów HTTP/1.0 i HTTP/1.1).
  • Przeglądarka przez chwilę przydziela miejsce w pamięci podręcznej na dysku.
• Zablokowane. Żądanie może zostać wstrzymane po rozpoczęciu połączenia z dowolnego powodu opisanego w sekcji Kolejkowanie.
• Wyszukiwanie DNS. Przeglądarka rozwiązuje adres IP żądania.
• Połączenie początkowe. Przeglądarka nawiązuje połączenie, w tym uzgadnia połączenie TCP lub ponawia próby i negocjuje SSL.
• Negocjacje przez pełnomocnika Przeglądarka negocjuje żądanie z serwerem proxy.
• Prośba wysłana. Prośba jest wysyłana.
• Przygotowanie skryptu ServiceWorker. Przeglądarka uruchamia skrypt service worker.
• Żądanie do ServiceWorker Żądanie jest wysyłane do service workera.
• Oczekiwanie (TTFB). Przeglądarka czeka na pierwszy bajt odpowiedzi. TTFB to skrót od Time To First Byte (czas do pierwszego bajtu). Ten czas obejmuje 1 cykl opóźnienia w obie strony i czas potrzebny serwerowi na przygotowanie odpowiedzi.
• Pobieranie treści Przeglądarka otrzymuje odpowiedź bezpośrednio z sieci lub z procesu roboczego usługi. Ta wartość to łączny czas odczytywania treści odpowiedzi. Wartości większe niż oczekiwane mogą wskazywać na powolną sieć lub na to, że przeglądarka jest zajęta wykonywaniem innych zadań, co opóźnia odczytanie odpowiedzi.

Wyświetlanie 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 Requests (Żądania). Narzędzia deweloperskie oznaczają inicjatory na zielono, a zależności na czerwono.

Gdy tabela Żądania jest uporządkowana chronologicznie, pierwsze zielone żądanie nad żądaniem, nad którym umieszczasz wskaźnik, jest inicjatorem zależności. Jeśli nad nim znajduje się kolejne zielone żądanie, to wyższe żądanie jest inicjatorem inicjatora. I tak dalej.

Wyświetlanie zdarzeń wczytywania

Narzędzia deweloperskie wyświetlają czas zdarzeń DOMContentLoaded i load w kilku miejscach w panelu Sieć. Zdarzenie DOMContentLoaded jest oznaczone kolorem niebieskim, a zdarzenie load – czerwonym.

Wyświetlanie łącznej liczby żądań

Łączna liczba żądań jest podana na pasku stanu u dołu panelu Sieć.

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

Narzędzia deweloperskie wyświetlają łączny rozmiar przesłanych i wczytanych (nieskompresowanych) zasobów na pasku stanu u dołu panelu Sieć.

Aby sprawdzić, jak duże są zasoby po zdekompresowaniu ich przez przeglądarkę, zapoznaj się z sekcją Wyświetlanie nieskompresowanego rozmiaru zasobu.

Wyświetlanie zrzutu stosu, który spowodował żądanie

Gdy instrukcja JavaScriptu powoduje wysłanie żądania zasobu, najedź kursorem na kolumnę Inicjator, aby wyświetlić zrzut stosu prowadzący do żądania.

Wyświetlanie nieskompresowanego rozmiaru zasobu

Kliknij Ustawienia > Duże wiersze żądań, a następnie sprawdź wartość u dołu kolumny Rozmiar.

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

Eksportowanie danych żądań

Listę próśb z zastosowanymi filtrami możesz wyeksportować lub skopiować na kilka sposobów opisanych poniżej.

Zapisywanie wszystkich żądań sieciowych w pliku HAR

HAR (archiwum HTTP) to format pliku używany przez niektóre narzędzia do przechwytywania sesji HTTP w celu eksportowania danych. Ten format to obiekt JSON z określonym układem pól.

Aby zmniejszyć ryzyko przypadkowego wycieku informacji poufnych, domyślnie możesz wyeksportować „oczyszczony” dziennik sieci w formacie HAR, który nie zawiera informacji poufnych, takich jak nagłówki Cookie, Set-Cookie i Authorization. W razie potrzeby możesz też wyeksportować dziennik z danymi wrażliwymi.

Aby zapisać wszystkie żądania sieciowe w pliku HAR, wybierz jeden z tych 2 sposobów:

• Kliknij prawym przyciskiem dowolne żądanie w tabeli Żądania i wybierz Kopiuj > Zapisz wszystkie [wymienione] jako plik HAR (oczyszczony) lub Zapisz wszystkie [wymienione] jako plik HAR (z danymi wrażliwymi).

  

• Na pasku działań u góry panelu Sieć kliknij pobierz Eksportuj plik HAR (oczyszczony)....

  Aby wyeksportować dane wrażliwe, najpierw włącz ustawienia Ustawienia > Ustawienia > Sieć > pole wyboru Zezwalaj na generowanie HAR z danymi wrażliwymi, a następnie kliknij przycisk pobierania Eksportuj i wybierz Eksportuj HAR (z danymi wrażliwymi) z menu.

  

Gdy masz już plik HAR, możesz go zaimportować z powrotem do Narzędzi deweloperskich, aby przeprowadzić analizę na 2 sposoby:

• Przeciągnij i upuść plik HAR w tabeli Żądania.
• Na pasku działań u góry panelu Sieć kliknij prześlij Importuj HAR.

skopiować żądanie, przefiltrowany zestaw żądań lub wszystkie żądania do schowka;

W kolumnie Nazwa w tabeli Żądania kliknij żądanie prawym przyciskiem myszy, najedź kursorem na Kopiuj i wybierz jedną z tych opcji:

Aby skopiować pojedyncze żądanie, odpowiedź lub zrzut stosu:

• Kopiuj URL. Skopiuj adres URL żądania do schowka.
• Skopiuj jako cURL. Skopiuj żądanie jako polecenie cURL.
• Skopiuj jako PowerShell. Skopiuj żądanie jako polecenie PowerShell.
• Skopiuj jako żądanie pobrania. Skopiuj żądanie jako wywołanie pobierania.
• Skopiuj jako pobieranie (Node.js). Skopiuj żądanie jako wywołanie pobierania w Node.js.
• Skopiuj jako element wstępnego wczytywania. Skopiuj żądanie jako tag HTML <link rel="preload">.
• Skopiuj odpowiedź. Skopiuj treść odpowiedzi do schowka.
• Kopiuj zrzut stosu. Skopiuj ślad stosu żądania do schowka.

Aby skopiować wszystkie żądania:

• Kopiuj wszystkie adresy URL. Kopiuje adresy URL wszystkich żądań do schowka.
• Skopiuj wszystko jako cURL. Skopiuj wszystkie żądania jako ciąg poleceń cURL.
• Skopiuj wszystko jako PowerShell. Skopiuj wszystkie żądania jako ciąg poleceń PowerShell.
• Skopiuj wszystko jako pobieranie Skopiuj wszystkie żądania jako łańcuch wywołań pobierania.
• Skopiuj wszystko jako fetch (Node.js). Skopiuj wszystkie żądania jako łańcuch wywołań pobierania Node.js.
• Skopiuj wszystko jako plik HAR (po usunięciu danych poufnych). Skopiuj wszystkie żądania jako dane HAR bez danych wrażliwych, takich jak nagłówki Cookie, Set-Cookie i Authorization.
• Copy all as HAR (with sensitive data) (Skopiuj wszystko jako plik HAR z danymi wrażliwymi). Skopiuj wszystkie żądania jako dane HAR z danymi wrażliwymi.

Aby skopiować przefiltrowany zestaw żądań, zastosuj filtr do dziennika sieci, kliknij żądanie prawym przyciskiem myszy i wybierz:

• Skopiuj wszystkie wymienione adresy URL. Skopiuj adresy URL wszystkich przefiltrowanych żądań do schowka.
• Skopiuj wszystkie wymienione jako cURL. Skopiuj wszystkie przefiltrowane żądania jako ciąg poleceń cURL.
• Skopiuj wszystkie wymienione jako PowerShell. Skopiuj wszystkie przefiltrowane żądania jako ciąg poleceń PowerShell.
• Skopiuj wszystkie wymienione jako żądanie pobrania. Skopiuj wszystkie przefiltrowane żądania jako łańcuch wywołań pobierania.
• Skopiuj wszystkie wymienione jako fetch (Node.js). Skopiuj wszystkie przefiltrowane żądania jako łańcuch wywołań pobierania w Node.js.
• Skopiuj wszystkie wymienione jako plik HAR (po usunięciu danych poufnych). Skopiuj wszystkie przefiltrowane żądania jako dane HAR bez danych wrażliwych, takich jak nagłówki Cookie, Set-Cookie i Authorization.
• Skopiuj wszystkie wymienione jako plik HAR (z danymi poufnymi). Skopiuj wszystkie przefiltrowane żądania jako dane HAR z danymi poufnymi.

Zmienianie układu panelu Sieć

Rozwijaj i zwijaj sekcje interfejsu panelu Sieć, aby skupić się na tym, co jest dla Ciebie ważne.

Ukrywanie paska działań Filtry

Domyślnie Narzędzia deweloperskie wyświetlają pasek filtrów u góry panelu Sieć. Kliknij filter_alt Filtruj, aby go ukryć.

Używanie dużych wierszy żądań

Używaj dużych wierszy, gdy chcesz mieć więcej pustego miejsca w tabeli żądań sieciowych. Niektóre kolumny zawierają też więcej informacji, gdy używasz dużych wierszy. Na przykład dolna wartość w kolumnie Rozmiar to nieskompresowany rozmiar żądania, a kolumna Priorytet pokazuje zarówno początkowy (dolna wartość), jak i końcowy (górna wartość) priorytet pobierania.

Otwórz Ustawienia i kliknij Duże wiersze żądań, aby wyświetlić duże wiersze.

Ukrywanie ścieżki Przegląd

Domyślnie Narzędzia deweloperskie wyświetlają ścieżkę Przegląd. Otwórz Ustawienia i odznacz pole wyboru Pokaż przegląd, aby ukryć tę opcję.