Informacje o funkcjach sieci

Sofia Emelianova
Sofia Emelianova

Poznaj nowe sposoby analizowania wczytywania strony dzięki temu obszernemu przewodnikowi po funkcjach analizy sieci w Narzędziach deweloperskich Chrome.

Domyślnie narzędzia deweloperskie rejestrują wszystkie żądania sieci w panelu Sieć, dopóki są otwarte.

Panel Sieć.

Zatrzymaj rejestrowanie żądań sieciowych

Aby przestać nagrywać prośby:

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

Wyczyść prośby

Aby wyczyścić wszystkie żądania z tabeli Żądania, w panelu Sieć kliknij Wyczyść Wyczyść..

Przycisk Wyczyść.

Zapisywanie żądań po wczytaniu stron

Aby zapisywać żądania podczas wczytywania stron, w panelu Sieć zaznacz pole wyboru Zachowaj dziennik. Narzędzia deweloperskie zapisują wszystkie żądania, dopóki nie wyłączysz opcji Zachowaj dziennik.

Wykonywanie zrzutów ekranu podczas wczytywania strony

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

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

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

Po zrobieniu zrzutu ekranu możesz z nim w pewnym stopniu współpracować:

  • Najedź kursorem na zrzut ekranu, aby wyświetlić punkt, w którym został on wykonany. Na osi czasu Przegląd pojawia się żółta linia.
  • Kliknij miniaturę zrzutu ekranu, aby odfiltrować żądania, które nastąpiły po wykonaniu zrzutu ekranu.
  • Kliknij dwukrotnie miniaturę, aby ją powiększyć.

Zrzuty ekranu są włączone.

Powtórz żądanie XHR

Aby odtworzyć żądanie XHR, wykonaj jedną z tych czynności w tabeli Żądania:

  • Wybierz prośbę i naciśnij R.
  • Kliknij żądanie prawym przyciskiem myszy i wybierz Powtórz XHR.

Wybieranie Replay XHR.

Zmień zachowanie podczas wczytywania

Utwórz symulację nowego użytkownika, wyłączając pamięć podręczną przeglądarki

Aby odwzorować wrażenia użytkownika, który odwiedza Twoją witrynę po raz pierwszy, zaznacz pole wyboru Wyłącz pamięć podręczną. Narzędzia deweloperskie wyłączają pamięć podręczną przeglądarki. Dzięki temu można lepiej odwzorować wrażenia użytkownika korzystającego z aplikacji po raz pierwszy, ponieważ podczas kolejnych wizyt żądania są obsługiwane z pamięci podręcznej przeglądarki.

Pole wyboru Wyłącz pamięć podręczną.

Wyłączanie pamięci podręcznej przeglądarki w schowku Warunki sieci

