Informacje o funkcjach sieci

Odkryj nowe sposoby analizowania wczytywania stron w obszernym omówieniu funkcji analizy sieci w Narzędziach deweloperskich w 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ść żądania

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

Zapisuj żądania 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 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 w pewnym zakresie 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ć wszystkie żądania, które pojawiły się po jego zrobieniu.
• 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.

Zmień sposób wczytywania

Emuluj 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 bardziej wiernie 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 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

Dostępna jest nowa klasa aplikacji internetowych, o nazwie Progresywne aplikacje internetowe, które mogą działać w trybie offline z pomocą instancji 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 sieci 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ć szybką, wolną sieć 4G, wolno 4G lub 3G, wybierz odpowiednie gotowe ustawienie z menu Ograniczanie wykorzystania na pasku działań 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

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 z menu Ograniczanie wykorzystania.

   

Obok panelu Network (Sieć) w Narzędziach deweloperskich wyświetla się ikona ostrzeżenia , która przypomina, że ograniczanie wykorzystania jest włączone.

Ograniczanie liczby połączeń WebSocket

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

Aby zaobserwować ograniczanie przez 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. Tak powolny profil pomoże Ci 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 w schowku Stan sieci

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

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

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 na poziomie lokalnym.

Zastąpienie klienta użytkownika

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

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

Żądania wyszukiwania

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 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 zablokuj Wyczyść.

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

Filtruj żądania

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

Użyj pola Filtr, aby filtrować żądania według właściwości, takich jak domena lub rozmiar żądania.

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

Aby odwrócić filtr, zaznacz pole wyboru Odwróć 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 ORAZ. Operacje OR 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ę plików 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. 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. Narzędzia deweloperskie wypełniają menu autouzupełniania wszystkimi napotkanymi typami MIME.
• mixed-content. Pokaż wszystkie zasoby z mieszanymi treściami (mixed-content:all) lub tylko te, które są wyświetlane (mixed-content:displayed).
• priority. Pokaż zasoby, których priorytet jest zgodny z określoną 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ż 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 za pomocą niechronionego protokołu HTTP (scheme:http) lub zabezpieczonego protokołu HTTPS (scheme:https).
• set-cookie-domain. Pokaż zasoby, które mają nagłówek Set-Cookie z atrybutem Domain o wartości odpowiadającej określonej wartości. Narzędzia deweloperskie wypełnia autouzupełnianie wszystkimi napotkanymi domenami plików cookie.
• 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łnia autouzupełnianie wszystkimi wartościami plików cookie, które wystąpił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 atrybut url ma określoną wartość.

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 jednocześnie wyświetlić zasoby wielu typów, przytrzymaj Command (Mac) lub Control (Windows, Linux) i kliknij kilka filtrów typó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 uwzględnia wybrane elementy. 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 kodzie, możesz odfiltrowywać nieistotne żądania wysyłane przez rozszerzenia zainstalowane w Chrome. Adresy URL żądań rozszerzeń zaczynają się od chrome-extension://.

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

Pasek stanu u dołu 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 tę stronę demonstracyjną.

Na pasku stanu u dołu wyświetlana jest całkowita liczba wyświetlonych żądań.

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 lub konfiguracji Chrome wyświetla się ikona ostrzeżenia ostrzeżenie. Najedź kursorem na ikonę, aby wyświetlić wskazówkę, a potem kliknij ją, aby otworzyć panel Problemy z dodatkowymi informacjami.

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. Na pasku stanu u dołu wyświetlana jest całkowita liczba wyświetlonych żądań.

Pokaż tylko żądania innych firm

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 tę stronę demonstracyjną.

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

Sortuj żądania

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.

Sortuj 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 myszy powoduje 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 wraz z treścią odpowiedzi dostarczony przez serwer.

• Czas. Łączny czas trwania od momentu 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 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 wbudowane ramki na stronie inicjują wiele żądań, możesz zgrupować je, aby dziennik żądań był bardziej przyjazny.

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 element inline frame, 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ń. A więc żądania, które znajdują się dalej na lewo, zaczynają się wcześniej niż te znajdujące się dalej po prawej stronie.

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

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.

Zawiera ona 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 odbierania wiadomości.

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

• Wychodzące SMS-y mają kolor jasnozielony.
• Przychodzące SMS-y mają biały kolor.
• Kody operacji WebSocket mają kolor jasnożółty.
• Błędy są wyświetlane na jasnoczerwono.

