Informacje o funkcjach sieci

Odkryj nowe sposoby analizowania wczytywania stron w obszernym artykule o Narzędziach deweloperskich w Chrome funkcje analizy sieci.

Rejestruj żądania sieciowe

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

Zatrzymaj rejestrowanie żądań sieciowych

Aby przestać nagrywać prośby:

• Kliknij Zatrzymaj rejestrowanie dziennika sieci. w panelu Sieć. Zmienia kolor na szary, co oznacza, że Narzędzia deweloperskie nie rejestrują już żądań.
• Naciśnij Command. + E (Mac) lub Control + E (Windows, Linux) przy włączonym panelu Sieć.

Wyczyść żądania

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

Zapisywanie żądań podczas wczytywania stron

Aby zapisywać żądania na różnych wczytaniach stron, zaznacz pole wyboru Zachowaj dziennik w panelu Sieć. Narzędzia deweloperskie zapisuje wszystkie żądania, dopóki nie wyłączysz opcji Zachowaj dziennik.

Rób zrzuty ekranu podczas wczytywania strony

Rób zrzuty ekranu, aby analizować to, co widzą użytkownicy oczekujący na wczytanie strony.

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

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

Po zapisaniu zrzutów ekranu możesz wykonywać następujące działania:

• Najedź na zrzut ekranu, aby zobaczyć, w którym miejscu został zrobiony. Żółta linia pojawi się w panelu Przegląd.
• Kliknij miniaturę zrzutu ekranu, aby odfiltrować wszystkie żądania, które pojawiły się po wykonaniu zrzutu ekranu. przechwyconych.
• Kliknij dwukrotnie miniaturę, aby ją powiększyć.

Powtórz żądanie XHR

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

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

Zmień sposób wczytywania

Emuluj nowego użytkownika, wyłączając pamięć podręczną przeglądarki

Aby emulować sposób, w jaki użytkownik korzysta z Twojej witryny 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żesz dokładniej emulować wrażenia, które trafiają do Twojej witryny po raz pierwszy, bo przy kolejnych wizytach żądania są przesyłane z pamięci podręcznej przeglądarki.

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

Jeśli chcesz wyłączyć pamięć podręczną podczas pracy w innych panelach Narzędzi deweloperskich, skorzystaj z Warunków sieci szuflady.

1. Kliknij ikonę , aby otworzyć panel Warunki 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 w dowolnym miejscu tabeli Żądania i wybierz Wyczyść pamięć podręczną przeglądarki.

Emuluj offline

Dostępna jest nowa klasa aplikacji internetowych, o nazwie Progresywne aplikacje internetowe, które mogą działać w trybie offline pomocy skryptów service worker. Podczas tworzenia tego typu aplikacji warto mieć możliwość pozwala przeprowadzić szybką symulację urządzenia, które nie ma połączenia transmisji danych.

Aby przeprowadzić symulację działania sieci w trybie offline, wybierz opcję Offline w menu Ograniczanie wykorzystania sieci obok pola wyboru Wyłącz pamięć podręczną.

W Narzędziach deweloperskich obok karty Sieć wyświetlana jest ikona ostrzeżenia, która przypomina, że tryb offline jest włączony.

Emuluj wolne połączenia sieciowe

Aby emulować szybką, wolną sieć 4G, wolne 4G lub 3G, wybierz odpowiednie gotowe ustawienie z menu Ograniczanie wykorzystania na pasku działań u góry.

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

Tworzenie niestandardowych profili ograniczania

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

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

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 połączeń WebSocket

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

Aby zaobserwować ograniczanie przez WebSocket:

1. Zainicjuj nowe połączenie, na przykład za pomocą narzędzia do testowania.
2. W panelu Sieć wybierz Bez ograniczania i wyślij wiadomość przez połączenie.
3. Utwórz bardzo powolny niestandardowy profil ograniczania dostępu, 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 wiadomościami wysłanymi a potwierdzonymi z ograniczaniem i bez niego. Na przykład:

Emuluj wolne połączenia sieciowe z panelu warunków sieci

Jeśli chcesz ograniczyć połączenie sieciowe podczas pracy w innych panelach Narzędzi deweloperskich, użyj Panel Warunki 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 przeglądarki

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

