Informacje o funkcjach sieci

Kayce Basques

Sofia Emelianova

Poznaj nowe sposoby analizowania wczytywania strony w tym obszernym 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 rejestrowanie 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

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

Zapisywanie żądań po wczytaniu stron

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

Wykonaj zrzuty ekranu podczas ładowania 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 zaznacz Rób zrzuty ekranu.

Aby zrobić zrzuty ekranu, załaduj ponownie stronę, gdy panel Sieć jest aktywny.

Po wykonaniu zrzutu ekranu możesz z nim wchodzić w interakcję na te sposoby:

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

Powtórz żądanie XHR

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

• Wybierz prośbę i naciśnij R.
• Kliknij prawym przyciskiem myszy żądanie i wybierz Replay XHR (Odtwórz ponownie XHR).

Zmiana sposobu wczytywania

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

Aby zasymulować sposób, w jaki witryna jest odbierana przez użytkowników odwiedzających ją po raz pierwszy, zaznacz pole wyboru Wyłącz pamięć podręczną. Narzędzia deweloperskie wyłączają pamięć podręczną przeglądarki. Dokładniej odzwierciedla to wrażenia użytkownika, który korzysta z aplikacji po raz pierwszy, ponieważ w przypadku kolejnych wizyt żądania są obsługiwane z pamięci podręcznej przeglądarki.

Wyłącz pamięć podręczną przeglądarki w panelu Warunki sieci

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

1. Kliknij ikonę , aby otworzyć panel Stan sieci.
2. Zaznacz lub odznacz pole wyboru 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.

Emulowanie trybu offline

Istnieje nowa klasa aplikacji internetowych, zwana progresywnymi aplikacjami internetowymi, które mogą działać w trybie 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ć działanie sieci całkowicie offline, w menu Ograniczanie przepustowości 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 emulować szybkie 4G, wolne 4G lub 3G, wybierz odpowiednie ustawienie wstępne z menu Ograniczanie przepustowości na pasku działań u góry.

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

Tworzenie niestandardowych profili ograniczania

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 WebSocket:

1. Nawiąż nowe połączenie, np. za pomocą narzędzia testowego.
2. W panelu Sieć wybierz Brak ograniczania przepustowości i wyślij wiadomość przez połączenie.
3. Utwórz bardzo wolny profil niestandardowego ograniczania przepustowości, np. 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 odebranymi wiadomościami z ograniczaniem przepustowości i bez niego. Na przykład:

Emulowanie wolnych 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. W menu Ograniczanie przepustowości sieci wybierz szybkość połączenia.

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 klienta użytkownika z menu lub wpisz niestandardowego 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 naciśnij Ctrl + 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ć na żółto zostanie wyróżnione żądanie, które pasuje do warunków. Otwiera też kartę Nagłówki lub Odpowiedź i podświetla w niej 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 Zablokuj 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.

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

