Informacje o funkcjach sieci

Kayce Basques

Sofia Emelianova

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

Rejestrowanie żądań sieciowych

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

Zatrzymaj rejestrowanie żądań sieciowych

Aby zatrzymać nagrywanie żądań:

• W panelu Sieć kliknij Zatrzymaj rejestrowanie dziennika 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ść .

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.

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 w panelu Sieć i zaznacz Zrób zrzut ekranu.

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

Po zrobieniu zrzutu ekranu możesz z nim wchodzić w interakcję na różne sposoby:

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

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.

Zmiana sposobu 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 dokładniej 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.

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ę , 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 ręcznie wyczyścić pamięć podręczną przeglądarki, w dowolnym momencie kliknij prawym przyciskiem myszy dowolne miejsce w tabeli Prośby i wybierz Wyczyść pamięć podręczną przeglądarki.

Symulowanie trybu offline

Istnieje 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ć korzystanie z sieci w trybie całkowicie offline, w menu Ograniczanie przepustowości obok pola wyboru Wyłącz pamięć podręczną kliknij 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 odpowiednią wstępną konfigurację w menu Ograniczenie na pasku czynności u góry.

Narzędzia programistyczne wyświetlają ikonę ostrzeżenia 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 Ustawienia > Ograniczanie.

3. W panelu Sieć wybierz nowy profil w menu Ograniczanie.

   

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

Ograniczanie liczby połączeń 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 szybkoś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:

Emulowanie wolnych połączeń sieciowych z poziomu panelu Stan sieci

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

1. Kliknij ikonę , 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.

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ę , aby otworzyć panel Stan sieci.
2. Wyczyść pole Wybierz automatycznie.
3. Wybierz klienta użytkownika z menu lub wpisz niestandardowy w polu.

Żądania wyszukiwania

Aby wyszukać nagłówki żądań, dane 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 match_case lub regular_expression, 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.

Aby odświeżyć wyniki wyszukiwania, kliknij odśwież Odśwież. Aby wyczyścić wyniki, kliknij blok 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, prawdopodobnie pasek Filtry jest ukryty. Zobacz Ukrywanie paska filtrów.

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, które są większe 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świetla 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. Pokaż 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łeś.
• 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świetl zasoby, których poziom priorytetu jest zgodny z wybraną wartością.
• resource-type. Wyświetla zasoby o określonym typie, np. obraz. W menu automatycznego uzupełniania DevTools wypełnia listę wszystkimi typami zasobów, z którymi się spotkał.
• response-header-set-cookie. Pokaż na karcie Problemy nagłówki Set-Cookie w postaci nieprzetworzonej. 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 zostały znalezione.
• 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 zostały znalezione.
• 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 przycisk 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 filtrów typu.

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.

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 > check_box Ukryj adresy URL danych.

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 > check_box Ukryj adresy URL rozszerzeń.

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 > check_box Zablokowane pliki cookie odpowiedzi. Wypróbuj to na stronie demonstracyjnej.

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 ikonę informacji.

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

Pokazuj tylko zablokowane żądania

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

W tabeli Żądania zablokowane żądania 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 > check_box Żądania stron. Wypróbuj to na stronie demonstracyjnej.

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 zaczęło się pobierać, 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.

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 Żądania domyślnie zawiera te kolumny:

• Nazwa: Nazwa pliku lub identyfikator zasobu.

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

  

  • Kod stanu HTTP, na przykład 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 informacją o tym, 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. Analizator HTML w Chrome.
  • Przekierowanie. przekierowanie HTTP;
  • Skrypt. Funkcja JavaScriptu.
  • Inne. inny proces lub działanie, np. przejście do strony za pomocą linku lub wpisanie adresu URL na pasku adresu.

• Rozmiar. Łączny rozmiar nagłówków odpowiedzi i treści odpowiedzi, jak podano na serwerze.

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

• Kaskada. wizualne zestawienie aktywności związanej z każdą prośbą;

Dodaj lub usuń kolumny

Kliknij prawym przyciskiem myszy nagłówek tabeli Prośby i wybierz opcję ukrycia lub wyświetlenia tabeli. Wyświetlone opcje mają obok siebie znaki wyboru.

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ąpienia i Kaskada.

Dodawanie kolumn niestandardowych

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

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

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

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

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

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 schemat kaskadowy jest uporządkowany według czasu rozpoczęcia żądań. W związku z tym prośby, które znajdują się dalej w lewo, rozpoczęły się wcześniej niż te, które są dalej w prawo.

Aby dowiedzieć się, jak można sortować schemat kaskadowy, zapoznaj się z artykułem Sortowanie według fazy działania.

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 Prośby.

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: Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame i Pong Frame.
• Długość. Długość ładunku wiadomości w bajtach.
• Czas. Czas wysłania lub odebrania wiadomości.

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