Zastąp nagłówki odpowiedzi HTTP

Zapoznaj się z sekcją Zastępowanie plików i nagłówków odpowiedzi HTTP lokalnie.

Zastąp klienta użytkownika

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

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

Filtruj żądania

Filtruj żądania według właściwości

Za pomocą pola Filtruj możesz filtrować żądania według właściwości, takich jak domena lub rozmiar użytkownika.

Jeśli nie widzisz tego pola, okienko Filtry jest prawdopodobnie ukryte. Zobacz Ukrywanie okienka filtrów.

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

Możesz korzystać z wielu usług naraz, rozdzielając je spacjami. Dla: Na przykład mime-type:image/gif larger-than:1K wyświetla wszystkie GIF-y większe niż 1 kilobajt. Te filtry obejmujące wiele usług są równoważne operacjom ORAZ. Operacje LUB nie są obsługiwane.

Następna jest 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ę plików cookie.
• cookie-value Pokaż zasoby, które ustawiają określoną wartość pliku cookie.
• domain Wyświetlaj tylko zasoby z określonej domeny. Możesz użyć symbolu wieloznacznego (*) , aby uwzględnić wiele domen. Na przykład *.com wyświetla zasoby ze wszystkich domen z rozszerzeniem w aplikacji .com. W Narzędziach deweloperskich widoczne są wszystkie domeny, które w menu autouzupełniania są uzupełnione napotkanych przez nas użytkowników.
• has-overrides Pokaż żądania, które zastąpiły content, headers, wszystkie zastąpienia (yes) lub brak 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. Narzędzia deweloperskie wypełnia menu autouzupełniania wszystkimi nagłówkami odpowiedzi, które zawiera. napotkano problem.
• is Użyj narzędzia is:running, aby znaleźć zasoby typu WebSocket.
• larger-than Pokaż zasoby, które są większe od określonego rozmiaru (w bajtach). Ustawianie wartości funkcji 1000 jest odpowiednikiem ustawienia wartości 1k.
• method Pokaż zasoby, które zostały pobrane za pomocą określonego typu metody HTTP. Wypełnianie Narzędzi deweloperskich listę autouzupełniania zawierającą wszystkie napotkane metody HTTP.
• mime-type Pokaż zasoby określonego typu MIME. Narzędzia deweloperskie wypełnia menu autouzupełniania ze wszystkimi typami MIME, jakie udało się napotkać.
• mixed-content Pokaż wszystkie zasoby z treścią mieszaną (mixed-content:all) lub tylko te, które są wyświetlane (mixed-content:displayed).
• priority Pokaż zasoby, których priorytet pasuje do określonej wartości.
• resource-type Pokaż zasoby danego typu, na przykład obraz. Narzędzia deweloperskie wypełniają pole autouzupełniania ze wszystkimi typami zasobów, jakie udało się napotkać.
• response-header-set-cookie Pokaż nieprzetworzone nagłówki Set-Cookie na karcie Problemy. Nieprawidłowe pliki cookie z niepoprawnymi nagłówkami Set-Cookie zostaną oznaczone w panelu Network.
• 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 , która pasuje do określonej wartości. Narzędzia deweloperskie wypełnia autouzupełnianie wszystkimi plikami cookie. napotkanych domen.
• set-cookie-name Pokaż zasoby, które mają nagłówek Set-Cookie i nazwę pasującą do określoną wartość. Narzędzia deweloperskie wypełnia autouzupełnianie wszystkimi nazwami znajdujących się w nim plików cookie. napotkano problem.
• set-cookie-value Pokaż zasoby, które mają nagłówek Set-Cookie z dopasowaną wartością określoną wartość. Narzędzia deweloperskie wypełnia autouzupełnianie wszystkimi wartościami plików cookie, które zostały użyte napotkano problem.
• status-code Pokaż tylko zasoby, których kod stanu HTTP pasuje do określonego kodu. DevTools wypełnia menu autouzupełniania wszystkimi napotkanymi kodami stanu.
• url Pokaż zasoby, których atrybut url odpowiada określonej wartości.

Filtruj żądania według typu

Aby filtrować żądania według typu żądania, kliknij Wszystkie, Pobierz/XHR, JS, CSS, Img, Media. Font, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest lub Other (każdy inny typ, który nie został tu wymieniony) w panelu Sieć.

