Ustawienia

Sofia Emelianova
Sofia Emelianova

Aby skonfigurować wygląd i działanie Narzędzi deweloperskich oraz ich paneli, kliknij Ustawienia. Ustawienia > Ustawienia. Na tej karcie znajdziesz zarówno ogólne opcje dostosowywania, jak i opcje dotyczące panelu.

Aby ustawić ustawienia, otwórz Ustawienia. Ustawienia > Ustawienia i przewiń do jednej z sekcji opisanych poniżej.

Sekcja Wygląd na karcie Ustawienia.

Aby dowiedzieć się, do czego służy dane ustawienie, wyszukaj jego nazwę na tej stronie i  rozwiń jego opis.

W tym dokumencie różne ustawienia są oznaczone tymi ikonami:

  • Pole wyboru. pola wyboru.
  • Listy rozwijane menu.
  • Rola wycofana. Wycofany

Aby przywrócić ustawienia domyślne, przewiń do końca karty Ustawienia i kliknij Przywróć domyślne i załaduj ponownie.

Wygląd

W tej sekcji znajdziesz opcje, które umożliwiają dostosowanie wyglądu Narzędzi deweloperskich.

Motywy menu ustawiają motyw kolorystyczny interfejsu Narzędzi deweloperskich.

Układy: Zmiana motywu DevTools z preferencji systemowych na ciemny lub jasny.
  • Preferencja systemowa
  • Jasny
  • Ciemny

Układ paneli menuporządkuje panele w panele.

Dotyczy kart Elementy > Style i powiązanych kart oraz panelu Źródła > Debuger. Opcja automatycznie sprawia, że układ zależy od szerokości Narzędzi deweloperskich.

Układ panelu: Zmiana układu panelu elementu z poziomego na pionowy.
  • w poziomie
  • kategoria
  • auto

Język menu ustawia język interfejsu Narzędzi deweloperskich.

Aby zastosować to ustawienie, odśwież Narzędzia deweloperskie.

Język: Panel Ustawienia w języku chińskim.
  • Język interfejsu przeglądarki
  • Jedna z opcji języka, w tym przypadku chiński

Pole wyboru. Włącz skrót Ctrl/Cmd + 0-9, aby przełączać się między panelami, umożliwia otwieranie paneli za pomocą klawiatury.

Ten film pokazuje, jak przełączać karty za pomocą odpowiednich skrótów klawiszowych.

Pole wyboru. Wyłącz nakładkę stanu wstrzymania, aby ukryć nakładkę przyciski odtwarzania i pomijania. Wstrzymano w debugerze w widoku, gdy wykonywanie kodu jest wstrzymane.

Pole wyboru. Pokaż nowości po każdej aktualizacji automatycznie otwiera kartę Nowości po każdej aktualizacji Chrome.

Karta Nowości w panelu bocznym.

Źródła

W tej sekcji znajdziesz opcje, które umożliwiają dostosowywanie panelu Źródła.

Pole wyboru. Wyszukaj w skryptach anonimowych i skryptach treści pozwala wyszukiwać w plikach JavaScript (w tym w rozszerzeniach do Chrome) na karcie Szukaj.

Ten film pokazuje, jak wyszukiwać tekst w pliku źródłowym rozszerzenia.

Pole wyboru. Automatycznie pokazuj pliki na pasku bocznym wybiera pliki w panelu Źródła > Strona, gdy przełączasz się między kartami w Edytorze.

Ten film pokazuje, jak po włączeniu tej opcji panel Źródła wybiera pliki w drzewie nawigacji podczas przełączania się między kartami.

Pole wyboru. Włącz mapy źródeł JavaScriptu pozwala Narzędziom deweloperskim znaleźć źródła wygenerowanych lub zminiaturyzowanych plików JavaScript.

Na pasku stanu w panelu Źródła znajduje się link do zminifikowanego pliku.

Pole wyboru. Włączanie przenoszenia zaznaczenia klawiszem Tab powoduje, że Klawisz Tab. klawisz Tab przenosi zaznaczenie w Narzędziach deweloperskich, zamiast wstawiać znak Tab w Edytorze.

Wymaga ponownego załadowania Narzędzi deweloperskich.

Ten film pokazuje najpierw wstawianie znaków tabulacji za pomocą klawisza Tab. Gdy włączysz tę opcję i ponownie załadujesz Narzędzia deweloperskie, klawisz Tab przeniesie fokus.