Możesz używać kilku 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ą odpowiednikami operacji ORAZ. 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ą określoną domenę pliku cookie.
• cookie-name. Wyświetl zasoby, które ustawiają określony nazwę pliku cookie.
• cookie-path. Wyświetl zasoby, które ustawiają konkretną ścieżkę pliku cookie.
• cookie-value. Wyświetl zasoby, które ustawiają konkretną 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świetlaj żą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ę Zawiera 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 napotkały.
• is. Użyj is:running, aby znaleźć zasoby WebSocket.
• larger-than. Wyświetla zasoby większe niż określony rozmiar w bajtach. Ustawienie wartości 1000 jest równoznaczne z ustawieniem wartości 1k.
• method. Wyświetl zasoby 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 napotkanymi typami MIME.
• mixed-content. Wyświetl wszystkie zasoby z treściami mieszanymi (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. Wyświetlanie nieprzetworzonych nagłówków Set-Cookie na karcie Problemy. Nieprawidłowe pliki cookie z nieprawidłowymi nagłówkami Set-Cookie będą oznaczone w panelu Sieć.
• scheme. Wyświetl zasoby pobrane za pomocą niezabezpieczonego protokołu HTTP (scheme:http) lub zabezpieczonego protokołu HTTPS (scheme:https).
• set-cookie-domain. Wyświetl zasoby, które mają nagłówek Set-Cookie z atrybutem Domain pasującym do podanej 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 podanej 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 określoną 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ę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.

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

Ukryj adresy URL danych

Adresy URL danych to małe pliki osadzone w innych dokumentach. Każde żądanie w tabeli Żądania, które zaczyna się od znaku 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 pokazuje liczbę wyświetlonych żądań na tle wszystkich żą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ć prośby o rozszerzenie, na pasku działań Filtry wybierz Więcej filtrów > check_box Ukryj adresy URL rozszerzeń.

Pasek stanu u dołu pokazuje liczbę wyświetlonych żądań na tle wszystkich żądań.

Pokaż tylko żądania z zablokowanymi plikami cookie odpowiedzi

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

Pasek stanu u dołu pokazuje liczbę wyświetlonych żądań na tle wszystkich żądań.

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

Dodatkowo w panelu Sieć obok żądania z plikami cookie zablokowanymi z powodu flag Chrome lub konfiguracji przeglądarki wyświetla się ikona ostrzeżenia. Najedź kursorem na ikonę, aby wyświetlić poradę z wskazówką, a następnie 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 kliknij Więcej filtrów > check_box Zablokowane żądania. Aby to sprawdzić, możesz użyć karty Blokowanie żądań sieciowych w panelu.

W tabeli Żądania zablokowane żądania są wyróżnione na czerwono. Pasek stanu u dołu pokazuje liczbę wyświetlonych żądań na tle wszystkich żą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 kliknij Więcej filtrów > check_box Żądania do firm zewnętrznych.

Pasek stanu u dołu pokazuje liczbę wyświetlonych żądań na tle wszystkich żądań.

Sortowanie próśb

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

Sortowanie według kolumny

Kliknij nagłówek dowolnej kolumny w tabeli Prośby, aby posortować prośby według tej kolumny.

Sortuj według fazy aktywności

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

• Godzina rozpoczęcia U góry znajduje się pierwsze zainicjowane żądanie.
• Czas odpowiedzi U góry znajduje się pierwsze żądanie, które rozpoczęło pobieranie.
• Godzina zakończenia U góry znajduje się pierwsze żądanie, które zostało zrealizowane.
• Całkowity czas trwania. U góry znajduje się żądanie z najkrótszym czasem konfiguracji połączenia oraz żądania i odpowiedzi.
• Czas oczekiwania U góry znajduje się żądanie, które najkrócej czekało na odpowiedź.

Opisy te zakładają, że poszczególne opcje są uszeregowane od najkrótszej do najdłuższej. Kliknięcie nagłówka kolumny Waterfall (Wykres kaskadowy) 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ń

Gdy Narzędzia deweloperskie są otwarte, rejestrują wszystkie żądania w panelu Sieć. Do analizowania żądań używaj panelu Sieć.

Wyświetlanie logu żądań

W tabeli Żądania możesz wyświetlić log wszystkich żądań wysłanych podczas otwarcia Narzędzi deweloperskich. Kliknięcie lub najechanie kursorem na żądania powoduje wyświetlenie dodatkowych informacji o nich.

Domyślnie tabela Żądania 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 zostały zrealizowane z powodu współdzielenia zasobów pomiędzy serwerami z różnych domen (CORS).
  • (blocked:origin) w przypadku żądań z błędnie 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:

  • Parser Parser HTML 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 dostarczonych przez serwer.

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

• Kaskada Wizualne zestawienie aktywności każdego żądania.

Dodaj lub usuń kolumny

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

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

Dodawanie kolumn niestandardowych

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

1. Kliknij prawym przyciskiem myszy nagłówek tabeli Requests (Żądania) i wybierz Response Headers (Nagłówki odpowiedzi) > Manage Header Columns (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 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ę wbudowaną, rozwiń je w logu żą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ń. Prośby znajdujące się bardziej po lewej stronie rozpoczęły się wcześniej niż te, które są bardziej po prawej stronie.

Więcej informacji o różnych sposobach sortowania wykresu kaskadowego znajdziesz w sekcji Sortowanie według fazy aktywności.

Analizowanie wiadomości połączenia WebSocket

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

1. W kolumnie Nazwa w tabeli Żądania kliknij adres URL połączenia WebSocket.
2. Kliknij kartę Wiadomości. Tabela zawiera 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 w formacie zwykłego tekstu, będzie wyświetlana tutaj. W przypadku kodów operacji binarnych w tej kolumnie wyświetla się 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.
• Godzina. Godzina odebrania lub wysłania wiadomości.

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

• Wiadomości wychodzące są oznaczone jasnym kolorem zielonym.
• Przychodzące 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ą 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, w pasku filtra u góry karty EventStream wpisz wyrażenie regularne.

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

Wyświetlanie podglądu treści odpowiedzi

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

1. W kolumnie Nazwa w tabeli Żądania kliknij adres URL żądania.
2. Kliknij 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. W kolumnie Nazwa w tabeli Żądania kliknij adres URL żądania.
2. Kliknij kartę Odpowiedź.

Wyświetlanie nagłówków HTTP

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

1. W tabeli Prośby kliknij prośbę.
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 wskazówek.

W sekcji Ogólne Narzędzia deweloperskie wyświetlają czytelny komunikat o stanie obok otrzymanego kodu stanu HTTP.

W sekcji Nagłówki odpowiedzi możesz najechać kursorem na wartość nagłówka i kliknąć przycisk edytowania 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. Obok sekcji Nagłówek żądania lub Nagłówek odpowiedzi kliknij wyświetl źródło.

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 sieciowy 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 z 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 z formularza, na karcie Ładunek kliknij wyświetl źródło obok sekcji Parametry ciągu zapytania lub Dane z formularza.

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

Aby przełączać kodowanie URL argumentów, na karcie Ładunek kliknij Wyświetl zdekodowane lub Wyświetl zakodowane w URL-u.

Wyświetlanie plików cookie

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

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

Opis poszczególnych kolumn znajdziesz w sekcji Pola.

Aby zmodyfikować pliki cookie, przeczytaj artykuł Wyświetlanie, edytowanie i usuwanie plików cookie.

Wyświetlanie szczegółowego rozkładu czasu trwania żądania

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

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

Aby szybciej uzyskać dostęp do tych danych, zapoznaj się z sekcją 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 Wyjaśnienie faz podziału czasu.

Podgląd zestawienia czasu

Aby wyświetlić podgląd podziału czasu żądania, najedź kursorem na wpis żądania w kolumnie Waterfall w tabeli Żądania.

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

Wyjaśnienie etapów podziału czasowego

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

• Kolejkowanie Przeglądarka kolejkuje żądania przed rozpoczęciem połączenia i gdy:
  • Istnieją żądania o wyższym priorytecie. Priorytet żądania jest określany na podstawie czynników takich jak typ zasobu i jego lokalizacja w dokumencie. Więcej informacji znajdziesz w sekcji dotyczącej priorytetu zasobów w przewodniku fetchpriority.
  • Dla tego źródła 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.
• Wstrzymane Żą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.
• Pierwsze połączenie Przeglądarka nawiązuje połączenie, w tym uzgadnianie połączenia TCP lub ponawianie prób i negocjowanie protokołu SSL.
• Negocjacje przez pełnomocnika Przeglądarka negocjuje żądanie z serwerem proxy.
• Prośba wysłana. Prośba jest wysyłana.
• Przygotowanie ServiceWorker. Przeglądarka uruchamia usługę 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 rundę czasu oczekiwania i czas potrzebny serwerowi na przygotowanie odpowiedzi.
• Pobieranie treści Przeglądarka otrzymuje odpowiedź bezpośrednio z sieci lub od komponentu Service Worker. Jest to łączny czas spędzony na czytaniu 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ą inicjatorów 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 myszy, jest inicjatorem zależności. Jeśli powyżej znajduje się inne zielone żądanie, to żądanie wyższego poziomu 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ć.

Uwaga: Uwaga: ta liczba śledzi tylko żądania, które zostały zarejestrowane od momentu otwarcia Narzędzi deweloperskich. Jeśli przed otwarciem Narzędzi deweloperskich wystąpiły inne żądania, nie są one uwzględniane.

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

Uwaga: Uwaga: ta liczba śledzi tylko żądania, które zostały zarejestrowane od momentu otwarcia Narzędzi deweloperskich. Jeśli przed otwarciem Narzędzi deweloperskich wystąpiły inne żądania, nie są one uwzględniane.

Więcej informacji o tym, jak duże są zasoby po rozpakowaniu przez przeglądarkę, znajdziesz w artykule Wyświetlanie rozmiaru zasobu po rozpakowaniu.

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

Gdy instrukcja JavaScriptu spowoduje zażądanie zasobu, najedź kursorem na kolumnę Inicjator, aby wyświetlić ślad stosu prowadzący do żądania.

Wyświetlanie nieskompresowanego rozmiaru zasobu

Kliknij kolejno Ustawienia  Wiersze dużych żądań, a potem sprawdź dolną wartość w kolumnie 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ę żądań 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 sposobów:

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

  

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

  Aby wyeksportować dane poufne, najpierw włącz ustawienia Ustawienia > Preferencje > Sieć > check_box Zezwalaj na generowanie pliku HAR z danymi poufnymi, a potem kliknij przycisk pobierania Eksportuj i w menu wybierz Eksportuj plik HAR (z danymi poufnymi).

  

Gdy masz już plik HAR, możesz go zaimportować z powrotem do Narzędzi deweloperskich w celu analizy 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.

Uwaga: panel Sieć odczytuje i wyświetla inicjatorów żądań zaimportowanych z plików HAR.

Kopiowanie do schowka żądania, przefiltrowanego zestawu żądań lub wszystkich żądań

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

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

• Skopiuj 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 pobranie. Skopiuj żądanie jako wywołanie pobierania.
• Skopiuj jako pobranie (Node.js). Skopiuj żądanie jako wywołanie pobierania Node.js.
• Skopiuj odpowiedź. Skopiuj treść odpowiedzi do schowka.
• Kopiuj zrzut stosu. Skopiuj śledzenie stosu żądania 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 ciąg poleceń cURL.
• Skopiuj wszystko jako PowerShell. Skopiuj wszystkie żądania jako ciąg poleceń PowerShell.
• Skopiuj wszystko jako pobranie. Skopiuj wszystkie żądania jako łańcuch wywołań pobierania.
• Skopiuj wszystko jako pobranie (Node.js). Skopiuj wszystkie żądania jako łańcuch wywołań pobierania Node.js.
• Skopiuj wszystko jako HAR (po usunięciu danych poufnych). Skopiuj wszystkie żądania jako dane HAR bez danych poufnych, takich jak nagłówki Cookie, Set-Cookie i Authorization.
• Skopiuj wszystko jako HAR (z danymi poufnymi). Skopiuj wszystkie żądania jako dane HAR z danymi poufnymi.

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 ciąg poleceń cURL.
• Skopiuj wszystkie wymienione jako PowerShell. Skopiuj wszystkie przefiltrowane żądania jako ciąg poleceń PowerShell.
• Skopiuj wszystkie wymienione jako pobranie. Skopiuj wszystkie przefiltrowane żądania jako łańcuch wywołań pobierania.
• Skopiuj wszystkie wymienione jako pobranie (Node.js). Skopiuj wszystkie przefiltrowane żądania jako łańcuch wywołań pobierania Node.js.
• Skopiuj wszystkie wymienione jako HAR (po usunięciu danych poufnych). Skopiuj wszystkie przefiltrowane żądania jako dane HAR bez danych poufnych, takich jak nagłówki Cookie, Set-Cookie i Authorization.
• Skopiuj wszystkie wymienione jako HAR (z danymi poufnymi). Skopiuj wszystkie przefiltrowane żądania jako dane HAR z danymi poufnymi.

Zmiana 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 miejsca w tabeli żądań sieciowych. Niektóre kolumny dostarczają też nieco więcej informacji w przypadku używania dużych wierszy. Na przykład dolna wartość w kolumnie Rozmiar to nieskompresowany rozmiar żądania, a kolumna Priorytet zawiera 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ądu

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