Jeśli chcesz wyłączyć pamięć podręczną podczas pracy w innych panelach DevTools, użyj szuflady Stan sieci.

  1. Kliknij ikonę Warunki sieci., aby otworzyć panel Stan sieci.
  2. Zaznacz lub odznacz pole wyboru Disable cache (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 Prośby i wybierz Wyczyść pamięć podręczną przeglądarki.

Wybieranie opcji Wyczyść pamięć podręczną przeglądarki.

Symulowanie trybu offline

Jest nowa klasa aplikacji internetowych, tzw. progresywne aplikacje internetowe, które mogą działać w trybie offline dzięki skryptom service worker. Podczas tworzenia aplikacji tego typu przydaje się możliwość szybkiego symulowania urządzenia bez połączenia z internetem.

Aby symulować całkowicie offline działanie sieci, w menu Ograniczenie przepustowości sieci obok pola wyboru Wyłącz pamięć podręczną kliknij Offline.

W menu wybierz tryb 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 emulować szybkie połączenie 4G, wolne połączenie 4G lub 3G, wybierz odpowiednią wstępną konfigurację w menu Ograniczanie na górze paska czynności.

Menu ograniczania przepustowości sieci z gotowymi ustawieniami.

Narzędzia programistyczne wyświetlają ikonę obok panelu Sieć, aby przypomnieć Ci, że ograniczenie jest włączone.

Tworzenie niestandardowych profili ograniczania przepustowości

Oprócz wstępnie ustawionych profili, takich jak wolne lub szybkie 4G, możesz też dodać własne profile ograniczania przepustowości:

  1. Otwórz menu Ograniczanie i wybierz Niestandardowe > Dodaj….
  2. Skonfiguruj nowy profil ograniczania, postępując zgodnie z instrukcjami w sekcji Ustawienia > Ograniczanie.
  3. W panelu Sieć wybierz nowy profil w menu Ograniczanie.

    Profil niestandardowy wybrany w menu ograniczania. W panelu Sieć pojawia się ikona ostrzeżenia.

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

ograniczać połączenia WebSocket,

Oprócz żądań HTTP od wersji 99 DevTools ogranicza również połączenia WebSocket.

Aby obserwować ograniczanie liczby połączeń WebSocket:

  1. Nawiązywanie nowego połączenia, np. za pomocą narzędzia testowego.
  2. W panelu Sieć wybierz Brak ograniczeń i wyślij wiadomość przez połączenie.
  3. Utwórz bardzo wolny profil ograniczania przepustowości, np. 10 kbit/s. Dzięki temu będziesz w stanie zauważyć różnicę.
  4. W panelu Sieć wybierz profil i wyślij kolejną wiadomość.
  5. Przełącz filtr WS, kliknij nazwę połączenia, otwórz kartę Wiadomości i sprawdź różnicę czasu między wysłanymi i odebranymi wiadomościami z ograniczeniem przepustowości i bez niego. Na przykład:

wiadomości wysyłanych i odtwarzanych z ograniczeniem przepustowości oraz bez niego.

Emulowanie wolnych połączeń sieciowych w schowku Warunki sieci

Jeśli chcesz ograniczyć połączenie z internetem podczas pracy w innych panelach DevTools, użyj szuflady Warunki sieciowe.

  1. Kliknij ikonę Warunki sieci., aby otworzyć panel Stan sieci.
  2. W menu Ograniczanie przepustowości sieci wybierz szybkość połączenia.

Ręczne czyszczenie plików cookie w przeglądarce

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

Wybieranie opcji Wyczyść pliki cookie w przeglądarce.

Zastępowanie nagłówków odpowiedzi HTTP

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

Zastąpienie klienta użytkownika

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

  1. Kliknij ikonę Warunki sieci., aby otworzyć panel Stan sieci.
  2. Wyczyść pole Wybierz automatycznie.
  3. Wybierz w menu opcję klienta użytkownika lub wpisz niestandardowy w polu.

Aby wyszukać w nagłówkach żądań, danych 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 naciśnij Control + F.
  2. Na karcie Szukaj wpisz zapytanie i naciśnij Enter. Opcjonalnie kliknij lub , aby odpowiednio włączyć wielkość liter lub wyrażenia regularne.

  3. Kliknij jeden z wyników wyszukiwania. W panelu Sieć żądanie, które pasuje do kryteriów, jest wyróżnione na żółto. Dodatkowo panel otwiera kartę Nagłówki lub Odpowiedź i wyróżnia dopasowany ciąg znaków, jeśli taki istnieje.

Karta Szukaj po prawej stronie w panelu Sieć.

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

Więcej informacji o wszystkich sposobach wyszukiwania w Narzędziach deweloperskich znajdziesz w artykule Wyszukiwanie: znajdowanie tekstu we wszystkich załadowanych 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.

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

Pole tekstowe Filtry i pole wyboru Odwracanie.

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

Możesz używać wielu właściwości jednocześnie, rozdzielając je spacjami. Na przykład mime-type:image/gif larger-than:1K wyświetla wszystkie pliki GIF o rozmiarze większym niż 1 kilobajt. Te filtry obejmujące wiele usług są równoważne operacjom AND. Operacje LUB nie są obsługiwane.

Poniżej znajduje się pełna lista obsługiwanych właściwości.

  • cookie-domain. Pokaż zasoby, które ustawiają określoną domenę pliku cookie.
  • cookie-name. Pokaż zasoby, które ustawiają określoną nazwę pliku cookie.
  • cookie-path. Pokaż zasoby, które ustawiają określoną ścieżkę pliku cookie.
  • cookie-value. Wyświetla 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. W DevTools menu autouzupełniania wypełnia się wszystkimi domenami, na które natrafił.
  • has-overrides. Pokaż prośby, które mają zastąpione content, headers, dowolne zastąpienia (yes) lub nie mają żadnych zastąpień (no). Do tabeli żądań możesz dodać odpowiednią kolumnę Ma zastąpienia.
  • has-response-header. Pokaż zasoby zawierające określony nagłówek odpowiedzi HTTP. W menu autouzupełniania w Narzędziach deweloperskich wyświetlają się wszystkie nagłówki odpowiedzi, które zostały znalezione.
  • is. Aby znaleźć zasoby WebSocket, użyj is:running.
  • larger-than. Pokaż zasoby, które są większe niż określony rozmiar w bajtach. Ustawienie wartości 1000 jest równoznaczne z ustawieniem wartości 1k.
  • method. Wyświetla zasoby, które zostały pobrane za pomocą określonej metody HTTP. W Narzędziach deweloperskich w menu automatycznego uzupełniania wyświetlają się wszystkie metody HTTP, z którymi się spotkały.
  • mime-type. Pokaż zasoby o określonym typie MIME. W Narzędziach deweloperskich w menu autouzupełniania wyświetlają się wszystkie typy MIME, z którymi się spotkał.
  • mixed-content. Pokaż wszystkie zasoby z mieszanymi treściami (mixed-content:all) lub tylko te, które są wyświetlane (mixed-content:displayed).
  • priority. Wyświetla zasoby, których poziom priorytetu jest zgodny z wybraną wartością.
  • resource-type. Wyświetla zasoby o określonym typie, np. obraz. W Narzędziach deweloperskich rozwijane menu autouzupełniania jest wypełniane wszystkimi typami zasobów, z którymi się spotkało.
  • response-header-set-cookie. Pokaż nieprzetworzone nagłówki Set-Cookie na karcie Problemy. Nieprawidłowe pliki cookie z nieprawidłowymi nagłówkami Set-Cookie zostaną oznaczone w panelu Sieć.
  • scheme. Pokaż zasoby pobrane przez niezabezpieczony protokół HTTP (scheme:http) lub zabezpieczony protokół HTTPS (scheme:https).
  • set-cookie-domain. Pokaż zasoby, które mają nagłówek Set-Cookie z atrybutem Domain o wartości zgodnej z podaną wartością. Narzędzia deweloperskie wypełniają autouzupełnianie wszystkimi domenami plików cookie, które zostały znalezione.
  • set-cookie-name. Pokaż zasoby, które mają nagłówek Set-Cookie o nazwie pasującej do określonej wartości. Narzędzie DevTools wypełnia autouzupełnianie wszystkimi nazwami plików cookie, które napotkało.
  • set-cookie-value. Wyświetl zasoby, które mają nagłówek Set-Cookie z wartością pasującą do określonej wartości. Narzędzia deweloperskie wypełniają autouzupełnianie wszystkimi wartościami plików cookie, które napotkały.
  • status-code. Wyświetlaj tylko zasoby, których kod stanu HTTP jest zgodny z podanym kodem. Narzędzie DevTools wypełnia menu autouzupełniania wszystkimi kodami stanu, które napotkało.
  • url. Wyświetl zasoby, których url odpowiada określonej wartości.

Filtrowanie żądań według typu

Aby filtrować żądania według typu zasobu, w panelu Sieć kliknij przyciski Wszystkie, Pobieranie/XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest lub Inne (dowolny inny typ niewymieniony tutaj)

Jeśli nie widzisz tych przycisków, prawdopodobnie pasek działań Filtry jest ukryty. 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 typów filtrów.

Używanie filtrów typów do wyświetlania zasobów CSS i dokumentów.

Filtrowanie żądań 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 czasie. Filtr obejmuje zakres. Wyświetlane są wszystkie żądania, które były aktywne w wyróżnionym czasie.

Odfiltrowywanie żądań, które nie były aktywne przez 21–25 ms.

Ukrywanie adresów URL danych

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

Aby ukryć te żądania, na pasku czynności Filtry kliknij Więcej filtrów > Ukryj adresy URL danych.

Adresy URL danych są ukryte w tabeli żądań.

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

Ukrywanie adresów URL rozszerzeń

Aby skupić się na tworzonym przez siebie kodzie, możesz odfiltrowywać nieistotne żądania wysyłane przez rozszerzenia zainstalowane w Chrome. Adresy URL żądań rozszerzeń zaczynają się od chrome-extension://.

Aby ukryć prośby o rozszerzenie, na pasku działań Filtry wybierz Więcej filtrów > Ukryj adresy URL rozszerzeń.

Adresy URL rozszerzeń są ukryte w tabeli Żądania.

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

Pokaż tylko żądania z zablokowanymi plikami cookie odpowiedzi

Aby odfiltrować wszystko oprócz żądań z plikami cookie odpowiedzi zablokowanymi z dowolnego powodu, na pasku czynności Filtry wybierz Więcej filtrów > Zablokowane pliki cookie odpowiedzi. Wypróbuj to na stronie demonstracyjnej.

Tabela Żądania zawiera tylko żądania z zablokowanymi plikami cookie odpowiedzi.

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

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

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

Ikony ostrzeżenia obok żądania zablokowanego przez flagi lub konfigurację Chrome.

Pokazuj tylko zablokowane żądania

Aby odfiltrować wszystko oprócz zablokowanych żądań, na pasku czynności Filtry wybierz Więcej filtrów > Zablokowane żądania. Aby to przetestować, otwórz w drawerze kartę Blokowanie żądań sieciowych.

Tabela Żądania zawiera tylko zablokowane żądania.

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

Pokaż tylko żądania od osób trzecich

Aby odfiltrować wszystko oprócz żądań o pochodzeniu innym niż strona, na pasku czynności Filtry kliknij Więcej filtrów > Żądania stron. Wypróbuj to na stronie demonstracyjnej.

Tabela Żądania zawiera tylko żądania pochodzące z zewnętrznych źródeł.

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

Sortowanie żądań

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

Sortowanie według kolumny

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

Sortowanie według fazy aktywności

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

  • Czas rozpoczęcia. Pierwsze żądanie jest na górze.
  • Czas odpowiedzi. Pierwsze żądanie, które rozpoczęło pobieranie, znajduje się u góry.
  • Czas zakończenia. Pierwsze zakończone żądanie znajduje się u góry.
  • Całkowity czas trwania. Prośba z najkrótszym ustawieniem połączenia i żądaniem / odpowiedzią jest na górze.
  • Czas oczekiwania. Prośba, która czekała na odpowiedź najkrócej, znajduje się na górze.

W przypadku tych opisów zakładamy, że każda opcja jest uszeregowana 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. Jasna część każdego paska to czas oczekiwania. Ciemniejsza część to czas pobierania bajtów.

Sortowanie drabinki według łącznego czasu trwania.

Analizowanie żądań

Dopóki narzędzia deweloperskie są otwarte, rejestrują wszystkie żądania 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 podczas korzystania z Narzędzi deweloperskich. Kliknięcie żądania lub najechanie na nie kursorem spowoduje wyświetlenie dodatkowych informacji.

Tabela Prośby.

Tabela Żądania domyślnie zawiera te kolumny:

  • Nazwa: Nazwa pliku lub identyfikator zasobu.
  • Stan. Ta kolumna może zawierać te wartości:

    różne wartości w kolumnie Stan.

    • Kod stanu HTTP, np. 200 lub 404.
    • CORS error w przypadku żądań, które nie zostały zrealizowane 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ą, co poszło nie tak.
    • (failed), a następnie komunikat o błędzie.
  • Typ. Typ MIME żądanego zasobu.

  • Inicjator. Żądania mogą inicjować te obiekty lub procesy:

    • Parsowanie. Parsowanie HTML w Chrome.
    • Przekierowanie. przekierowanie HTTP;
    • Skrypt. Funkcja JavaScript.
    • 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, jaką dostarcza serwer.

  • Czas. Łączny czas, od początku żądania do otrzymania ostatniego bajtu odpowiedzi.

  • Wodospad. Wizualne zestawienie aktywności związanej z każdą prośbą.

Dodaj lub usuń kolumny

Kliknij prawym przyciskiem nagłówek tabeli Prośby i wybierz opcję, aby ją ukryć lub wyświetlić. Wyświetlone opcje mają obok siebie znaczniki wyboru.

dodawanie lub usuwanie kolumny w tabeli Prośby o uprawnienia.

Możesz dodawać i usuwać te dodatkowe kolumny: Ścieżka, URL, Metoda, Protokół, Schemat, Domena, Adres zdalny, Przestrzeń adresów zdalnych, Przestrzeń adresów inicjatora, Pliki cookie, Zbiór plików cookie, Priorytet, Identyfikator połączenia, Zawiera zastąpieniaKaskada.

Dodawanie kolumn niestandardowych

Aby dodać do tabeli Prośby kolumnę niestandardową:

  1. Kliknij prawym przyciskiem nagłówek tabeli Prośby i wybierz Nagłówki odpowiedzi > Zarządzaj kolumnami nagłówka.
  2. W oknie dialogowym kliknij Dodaj niestandardowy nagłówek, wpisz jego nazwę i kliknij Dodaj.

dodanie do tabeli żądań kolumny niestandardowej,

Grupowanie żądań według ramek w tekście

Jeśli ramki osadzone na stronie inicjują wiele żądań, możesz ułatwić sobie odczyt dziennika żądań, zgrupowując je.

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

Log żądań sieciowych z żądaniami pogrupowanymi według ramek iframe.

Aby wyświetlić żądanie rozpoczęte przez ramkę wbudowaną, rozwiń je w logu żądań.

wyświetlać czas wysyłania żądań w relacji do siebie nawzajem.

W sekcji Kaskada możesz sprawdzać czasy realizacji żądań w relacji do siebie. Domyślnie kaskada jest uporządkowana według czasu rozpoczęcia żądań. Oznacza to, że prośby, które znajdują się dalej w lewo, rozpoczęły się wcześniej niż te, które znajdują się dalej w prawo.

Aby dowiedzieć się, jak można sortować schemat kaskadowy, zobacz sekcję Sortowanie według fazy aktywności.

Kolumna Kaskada na karcie Prośby.

Analizowanie wiadomości w połączeniu WebSocket

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

  1. W kolumnie Nazwa w tabeli Prośby kliknij adres URL połączenia WebSocket.
  2. Kliknij kartę Wiadomości. Tabela zawiera ostatnie 100 wiadomości.

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

Karta Wiadomości.

Tabela zawiera 3 kolumny:

  • Dane. ładunek wiadomości; Jeśli wiadomość jest zwykłym tekstem, wyświetla się tutaj. W przypadku binarnych instrukcji kodu maszynowego w tej kolumnie wyświetla się nazwa i kod instrukcji. 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 wysłania lub odbierania wiadomości.

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

  • Wysyłane SMS-y są w jasnozielonym kolorze.
  • SMS-y przychodzące są białe.
  • Kody operacji WebSocket są wyświetlane na żółto.
  • Błędy są oznaczone jasnoczerwonym kolorem.

Analizowanie zdarzeń w strumieniu

Aby wyświetlić zdarzenia przesyłane przez serwer przez Fetch API, EventSource API i XHR:

  1. Rejestruj żądania sieci na stronie, na której przesyłasz strumieniowo zdarzenia. Otwórz na przykład tę stronę demonstracyjną i kliknij dowolny z 3 przycisków.
  2. W sekcji Sieć wybierz żądanie i otwórz kartę Potok danych.

Karta EventStream.

Aby filtrować zdarzenia, na pasku filtra u góry karty EventStream podaj wyrażenie regularne.

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

Wyświetlanie podglądu treści odpowiedzi

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

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

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

Karta Podgląd.

Wyświetlanie treści odpowiedzi

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

  1. W kolumnie Nazwa w tabeli żądań kliknij adres URL żądania.
  2. Kliknij kartę Odpowiedź.

Karta Odpowiedź.

Wyświetlanie nagłówków HTTP

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

  1. Kliknij prośbę 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 wczesnych podpowiedzi.

Karta Nagłówki żądania wybranego w tabeli Żądania.

W sekcji Ogólne narzędzia deweloperskie wyświetlają wiadomość o stanie w formie zrozumiałej dla człowieka obok otrzymanego kodu stanu HTTP.

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ś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 w przypadku interesującego Cię zapytania. 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 dotyczące nagłówków prowizorycznych

Czasami na karcie Nagłówki wyświetla się komunikat 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ć pamięć podręczną, aby zobaczyć pełne nagłówki żądania. Komunikat ostrzeżenia dotyczący nagłówków prowizorycznych.

  • Zasób sieci jest nieprawidłowy. Na przykład w Konsoli wykonaj polecenie fetch("https://jec.fish.com/unknown-url/"). Komunikat ostrzeżenia dotyczący nagłówków prowizorycznych.

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

Wyświetlanie ładunku prośby

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

Karta Payload.

Wyświetlanie źródła ładunku

Domyślnie narzędzia dla programistów 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.

przyciski wyświetlania źródła.

Wyświetlanie argumentów parametrów ciągu zapytania po dekodowaniu z adresu URL

Aby przełączyć kodowanie argumentów, na karcie Ładunek kliknij wyświetl dekodowane lub wyświetl zakodowane URL-em.

przełączać kodowanie adresu URL,

Wyświetlanie plików cookie

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

  1. W kolumnie Nazwa w tabeli żądań kliknij adres URL żądania.
  2. Kliknij kartę Pliki cookie.

Karta Pliki cookie.

Opis poszczególnych kolumn znajdziesz w sekcji Pola.

Aby zmienić pliki cookie, zapoznaj się z artykułem Wyświetlanie, edytowanie i usuwanie plików cookie.

Wyświetlanie zestawienia czasu przetwarzania prośby

Aby wyświetlić zestawienie czasu żądania:

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

Aby szybciej uzyskać dostęp do tych danych, zapoznaj się z artykułem Podgląd podziału na etapy.

Karta Czas.

Więcej informacji o każdej z tych faz, które możesz zobaczyć na karcie Czas, znajdziesz w artykule Wyjaśnienie faz zestawienia czasu.

Podgląd zestawienia czasu

Aby wyświetlić podgląd podziału na etapy realizacji żądania, na karcie Żądania najedź kursorem na wpis żądania w kolumnie Kaskada.

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

Podgląd zestawienia czasu realizacji prośby

Omówienie etapów podziału na etapy

Oto więcej informacji o każdej z faz, które mogą się pojawić na karcie Harmonogram:

  • Kolejka. Przeglądarka umieszcza żądania w kolejce przed rozpoczęciem połączenia i w tych przypadkach:
    • Masz żądania o wyższym priorytecie. Priorytet żądania jest określany na podstawie takich czynników jak typ zasobu oraz jego lokalizacja w dokumencie. Więcej informacji znajdziesz w sekcji o priorytetach zasobów w przewodniku fetchpriority.
    • W przypadku tego źródła jest już 6 otwartych połączeń TCP, a to jest limit. (Dotyczy tylko protokołów HTTP/1.0 i HTTP/1.1).
    • Przeglądarka tymczasowo przydziela miejsce w pamięci podręcznej dysku.
  • Zatrzymanie. Po rozpoczęciu nawiązywania połączenia żądanie może zostać wstrzymane z dowolnego powodu opisanego w sekcji Kolejka.
  • Wyszukiwanie DNS. Przeglądarka rozwiązuje adres IP żądania.
  • Początkowe połączenie. Przeglądarka nawiązuje połączenie, w tym uzgadnianie połączenia TCP lub ponowne próby i negocjacje SSL.
  • Negocjacje dotyczące proxy. Przeglądarka negocjuje żądanie z serwerem proxy.
  • Prośba wysłana. Prośba jest wysyłana.
  • Przygotowanie Service Worker. Przeglądarka uruchamia pracownika usługi.
  • Żądanie do ServiceWorker. Żądanie jest wysyłane do usługi.
  • Oczekiwanie (TTFB). Przeglądarka czeka na pierwszy bajt odpowiedzi. TTFB to skrót od „czas do pierwszego bajtu”. Ten czas obejmuje 1 okrąg opóźnienia i czas potrzebny serwerowi na przygotowanie odpowiedzi.
  • Pobranie treści. Przeglądarka otrzymuje odpowiedź bezpośrednio z sieci lub od service workera. Ta wartość to łączny czas odczytania treści odpowiedzi. Większe wartości mogą wskazywać na wolną sieć lub na to, że przeglądarka jest zajęta wykonywaniem innych zadań, co opóźnia odczyt odpowiedzi.

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

Aby wyświetlić inicjatorów i zależności prośby, przytrzymaj klawisz Shift i najedź kursorem na prośbę w tabeli „Prośby”. W Narzędziach deweloperskich inicjatory są zaznaczone na zielono, a zależności na czerwono.

Wyświetlanie inicjatorów i zależności żądania.

Gdy tabela Żądania jest posortowana chronologicznie, pierwsze zielone żądanie nad żądaniem, nad którym się zatrzymujesz kursorem, jest inicjatorem zależności. Jeśli nad nim znajduje się jeszcze inne zielone żądanie, to żądanie o wyższym priorytecie jest inicjatorem inicjatora. I tak dalej.

Wyświetlanie zdarzeń wczytywania

Narzędzia programistyczne wyświetlają czas trwania zdarzeń DOMContentLoadedload w różnych miejscach w panelu Sieć. Zdarzenie DOMContentLoaded jest zaznaczone na niebiesko, a zdarzenie load – na czerwono.

Lokalizacje zdarzeń DOMContentLoaded i load w panelu Sieć.

Wyświetlanie łącznej liczby żądań

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

Łączna liczba żądań od momentu otwarcia Narzędzi deweloperskich.

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

Narzędzia deweloperskie podają łączny rozmiar zasobów przeniesionych i załadowanych (nieskompresowanych) na pasku stanu u dołu panelu Sieć.

Łączny rozmiar przeniesionych i wczytanych zasobów.

Aby sprawdzić, jak duże są zasoby po rozpakowaniu przez przeglądarkę, zapoznaj się z artykułem Wyświetlanie rozmiaru nieskompresowanego zasobu.

Wyświetlanie ścieżki wywołania, która spowodowała żądanie

Gdy instrukcja JavaScript powoduje zażądanie zasobu, najedź kursorem na kolumnę Initiator (Inicjator), aby wyświetlić ślad stosu prowadzący do żądania.

Ślad stosu prowadzący do żądania zasobu.

Wyświetlanie rozmiaru nieskompresowanego zasobu

Otwórz Ustawienia Ustawienia. > Wyraźnie większe żądania i sprawdź wartość w dolnej części kolumny Rozmiar.

Przykład nieskompresowanych zasobów.

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

Eksportowanie danych o żądaniach

Listę żądań z zastosowaniem filtrów możesz wyeksportować lub skopiować na kilka opisanych poniżej sposobów.

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. Format to obiekt JSON z określonym zestawem pól.

Aby zmniejszyć ryzyko przypadkowego wycieku informacji poufnych, możesz domyślnie eksportować „oczyszczony” log sieci w formacie HAR, który wyklucza informacje poufne, takie jak nagłówki Cookie, Set-CookieAuthorization. W razie potrzeby możesz też wyeksportować dziennik z danymi poufnymi.

Aby zapisać wszystkie żądania sieciowe w pliku HAR, wybierz jedną z tych 2 metod:

  • Kliknij prawym przyciskiem myszy dowolne żądanie w tabeli Żądania i kliknij Kopiuj > Zapisz wszystko [wymienione] jako HAR (oczyszczone) lub Zapisz wszystko [wymienione] jako HAR (z danymi poufnymi).

    Wybranie opcji „Zapisz wszystkie wymienione jako plik HAR (po usunięciu danych poufnych)”.

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

    Aby wyeksportować dane poufne, najpierw włącz Ustawienia > Ustawienia > Sieć > Zezwalaj na generowanie HAR z danymi poufnymi, a następnie kliknij Eksportuj i w menu kliknij Eksportuj HAR (z danymi poufnymi).

    Przycisk „Eksportuj HAR” na pasku czynności u góry z 2 aktywnymi opcjami eksportu.

Gdy masz już plik HAR, możesz go zaimportować z powrotem do DevTools na potrzeby analizy na 2 sposoby:

  • Przeciągnij i upuszczaj plik HAR w tabeli Żądania.
  • Na pasku czynności u góry panelu Sieć kliknij Importuj HAR.

kopiowanie do schowka żądania, przefiltrowanego zbioru żądań lub wszystkich żądań;

W kolumnie Nazwa w tabeli Żądania kliknij żądanie prawym przyciskiem myszy, najedź na opcję Kopiuj i wybierz jedną z podanych niżej opcji.

Aby skopiować pojedyncze żądanie, jego odpowiedź lub ślad stosu:

  • Kopiuj adres URL. Skopiuj adres URL prośby do schowka.
  • Kopiuj jako cURL. Skopiuj żądanie jako polecenie cURL.
  • Kopiuj jako PowerShell. Skopiuj żądanie jako polecenie PowerShell.
  • Kopiowanie jako pobieranie. Skopiuj żądanie jako wywołanie funkcji pobierania.
  • Kliknij Skopiuj jako: „pobieranie” (Node.js). Skopiuj żądanie jako wywołanie funkcji fetch w Node.js.
  • Kopiowanie odpowiedzi. Skopiuj treść odpowiedzi do schowka.
  • Kopiowanie zrzutu stosu. Skopiuj ścieżkę śledzenia do schowka.

Aby skopiować wszystkie żądania:

  • Skopiuj wszystkie adresy URL. Skopiuj adresy URL wszystkich żądań do schowka.
  • Skopiuj wszystko jako cURL. Skopiuj wszystkie żądania jako łańcuch poleceń cURL.
  • Skopiuj wszystko jako PowerShell. Skopiuj wszystkie żądania jako łańcuch poleceń PowerShell.
  • Kopiowanie wszystkiego jako pobrania. Skopiuj wszystkie żądania jako łańcuch wywołań fetch.
  • Skopiuj wszystko jako pobranie (Node.js). Skopiuj wszystkie żądania jako łańcuch wywołań funkcji fetch w Node.js.
  • Skopiuj wszystko jako HAR (po usunięciu danych poufnych). Skopiuj wszystkie żądania jako dane HAR bez danych wrażliwych, takich jak nagłówki Cookie, Set-CookieAuthorization.
  • Kopiuj wszystko jako HAR (z danymi poufnymi). Skopiuj wszystkie żądania jako dane HAR z danymi poufnymi.

Opcje kopiowania wszystkich próśb.

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

  • Skopiuj wszystkie wymienione adresy URL. Skopiuj do schowka adresy URL wszystkich przefiltrowanych żądań.
  • Skopiuj wszystkie wymienione jako cURL. Skopiuj wszystkie przefiltrowane żądania jako łańcuch poleceń cURL.
  • Skopiuj wszystko jako PowerShell. Skopiuj wszystkie przefiltrowane żądania jako łańcuch poleceń PowerShell.
  • Skopiuj wszystkie wymienione jako „pobieranie”. Skopiuj wszystkie przefiltrowane żądania jako łańcuch wywołań fetch.
  • Skopiuj wszystko jako pobranie (Node.js). Skopiuj wszystkie przefiltrowane żądania jako łańcuch wywołań funkcji pobrania Node.js.
  • Skopiuj wszystko 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-CookieAuthorization.
  • Skopiuj wszystkie wymienione jako plik HAR (z danymi poufnymi). Skopiuj wszystkie przefiltrowane żądania jako dane HAR z danymi poufnymi.

Opcje kopiowania dla odfiltrowanego zbioru żądań.

Zmienianie układu panelu Sieć

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

Ukrywanie paska działań Filtry

Domyślnie w Narzędziach deweloperskich w górnej części panelu Sieć wyświetla się pasek filtrów. Aby go ukryć, kliknij Filtr.

Przycisk Ukryj filtry

Używanie wierszy dużych żądań

Używaj dużych wierszy, jeśli chcesz uzyskać więcej pustej przestrzeni w tabeli żądań sieci. Niektóre kolumny zawierają też więcej informacji, gdy używasz dużych wierszy. Na przykład najniższa wartość w kolumnie Rozmiar to rozmiar nieskompresowanego żądania, a kolumna Priorytet pokazuje zarówno początkowy (najniższy) jak i końcowy (najwyższy) priorytet pobierania.

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

Duże wiersze żądań zostały włączone.

Ukrywanie ścieżki Przegląd

Domyślnie narzędzia dla deweloperów wyświetlają ścieżkę Przegląd. Otwórz Ustawienia Ustawienia. i odznacz pole wyboru Pokaż podsumowanie, aby je ukryć.

Pole wyboru Pokaż przegląd.