• Wychodzące SMS-y są w jasnozielonym kolorze.
• Przychodzące SMS-y są białe.
• Kody operacji WebSocket są w kolorze jasnożółtym.
• Błędy są wyświetlane na jasnoczerwono.

Analizowanie zdarzeń w strumieniach

Aby wyświetlić zdarzenia przesyłane przez serwery za pomocą interfejsów 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.

Aby filtrować zdarzenia, na pasku filtra u góry karty EventStream podaj 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. 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.

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

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.

W sekcji Ogólne narzędzia deweloperskie wyświetlają czytelny 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 edycji 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 dla interesującego Cię żądania. Zobacz Wyświetlanie nagłówków HTTP.
2. Obok sekcji Nagłówek żądania lub Nagłówek odpowiedzi kliknij Wyświetl źródło.

Ostrzeżenie 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.

• 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ą 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.

Wyświetlanie źródła ładunku

Domyślnie narzędzia dla programistów wyświetlają ładunek w postaci 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 argumentów parametrów ciągu zapytania po dekodowaniu z adresu URL

Aby przełączyć kodowanie argumentów w adresie URL, na karcie Ładunek kliknij wyświetl zdekodowane lub wyświetl zakodowane w adresie 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.

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 żądania

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.

Więcej informacji o każdym z etapów, 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.

Omówienie etapów podziału na etapy

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

• Kolejkowanie. 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 poświęconej priorytetom zasobów w przewodniku fetchpriority.
  • W przypadku tego źródła jest już 6 otwartych połączeń TCP, co stanowi limit. (Dotyczy tylko 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.

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ń DOMContentLoaded i load w różnych miejscach w panelu Sieć. Zdarzenie DOMContentLoaded jest zaznaczone na niebiesko, a zdarzenie load – na czerwono.

Wyświetlanie łącznej liczby żądań

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

Uwaga: Uwaga: ta liczba obejmuje tylko żądania zapisane od momentu otwarcia Narzędzi deweloperskich. Jeśli przed otwarciem Narzędzi deweloperskich pojawiły się inne żądania, nie zostaną one policzone.

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

Na pasku stanu u dołu panelu Sieć DevTools podaje łączny rozmiar przeniesionych i wczytanych (nieskompresowanych) zasobów.

Uwaga: Uwaga: ta liczba obejmuje tylko żądania zapisane od momentu otwarcia Narzędzi deweloperskich. Jeśli przed otwarciem Narzędzi deweloperskich pojawiły się inne żądania, nie zostaną one policzone.

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

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

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

Wyświetlanie nieskompresowanego rozmiaru zasobu

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

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

Aby zmniejszyć ryzyko przypadkowego wycieku informacji poufnych, możesz domyślnie eksportować „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 poufnymi.

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

• 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).

  

• 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 HAR z danymi poufnymi, a następnie kliknij pobieranie Eksportuj i wybierz Eksportuj 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świetli inicjatorów żądań zaimportowanych z plików HAR.

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

W kolumnie Nazwa w tabeli Prośby kliknij żądanie prawym przyciskiem myszy, najedź na Kopiuj i wybierz jedną z tych opcji.

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

• Kopiuj adres URL. Skopiuj adres URL żądania do schowka.
• Skopiuj jako cURL. Skopiuj żądanie jako polecenie cURL.
• Kopiuj jako PowerShell. Skopiuj żądanie jako polecenie PowerShell.
• Kopiowanie jako pobranie. Skopiuj żądanie jako wywołanie funkcji fetch.
• Kopiowanie jako pobranie (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ę stosu żądania do schowka.

Aby skopiować wszystkie żądania:

• Kopiuj 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.
• Skopiuj wszystko jako pobranie. Skopiuj wszystkie żądania jako łańcuch wywołań funkcji fetch.
• Skopiuj wszystko jako pobranie (Node.js). Skopiuj wszystkie żądania jako łańcuch wywołań funkcji fetch w Node.js.
• Skopiuj wszystko jako plik HAR (po usunięciu danych poufnych). Skopiuj wszystkie żądania jako dane HAR bez danych poufnych, takich jak nagłówki Cookie, Set-Cookie i Authorization.
• Kopiuj 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 łańcuch poleceń cURL.
• Skopiuj wszystko jako PowerShell. Skopiuj wszystkie przefiltrowane żądania jako ciąg poleceń PowerShell.
• Skopiuj wszystko jako pobranie. 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-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 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 filter_alt Filtr.

Używanie dużych wierszy żądań

Jeśli chcesz mieć więcej pustej przestrzeni w tabeli żądań sieci, użyj dużych wierszy. 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ższa wartość) jak i końcowy (najwyższa wartość) priorytet pobierania.

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

Ukrywanie ścieżki Ogółem

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