Analizowanie zdarzeń w strumieniu

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

1. rejestrować żądania sieciowe na stronie, która przesyła strumieniowo zdarzenia; Na przykład otwórz 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świetl nagłówki HTTP

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

1. Kliknij prośbę w tabeli Żądania.
2. Otwórz kartę Nagłówki i przewiń 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świetl źródło nagłówka HTTP

Domyślnie na karcie Nagłówki nazwy nagłówków są wyświetlane w kolejności alfabetycznej. Aby wyświetlić nazwy nagłówków HTTP w kolejności ich otrzymania:

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 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ą wyświetlać tylko nagłówki tymczasowe.

Wyświetl ładunek żądania

Aby wyświetlić ładunek żądania, czyli jego 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 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. Kliknij adres URL prośby w kolumnie Nazwa w tabeli Prośby.
2. Kliknij kartę Pliki cookie.

Opis poszczególnych kolumn znajdziesz w sekcji Pola.

Informacje o tym, jak modyfikować pliki cookie, znajdziesz w sekcji Wyświetlanie, edytowanie i usuwanie plików cookie.

Wyświetlanie zestawienia czasu przetwarzania żądania

Aby wyświetlić rozkład czasowy żą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.

Wyświetlanie podglądu zestawienia okresów

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.

Etapy planowania

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:
  • Są żądania o wyższym priorytecie.
  • Jest już otwartych 6 połączeń TCP z tym punktem początkowym, a taki jest 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.
• Request to ServiceWorker. Żądanie jest wysyłane do usługi.
• 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 okrąg opóźnienia i czas potrzebny serwerowi na przygotowanie odpowiedzi.
• Pobieranie treści. Przeglądarka otrzymuje odpowiedź bezpośrednio z sieci lub od service workera. Ta wartość to łączny czas poświęcony na odczytanie treści odpowiedzi. Wartości większe od oczekiwanego mogą wskazywać, że sieć działa wolno lub przeglądarka jest zajęta wykonywaniem innych czynności, co opóźnia odczyt odpowiedzi.

Wyświetl inicjatory i zależności

Aby wyświetlić inicjatory i zależności żądania, przytrzymaj Shift i najedź na żądanie w tabeli Żądania. 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świetl zdarzenia 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ć.

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.

Informacje na temat wielkości zasobów po zdekompresowaniu przez przeglądarkę znajdziesz w sekcji Wyświetlanie nieskompresowanego rozmiaru zasobu.

Wyświetl zrzut 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, a potem 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 sieciowe w pliku HAR, wybierz jeden z 2 sposobów:

• Kliknij prawym przyciskiem dowolną prośbę w tabeli Żądania i wybierz Kopiuj > Zapisz wszystkie [wymienione] jako HAR (oczyszczone) lub Zapisz wszystkie [wymienione] jako HAR (z danymi wrażliwymi).

  

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

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

  

Po utworzeniu pliku HAR możesz go zaimportować z powrotem do Narzędzi deweloperskich na potrzeby analizy na 2 sposoby:

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

Skopiuj do schowka żądanie, filtrowany zbiór żądań lub wszystkie z nich

W kolumnie Nazwa 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.
• Skopiuj jako pobranie (Node.js). Skopiuj żądanie jako wywołanie funkcji fetch w Node.js.
• Kopiowanie odpowiedzi. Skopiuj treść odpowiedzi do schowka.
• Skopiuj zrzut 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 pobrane. 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 (oczyszczone). Skopiuj wszystkie żądania jako dane HAR bez danych poufnych, takich jak nagłówki Cookie, Set-Cookie i Authorization.
• Skopiuj wszystko jako plik HAR (z danymi wrażliwymi). 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 odfiltrowane żądania w formie łańcucha poleceń cURL.
• Skopiuj wszystkie elementy z listy jako PowerShell. Skopiuj wszystkie przefiltrowane żądania jako łańcuch poleceń PowerShell.
• Skopiuj wszystkie elementy z listy jako pobrane. 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). Kopiuj wszystkie odfiltrowane żądania jako dane HAR bez danych wrażliwych, np. 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 Filtruj.

Używanie dużych wierszy żądań

Jeśli chcesz mieć więcej odstępów w tabeli żądań sieciowych, 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ższy) jak i końcowy (najwyższy) 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ć.