Jeśli nie widzisz tych przycisków, okienko Filtry jest prawdopodobnie ukryte. Patrz sekcja Ukrywanie filtrów. .

Aby jednocześnie włączyć filtry kilku typów, przytrzymaj klawisz Command (Mac) lub Control (Windows, Linux) i i kliknij.

Filtruj żądania według czasu

Przeciągnij w lewo lub w prawo w panelu Przegląd, by wyświetlić tylko żądania, które były aktywne w danym okresie. Filtr uwzględnia wybrane elementy. Wszystkie żądania, które były aktywne w zaznaczonym czasie, są wyświetlane.

Ukryj adresy URL danych

Adresy URL danych to małe pliki umieszczone w innych dokumentach. Każda prośba w sekcji Tabela Żądania, która zaczyna się od data:, jest adresem URL danych.

Aby ukryć te żądania, zaznacz Ukryj adresy URL danych.

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

Ukryj adresy URL rozszerzeń

Aby skoncentrować się na autorze kodu, możesz odfiltrować nietrafne żądania wysyłane przez rozszerzenia zainstalowane w Chrome. Żądania rozszerzeń mają adresy URL, które zaczynają się od chrome-extension://.

Aby ukryć prośby o rozszerzenia, zaznacz Ukryj adresy URL rozszerzeń.

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

Pokaż tylko żądania z zablokowanymi plikami cookie odpowiedzi

Aby odfiltrować wszystko oprócz żądań z zablokowanymi plikami cookie odpowiedzi, przeczytaj sekcję 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 wykluczonego lub wykluczonego z niego plików cookie innych firmwyświetla się ikona ostrzeżenia. Najedź kursorem na ikonę, aby zobaczyć etykietkę ze wskazówką. Kliknij ją, aby przejść do panelu Problemy z dodatkowymi informacjami.

Pokaż tylko zablokowane żądania

Aby odfiltrować wszystkie żądania oprócz zablokowanych, zaznacz Zablokowane prośby. Aby to sprawdzić, możesz użyć karty Blokowanie żądań sieciowych.

Tabela Żądania jest wyróżniona 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ń, których pochodzenie różni się od źródła strony, zaznacz Żądania innych firm. Wypróbuj tę stronę demonstracyjną.

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

Sortuj żądania

Domyślnie żądania w tabeli Żądania są sortowane według czasu inicjowania, ale możesz przy użyciu innych kryteriów.

Sortuj według kolumny

Kliknij nagłówek dowolnej kolumny w tabeli Żądania, aby posortować żądania według tej kolumny.

Sortuj według fazy aktywności

Aby zmienić sposób sortowania żądań przez funkcję Waterfall, kliknij prawym przyciskiem myszy nagłówek tabeli Żądania, najedź kursorem na Wodospad i wybierz jedną z następujących opcji:

• Czas rozpoczęcia. Pierwsze zainicjowane żądanie znajduje się na górze.
• Czas odpowiedzi. Pierwsze żądanie rozpoczęte do pobierania znajduje się na górze.
• Czas zakończenia. Pierwsze zakończone żądanie jest widoczne na górze.
• Całkowity czas trwania. Żądanie z najkrótszą konfiguracją połączenia oraz żądanie / odpowiedź znajduje się na na górze.
• Czas oczekiwania. Żądanie, które oczekuje na najkrótszy czas oczekiwania na odpowiedź, znajduje się na górze.

W tych opisach zakładamy, że każda opcja jest posortowana od najkrótszej do najdłuższej. Kliknięcie nagłówka kolumny Wodospad odwraca kolejność.

W tym przykładzie Wodospad jest posortowany według łącznego czasu trwania. Lżejsza część każdego słupka to czas spędziliśmy na oczekiwaniu. Ciemniejsza część to czas spędzony na pobieraniu bajtów.

Analizowanie żądań

Dopóki Narzędzia deweloperskie są otwarte, rejestruje wszystkie żądania w panelu Sieć. Panel Sieć umożliwia: analizowanie żądań.

Wyświetl dziennik żądań