Pole wyboru. Wykrywaj wcięcie ustawia wcięcie zgodnie z plikiem źródłowym otwartym w Edytorze.

Wymaga ponownego załadowania Narzędzi deweloperskich.

pozwala zobaczyć znaki odstępu jako kropki (...) i znaki tabulacji jako linie ().

W tym filmie najpierw pokazano domyślne wcięcie o 8 spacji. Gdy włączysz tę opcję, zastąpi ona domyślne wcięcie wcięciem z pliku źródłowego.

Pole wyboru. Autouzupełnianie umożliwia wyświetlanie przydatnych sugestii w Edytorze.

Na początku tego filmu nie pojawiają się żadne sugestie. Gdy włączysz tę opcję, Edytor będzie wyświetlać sugestie dotyczące uzupełniania poleceń.

Pole wyboru. Automatyczne zamykanie nawiasów automatycznie dodaje nawias zamykający lub tag po wpisaniu nawiasu otwierającego.

Ten film pokazuje wpisywanie nawiasów otwierających przed i po włączeniu automatycznego zamykania nawiasów.

Pole wyboru. Dopasowanie nawiasów – w jasno czerwonym kolorze podświetla w Edytorze nawiasy kwadratowe, nawiasy klamrowe i nawiasy bez pary.

Krzyżyk podkreślony na czerwono bez pary.

Pole wyboru. Zwijanie kodu umożliwia zwijanie i rozwijanie bloków kodu w nawiasach klamrowych w Edytorze.

Wymaga ponownego załadowania Narzędzi deweloperskich.

Z tego filmu dowiesz się, jak złożyć bloki kodu po włączeniu tej opcji.

Pokaż znaki odstępu menu wyświetla znaki odstępu w Edytorze.

Wymaga ponownego załadowania Narzędzi deweloperskich. Opcje:

  • All oznacza, że wszystkie znaki odstępu są oznaczone jako kropki (...). Dodatkowo Editor oznacza, że znak Tabulator jest oznaczony jako linia ().
  • Na końcu linii znaki odstępu są wyróżnione jasnoczerwonym kolorem.
Pokaż znaki odstępu: Wybrane opcje: Wszystkie i Ślad.
  • Brak
  • Wszystko (...)
  • Trzymanie się

Pole wyboru. Wyświetlaj wartości zmiennych w tekście podczas debugowania – wyświetla wartości zmiennych obok instrukcji przypisania podczas wstrzymania wykonywania kodu.

Debuger wstrzymany podczas wykonywania funkcji wyświetla wartości zmiennych obok instrukcji przypisania.

Pole wyboru. Po aktywowaniu punktu przerwania zaznacz panel Źródła, który otwiera Źródła > Edytor na linii z punktem przerwania, który wstrzymał wykonanie.

Na początku filmu panel Źródła jest nieaktywny, a film jest wstrzymany w miejscu punktu przerwania. Gdy ją włączysz, w Narzędziach deweloperskich otworzy się Edytor w panelu Źródła i pokaże się wiersz kodu z punktem przerwania.

Pole wyboru. Automatyczne stosowanie formatowania stylistycznego do zminifikowanych źródeł sprawia, że te źródła są czytelne.

W trybie wydruku przyjaznego dla oczu Edytor może wyświetlać pojedynczą długą linię kodu na kilku wierszach, poprzedzoną znakiem -, aby wskazać, że jest to kontynuacja linii.

Formatowany kod w panelu Źródła.

Pole wyboru. Włączanie map źródeł CSS pozwala Narzędziom deweloperskim znaleźć źródła wygenerowanych plików CSS, np. .scss, i pokazać je użytkownikowi.

W panelu Źródła pliki .scss są widoczne w sekcji Autor w drzewie nawigacji. Panel Style w panelu Elementy zawiera obok reguł CSS linki do plików .scss.

Pole wyboru. Zezwalaj na przewijanie po końcu pliku pozwala przewijać dalej niż ostatni wiersz w Edytorze.

Ten film pokazuje, jak przewinąć plik po włączeniu tej opcji.

Pole wyboru. Zezwalaj Narzędziom deweloperskim na wczytywanie zasobów, takich jak mapy źródłowe, ze zdalnych ścieżek plików. Ta opcja jest domyślnie wyłączona ze względów bezpieczeństwa.

Jeśli ta opcja jest wyłączona, Narzędzia deweloperskie będą rejestrować w Konsoli komunikaty podobne do tego:

Komunikat w Konsoli informujący, że wczytywanie z odległego ścieżki pliku jest zabronione ze względów bezpieczeństwa.

Domyślne wcięcie menu pozwala wybrać liczbę spacji, które klawisz Klawisz Tab. Tab wstawia w Edytorze.

Domyślne wcięcie: wyłączenie opcji zastępowania i zmianę domyślnego wcięcia z 2 spacji na 8 i potem na klawisz Tab;
  • 2 spacje
  • 4 spacje
  • 8 spacji
  • Znak tabulacji

Ten przykład pokazuje, jak ustawić domyślne wcięcie na 8 spacji, a potem na znak tabulacji.

Elementy

W tej sekcji znajdziesz listę opcji, które umożliwiają dostosowanie panelu Elementy.

Pole wyboru. Pokazuj shadow DOM dla klienta użytkownika wyświetla węzły shadow DOM w drzewie DOM.

W panelu Elementy są widoczne węzły modelu DOM cieniowanego.

Pole wyboru. Zawijanie tekstu powoduje dzielenie długich wierszy w drzewie DOM i przenoszenie ich do następnego wiersza.

Panel Elementy dzieli długie wiersze na słowa i przenosi je do następnego wiersza.

Pole wyboru. Pokaż komentarze HTML wyświetla komentarze HTML w drzewie DOM.

W panelu Elementy wyświetlane są komentarze HTML.

Pole wyboru. Pokaż węzeł DOM po najechaniu kursorem wybiera odpowiedni węzeł w drzewie DOM, gdy najedziesz kursorem na element w widoku w trybie Sprawdzanie. sprawdzania.

W tym filmie najpierw widać, że węzły DOM nie są zaznaczone w drzewie DOM. Gdy włączysz tę opcję, panel Elementy będzie wybierać węzły po najechaniu na nie kursorem.

Pole wyboru. Pokaż etykietkę ze szczegółowymi informacjami inspekcji wyświetla etykietę w widoku w trybie inspekcji Sprawdzanie., gdy najedziesz kursorem na element.

Szczegółowa etykietka wyświetlana w trybie inspekcji.

Pole wyboru. Pokaż linijki pod kursorem myszy wyświetla linijki w widoku po najechaniu kursorem na elementy w drzewie DOM.

Linijki widoczne w widocznym obszarze.

Pole wyboru. Pokaż etykietkę dotyczącą dokumentacji CSS wyświetla etykietkę z krótkim opisem, gdy najedziesz kursorem na właściwość w panelu Style.

Link Więcej informacji przekierowuje do dokumentacji MND CSS dotyczącej usługi.

Etykietka z dokumentacją właściwości CSS.

Sieć

W tej sekcji znajdziesz listę opcji, które umożliwiają dostosowywanie panelu Sieć. Większość opcji jest taka sama jak w ustawieniach panelu.

Pole wyboru. Zachowaj dziennik to to samo co Zachowaj dziennik w panelu Sieć. Oszczędza żądania podczas wczytywania stron.

Na początku tego filmu widać odświeżanie dziennika żądań po ponownym załadowaniu strony, a potem jego zapisanie po włączeniu tej opcji.

Pole wyboru. Rejestruj dziennik sieci to to samo co Rejestrowanie dziennika sieci. Rejestruj dziennik sieci w panelu Sieć. Rozpoczyna lub zatrzymuje rejestrowanie żądań w dzienniku sieci.

Przycisk Rejestruj dziennik sieci w panelu Sieć.

Pole wyboru. Włącz blokowanie żądań sieciowych blokuje żądania pasujące do wzorów w schowku Blokowanie żądań sieciowych.

Na początku tego filmu widać, że żądania nie są blokowane. Gdy ją włączysz, wzór w schowku Blokowanie żądań sieciowych będzie je blokować.

Pole wyboru. Wyłącz pamięć podręczną (gdy Narzędzia deweloperskie są otwarte) to to samo co Wyłącz pamięć podręczną w panelu Sieć. Wyłącza pamięć podręczną przeglądarki.

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