W tabeli Żądania możesz wyświetlić dziennik wszystkich żądań wysłanych, gdy są otwarte Narzędzia deweloperskie. Kliknięcie lub najechanie kursorem na żądania pojawi się więcej informacji na ich temat.

Tabela Żądania zawiera domyślnie te kolumny:

• Nazwa: Nazwa pliku lub identyfikator zasobu.

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

  

  • Kod stanu HTTP, na przykład 200 lub 404.
  • CORS error w przypadku żądań nie powiódł się z powodu współdzielenia zasobów między źródłem (CORS).
  • (blocked:origin) w przypadku żądań z nieprawidłowo skonfigurowanymi nagłówkami. Najedź kursorem na tę wartość stanu, aby wyświetlić etykietkę ze wskazówką na temat tego, 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:

  • Analiza. Parser HTML Chrome.
  • Przekierowanie. Przekierowanie HTTP.
  • Skrypt. funkcję JavaScriptu.
  • Inna odpowiedź. Inny proces lub działanie, na przykład przejście na stronę za pomocą linku lub wpisanie URL na pasku adresu.

• Rozmiar. Łączny rozmiar nagłówków odpowiedzi wraz z treścią odpowiedzi dostarczony przez serwera.

• Czas. Całkowity czas trwania od początku żądania do otrzymania ostatniego bajtu w odpowiedź.

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

Dodaj lub usuń kolumny

Kliknij prawym przyciskiem myszy nagłówek tabeli Żądania i wybierz opcję ukrycia lub wyświetlenia. Obok wyświetlonych opcji znajdują się znaczniki wyboru.

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

Dodawanie kolumn niestandardowych

Aby dodać kolumnę niestandardową do tabeli Żądania:

1. Kliknij prawym przyciskiem myszy nagłówek tabeli Requests (Żądania) i wybierz Response Headers (Nagłówki odpowiedzi) > Zarządzaj nagłówkami kolumn.
2. W oknie dialogowym kliknij Dodaj nagłówek niestandardowy, wpisz jego nazwę i kliknij Dodaj.

Grupuj żądania według wbudowanych ramek

Jeśli wbudowane ramki na stronie inicjują wiele żądań, możesz zgrupować je, aby dziennik żądań był bardziej przyjazny.

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

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

Wyświetlanie czasu wysyłania żądań w stosunku do innych żądań

Raport Waterfall (Kaskada) pozwala wyświetlić poszczególne czasy realizacji poszczególnych żądań. Domyślnie atrybut Wodospad jest uporządkowany według czasu rozpoczęcia żądań. Prośby, które znajdują się dalej po lewej stronie, zaczęło się wcześniej niż te dalej po prawej.

Aby poznać różne sposoby sortowania wodospadu, zobacz Sortowanie według fazy aktywności.

Analizowanie komunikatów połączenia WebSocket

Aby wyświetlić komunikaty połączenia WebSocket:

1. W kolumnie Nazwa 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 Name (Nazwa) w Tabela Żądania.

Zawiera ona 3 kolumny:

• Dane. Ładunek wiadomości. Jeśli wiadomość jest zwykłym tekstem, jest wyświetlana w tym miejscu. Do plików binarnych opcodes, ta kolumna zawiera nazwę i kod tego kodu. Obsługiwane są te kody operacji: Ramka kontynuacji, Ramka binarna, Ramka zamknięcia połączenia, Ramka Ping i Ramka Pong.
• Długość. Długość ładunku wiadomości w bajtach.
• Czas. Czas odebrania lub wysłania wiadomości.

Wiadomości są oznaczone kolorami w zależności od ich 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 mają kolor jasnoczerwony.

Analizowanie zdarzeń w strumieniu

Aby wyświetlić zdarzenia przesyłane strumieniowo przez interfejsy API Fetch, 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ę EventStream.

Aby filtrować zdarzenia, wpisz wyrażenie regularne na pasku filtrów u góry karty EventStream.

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

Wyświetlanie podglądu treści odpowiedzi

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

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

Ta karta jest najbardziej przydatna do przeglądania obrazów.

Wyświetlanie treści odpowiedzi

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

1. Kliknij adres URL prośby w kolumnie Nazwa w tabeli Prośby.
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 żądań i opcjonalnie Nagłówki Early Hints.

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