Pole wyboru. Zezwól na wygenerowanie pliku HAR z danymi poufnymi dodaje opcje do przycisku Eksportuj plik HAR, które umożliwiają eksportowanie z danymi poufnymi lub bez nich (po usunięciu danych poufnych).

Dane wrażliwe to dane w nagłówkach Cookie, Set-CookieAuthorization.

2 opcje przycisku Eksportuj HAR

Pole wyboru. Kolorowanie według typów zasobów wyróżnia żądania różnymi kolorami w zależności od ich typu w kolumnie Kaskada w logu sieci.

Kolumna kaskady na karcie Sieć bez kolorowania i z kolorowaniem.

Pole wyboru. Opcja Grupuj dziennik sieci według ramki jest taka sama jak opcja Grupuj według ramek w panelu Sieć. Ta opcja grupuje żądania rozpoczęte przez ramki w tekście.

Dziennik żądań sieci z żądaniami pogrupowanymi według ramek wbudowanych.

Pole wyboru. Wymuś blokowanie reklam na tej stronie blokuje wykryte reklamy na stronie, gdy Narzędzia deweloperskie są otwarte.

Żądanie sieciowe związane z reklamami wyświetlone w panelu Sieć po włączeniu filtra Zablokowane żądania.

Wyniki

W tej sekcji znajdziesz listę opcji, które umożliwiają dostosowanie panelu Wydajność.

Działanie kółka myszy na wykresie płomieniowym menu przypisuje kółku myszy działanie przewijania lub powiększania podczas poruszania się po wykresie płomieniowym.

Działanie kółka myszy na wykresie płomieniowym: Zmiana działania kółka myszy z przewijania na powiększanie na wykresie płomieniowym.
  • Przewiń
  • Zoom

W tym przykładzie na wykresie płomienistym w panelu Skuteczność pokazano zarówno przewijanie, jak i powiększanie za pomocą kółka myszy.

Konsola

W tej sekcji znajdziesz opcje, które umożliwiają dostosowanie konsola. Większość opcji jest taka sama jak w Ustawieniach konsoli.

Podobne opcje w Konsoli i Ustawieniach

Pole wyboru. Ukryj komunikaty o sieci – ukrywanie komunikatów o sieci w konsoli.

Ten film pokazuje, jak ukryć wiadomości sieci za pomocą tej opcji w Ustawienia. UstawieniachUstawieniach konsoli.

Pole wyboru. Tylko wybrany kontekst powoduje, że Konsola wyświetla wiadomości tylko w przypadku wybranego kontekstu: górnego, iframe, workera lub rozszerzenia.

Ten film pokazuje, jak włączyć tę opcję w Ustawienia. UstawieniachKonsoli > Ustawieniach oraz wybrać kontekst w Konsoli.

Pole wyboru. Rejestruj żądania XMLHttpRequest powoduje, że konsola rejestruje żądania XHR i fetch.

Ten film pokazuje, jak włączyć tę opcję w Ustawienia. UstawieniachKonsoli > Ustawieniach oraz jak rejestrować XHR finished loading wiadomości w Konsoli.

Pole wyboru. Pokaż sygnatury czasowe – Konsola wyświetla sygnatury czasowe obok wiadomości.

wiadomości z podawanymi w konsoli sygnaturami czasowymi;

Pole wyboru. Autouzupełnianie z historii sprawia, że Konsola sugeruje podczas pisania polecenia, które były używane wcześniej.

Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.

Autouzupełnianie na liście rozwijanej z opcją polecenia z historii w Konsoli.

Pole wyboru. Akceptuj sugestię autouzupełniania naciśnięciem klawisza Enter powoduje, że Konsola akceptuje wybraną sugestię z listy autouzupełniania po naciśnięciu Enter.

Ten film pokazuje, co się dzieje, gdy naciśniesz Enter przed włączeniem tej opcji i po jej włączeniu.

Pole wyboru. Grupuj podobne komunikaty w konsoli sprawia, że Konsola grupuje podobne komunikaty.

Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.

Podobne komunikaty w konsoli są grupowane.

Pole wyboru. Pokaż błędy CORS w konsoli powoduje, że konsola wyświetla zarejestrowane błędy CORS.

Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.

Konsola wyświetla błędy CORS.

Pole wyboru. Wczesna ocena sprawia, że konsola wyświetla podgląd danych wyjściowych podczas wpisywania polecenia.

Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.

Ten film pokazuje różne podglądy danych wyjściowych.