W sekcji Nagłówki odpowiedzi najedź kursorem na wartość nagłówka i kliknij przycisk edytuj Edytuj, aby lokalnie zastąpić nagłówek odpowiedzi.

Wyświetl źródło nagłówka HTTP

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

1. Otwórz kartę Nagłówki dla interesującego Cię żądania. Zobacz Wyświetlanie nagłówków HTTP.
2. Kliknij Wyświetl źródło obok sekcji Nagłówek żądania lub Nagłówek odpowiedzi.

Ostrzeżenie dotyczące tymczasowych nagłówków

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

• Żądanie nie zostało wysłane przez sieć, ale zostało wyświetlone 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 uruchom fetch("https://jec.fish.com/unknown-url/") w konsoli.

Ze względów bezpieczeństwa w Narzędziach deweloperskich mogą być też wyświetlane tylko tymczasowe nagłówki.

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świetl źródło ładunku

Domyślnie Narzędzia deweloperskie wyświetlają ładunek w sposób zrozumiały 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świetl odkodowane z adresu URL argumenty parametrów ciągu zapytania

Aby przełączyć kodowanie adresów URL dla argumentów, na karcie Ładunek kliknij wyświetl zdekodowane lub wyświetl zakodowany adres URL.

Wyświetl pliki 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 artykule Pola.

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

Wyświetlanie rozkładu czasowego żądania

Aby wyświetlić rozkład czasowy żądania:

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

Aby dowiedzieć się, jak szybciej uzyskać dostęp do tych danych, zapoznaj się z sekcją Wyświetlanie podglądu zestawienia okresów.

Zapoznaj się z artykułem Etapy planowania, aby dowiedzieć się więcej o każdym z nich, można zobaczyć na karcie Czas.

Wyświetlanie podglądu zestawienia okresów

Aby wyświetlić podgląd podziału czasowego żądania, najedź kursorem na wpis żądania w Kolumna Kaskada w tabeli Żądania.

Informacje o sposobach dostępu do tych danych, które nie wymagają połączenia, znajdziesz w sekcji Wyświetlanie podziału czasowego żądania. po najechaniu kursorem myszy.

Etapy planowania

Oto więcej informacji o poszczególnych etapach, które możesz zobaczyć na karcie Czas:

• Queuing (Kolejka). Przeglądarka umieszcza żądania w kolejce przed rozpoczęciem połączenia i kiedy:
  • 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 na krótko przydziela miejsce w pamięci podręcznej dysku.
• Wstrzymano. Po rozpoczęciu połączenia żądanie może zostać wstrzymane z dowolnego z powodów opisanych w sekcji Kolejka.
• Wyszukiwanie DNS. Przeglądarka rozpoznaje adres IP żądania.
• Początkowe połączenie. Przeglądarka nawiązuje połączenie, w tym podczas uzgadniania połączenia TCP lub ponownych prób i negocjowanie protokołu SSL.
• Negocjowanie przez serwer proxy. Przeglądarka negocjuje żądanie z serwerem proxy.
• Prośba wysłana. Wysyłam prośbę.
• ServiceWorker Preparation (Przygotowanie obiektu ServiceWorker). Przeglądarka uruchamia skrypt service worker.
• Request to ServiceWorker. Żądanie jest wysyłane do skryptu service worker.
• Oczekiwanie (TTFB). Przeglądarka czeka na pierwszy bajt odpowiedzi. TTFB to skrót od czasu do pierwszego bajtu. Ten czas obejmuje jedno wystąpienie opóźnienia i czas potrzebny serwerowi na przygotować odpowiedź.
• Pobieranie treści. Przeglądarka otrzymuje odpowiedź bezpośrednio z sieci lub z skryptu service worker. Ta wartość to łączny czas spędzony na odczytywaniu 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ź kursorem na żądanie w Tabela żądań. Kolory inicjatorów w Narzędziach deweloperskich są zielone, a zależności czerwone.

Jeśli tabela Żądania jest uporządkowana chronologicznie, pierwsze zielone żądanie nad żądaniem, które jest inicjatorem zależności. Jeśli powyżej pojawia się inna zielona prośba że to żądanie o wyższym priorytecie jest inicjatorem treści. I tak dalej.

Wyświetl zdarzenia wczytywania