Pole wyboru. Traktowanie oceny kodu jako działania użytkownika powoduje, że każde polecenie uruchomione w Konsoli staje się interakcją użytkownika.

Innymi słowy, po ocenie ustawia on parametr navigator.userActivation.isActive na true. Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.

Ten film pokazuje wynik oceny funkcji navigator.userActivation.isActive przed i po włączeniu tej opcji.

Pole wyboru. Automatyczne rozwijanie wiadomości console.trace() powoduje, że Konsola wyświetla rozwinięte wiadomości console.trace() podczas ich rejestrowania.

Rozwinięty komunikat console.trace() w konsoli

Pole wyboru. Zachowaj dziennik po przejściu do innej strony sprawia, że konsola rejestruje wiadomość Navigated to po każdym przejściu do innej strony i zapisuje dzienniki na wszystkich stronach.

Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.

Konsole wyświetla komunikaty „Przejdź do” i zapisują dzienniki na różnych stronach.

Rozszerzenie

W tej sekcji znajdziesz opcje, które umożliwiają dostosowywanie obsługi linków w rozszerzeniach Narzędzi deweloperskich w Chrome.

Obsługa linków: Wybór opcji otwierania linków.
  • Automatycznie. Domyślnie otwiera pliki w panelu Źródła.
  • dowolna opcja, którą można dodać za pomocą rozszerzenia DevTools.

Trwałość

W tej sekcji znajdziesz listę opcji, które określają sposób zapisywania zmian w Narzędziach deweloperskich.

Pole wyboru. Włącz lokalne zastąpienia powoduje, że Narzędzia deweloperskie zachowują zmiany wprowadzone w źródłach po wczytaniu stron.

Więcej informacji znajdziesz w artykule Zastępowanie wartości lokalnych.

Debuger

W tej sekcji znajdziesz listę opcji, które kontrolują działanie Debugera.

Pole wyboru. Wyłącz JavaScript pozwala sprawdzić, jak wygląda i działa strona internetowa, gdy JavaScript jest wyłączony.

Załaduj ponownie stronę, aby sprawdzić, czy i w jaki sposób strona zależy od JavaScriptu podczas wczytywania.

Gdy JavaScript jest wyłączony, Chrome wyświetla odpowiednią ikonę Wyłączony JavaScript. na pasku adresu, a Narzędzia deweloperskie wyświetlają ikonę ostrzeżenia Ostrzeżenie. obok źródeł.

Ikona na pasku adresu i ikona ostrzeżenia obok źródeł w Narzędziach deweloperskich.

Pole wyboru. Wyłączanie asynchronicznych zrzutów stosu powoduje ukrycie „pełnej historii” operacji asynchronicznej w zrzucie stosu.

Domyślnie Debuger próbuje prześledzić operacje asynchroniczne, jeśli używana przez Ciebie platforma obsługuje takie śledzenie.

Asynchroniczna operacja w stosie wywołań.

Więcej informacji znajdziesz w artykule Wyświetlanie asynkronicznych ścieżek sterowania.

Cały świat

W tej sekcji znajdziesz listę opcji, które mają wpływ globalny w Narzędziach deweloperskich.

W tym filmie najpierw pokazujemy, jak kliknąć link i otworzyć nową kartę *bez* DevTools. Gdy ją włączysz, otworzy się nowa karta z Narzędziami deweloperskimi.

Pole wyboru. Szukaj podczas pisania sprawia, że DevTools „przeskakują” do pierwszego wyniku wyszukiwania podczas wpisywania zapytania. Jeśli jest wyłączona, Narzędzia deweloperskie przenoszą Cię do wyniku tylko wtedy, gdy naciśniesz Enter.

W tym filmie najpierw pokazujemy, jak DevTools „przeskakuje” podczas wpisywania zapytania. Gdy włączysz tę opcję, po naciśnięciu Enter Narzędzia deweloperskie przekierują Cię do pierwszego wyniku.

Synchronizacja

W tej sekcji możesz skonfigurować synchronizację ustawień między urządzeniami.

Pole wyboru. Włącz synchronizację ustawień umożliwia synchronizację ustawień DevTools na wielu urządzeniach.

Aby móc korzystać z tego ustawienia, musisz najpierw włączyć synchronizację Chrome. Więcej informacji znajdziesz w artykule Ustawienia synchronizacji.