Narzędzia deweloperskie wyświetlają czas zdarzeń DOMContentLoaded i load w wielu miejscach na Panel Sieć. Zdarzenie DOMContentLoaded ma kolor niebieski, a zdarzenie load – czerwony.

Wyświetl łączną liczbę żądań

Łączna liczba żądań jest widoczna w panelu Podsumowanie u dołu panelu Sieć.

Wyświetl łączny rozmiar przeniesionych i wczytanych zasobów

W panelu Podsumowanie u dołu panelu Sieć znajdziesz informacje o łącznym rozmiarze przesłanych 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 żądanie zasobu, najedź kursorem na kolumnę Inicjator. aby wyświetlić zrzut stosu poprzedzający żądanie.

Wyświetlanie nieskompresowanego rozmiaru zasobu

Sprawdź Ustawienia > Duże wiersze żądania, a potem spójrz na dolną wartość w kolumnie Rozmiar.

W tym przykładzie rozmiar skompresowanego dokumentu www.google.com, który został przesłany przez sieć, wynosił 43.8 KB, a rozmiar nieskompresowany – 136 KB.

Eksportowanie danych żądań

Zapisywanie wszystkich żądań sieciowych w pliku HAR

HAR (archiwum HTTP) to format pliku używany przez różne narzędzia do sesji HTTP do eksportowania przechwyconych danych. Format to obiekt JSON z określonym zestawem pól.

Wszystkie żądania sieciowe możesz zapisywać w pliku HAR na 2 sposoby:

• Kliknij prawym przyciskiem dowolną prośbę w tabeli Żądania i wybierz Zapisz wszystko w formacie HAR z treścią.
• Na pasku działań u góry panelu Sieć kliknij Eksportuj HAR.

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

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

Skopiuj co najmniej 1 żądanie do schowka

W kolumnie Nazwa w tabeli Żądania kliknij prośbę prawym przyciskiem myszy, najedź kursorem na Kopiuj wybierz jedną z następujących opcji:

• Kopiuj URL. Skopiuj adres URL żądania do schowka.
• Skopiuj jako cURL. Skopiuj żądanie jako polecenie cURL.
• Skopiuj jako PowerShell. Skopiuj żądanie jako polecenie PowerShell.
• Kopiuj jako pobrane. Skopiuj żądanie jako wywołanie pobierania.

• Skopiuj jako pobieranie Node.js. Skopiuj żądanie jako wywołanie pobierania w Node.js.

  ---

• Kopiuj odpowiedź Skopiuj treść odpowiedzi do schowka.

  ---

• Skopiuj wszystkie adresy URL. Skopiuj adresy URL wszystkich żądań do schowka.

• Skopiuj wszystko jako cURL. Skopiuj wszystkie żądania w formie łańcucha poleceń cURL.

• Skopiuj wszystko jako PowerShell. Skopiuj wszystkie żądania w formie łańcucha poleceń PowerShell.

• Skopiuj wszystko jako pobieranie. Skopiuj wszystkie żądania w formie łańcucha wywołań pobierania.

• Skopiuj wszystko jako pobieranie Node.js. Skopiuj wszystkie żądania w formie łańcucha wywołań pobierania w Node.js.

• Skopiuj wszystko jako pliki HAR. Skopiuj wszystkie żądania jako dane HAR.

Zmienianie układu panelu Sieć

Rozwiń lub zwiń sekcje interfejsu panelu Sieć, aby skupić się na tym, co dla Ciebie ważne.

Ukryj okienko Filtry

Domyślnie w Narzędziach deweloperskich wyświetla się okienko filtrów. Kliknij Filtruj. aby go ukryć.

Używaj 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 też podaj trochę więcej informacji, gdy używasz dużych wierszy. Na przykład dolna wartość parametru Kolumna Rozmiar zawiera nieskompresowany rozmiar żądania, a kolumna Priorytet zawiera priorytet zarówno początkowego (dolna wartość), jak i końcowego priorytetu pobierania (najwyższa wartość).

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

Ukrywanie ścieżki Przegląd

Domyślnie w Narzędziach deweloperskich wyświetla się ścieżka Przegląd. Otwórz Ustawienia i odznacz pole wyboru Pokaż przegląd, aby je ukryć.