Skonfiguruj wygląd i działanie Narzędzi deweloperskich i ich paneli, klikając Ustawienia > Preferencje. Na tej karcie znajdują się zarówno ogólne opcje dostosowywania, jak i opcje zależne od panelu.
Aby skonfigurować ustawienia, otwórz Ustawienia > Ustawienia i przewiń do jednej z sekcji opisanych poniżej.
Aby dowiedzieć się, do czego służy poszczególne ustawienia, wyszukaj na tej stronie nazwę ustawienia i rozwiń jego opis za pomocą zdarzenia add_circle.
Informacje o różnych ustawieniach mają następujące ikony:
- Pola wyboru:
- Listy:
- Wycofane:
Aby przywrócić ustawienia domyślne, przewiń kartę Preferencje na koniec i kliknij Przywróć ustawienia domyślne i załaduj ponownie.
Wygląd
W tej sekcji znajdziesz opcje, które umożliwiają dostosowanie wyglądu Narzędzi deweloperskich.
Motywy
ustawia motyw kolorów dla interfejsu Narzędzi deweloperskich.
Układ panelu
porządkuje panele w panelach.
Dotyczy to Elementów > Style, kart „siostrzane” oraz panelu Źródła > Debuger. Jeśli wybierzesz opcję auto, układ będzie zależał od szerokości Narzędzi deweloperskich.
Język
określa język interfejsu Narzędzi deweloperskich.
Aby zastosować to ustawienie, załaduj ponownie Narzędzia deweloperskie.
Użycie skrótu Ctrl/Cmd + 0–9 do przełączania paneli pozwala otwierać panele za pomocą klawiatury.
Ten film pokazuje, jak przełączać się między kartami za pomocą odpowiednich skrótów klawiszowych.
Wyłącz nakładkę stanu wstrzymania ukrywa nakładkę Wstrzymano w debugerze
w widocznym obszarze, gdy wykonywanie kodu jest wstrzymane.
Pokaż, co nowego po każdej aktualizacji, automatycznie otwiera kartę Co nowego po każdej aktualizacji Chrome.
![Panel Co nowego.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-s-drawer-tab-284de1eb4dca3.png?authuser=6&hl=pl)
Źródła
W tej sekcji znajdziesz opcje umożliwiające dostosowanie panelu Źródła.
Wyszukiwanie w skryptach anonimowych i treści umożliwia wyszukiwanie wszystkich wczytywanych plików JavaScript, w tym plików z rozszerzeniami do Chrome, za pomocą karty Szukaj.
Ten film pokazuje, jak wyszukać tekst w pliku źródłowym rozszerzenia.
Funkcja Automatycznie pokazuj pliki na pasku bocznym wybiera pliki w panelu Źródła > Strona podczas przełączania się między kartami w Edytorze.
W tym filmie pokazujemy, jak po włączeniu tej opcji panel Źródła wybiera pliki w drzewie nawigacyjnym podczas przełączania się między kartami.
Dzięki opcji Włącz mapy źródeł JavaScript Narzędzia deweloperskie mogą znajdować źródła wygenerowanych lub zminifikowanych plików JavaScript.
![Na pasku stanu panel Źródła zawiera link do zmniejszonego pliku.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-sources-panel-shows-18a5986aebe76.png?authuser=6&hl=pl)
Włącz przesuwanie zaznaczenia klawiszem Tab powoduje, że klawisz
Tab przenosi zaznaczenie w Narzędziach deweloperskich, zamiast wstawiać znak Tab w Edytorze.
Wymaga ponownego uruchomienia Narzędzi deweloperskich.
Ten film najpierw przedstawia znaki tabulacji wstawione przy użyciu klawisza Tab. Gdy włączysz tę opcję i załadujesz ponownie Narzędzia deweloperskie, klawisz Tab przeniesie zaznaczenie.
Opcja Wykryj wcięcie ustawia wcięcie na wartość w pliku źródłowym otwartym w Edytorze.
Wymaga ponownego uruchomienia Narzędzi deweloperskich.
W tym filmie na początku wyświetla się domyślne wcięcie, które wynosi 8 spacji. Po włączeniu tej opcji domyślne wcięcie zastępuje domyślne wcięcie w pliku źródłowym.
Autouzupełnianie włącza przydatne sugestie w Edytorze.
Ten film nie zawiera najpierw żadnych sugestii. Gdy włączysz tę opcję, Edytor będzie wyświetlać sugestie dotyczące wykonywania poleceń.
Automatyczne zamykanie nawiasów kwadratowych podczas wpisywania nawiasu zamykającego lub tagu otwierającego.
Ten film pokazuje, jak wpisywać nawiasy otwierające przed włączeniem automatycznego zamykania nawiasów i po nim.
Dopasowanie nawiasów klamrowych powoduje podkreślenie i wyróżnienie na jasnoczerwony w Edytorze nawiasów kwadratowych, klamrowych lub nawiasów bez pary.
![Nawias klamrowy bez pary podkreślony czerwoną linią.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/a-curly-bracket-without-39b53417db5f3.png?authuser=6&hl=pl)
Zawijanie kodu pozwala zwijać i rozwijać bloki kodu w nawiasach klamrowych w Edytorze.
Wymaga ponownego uruchomienia Narzędzi deweloperskich.
Ten film pokazuje, jak złożyć bloki kodu po włączeniu tej opcji.
Pokaż znaki odstępu
wyświetla znaki odstępów w Edytorze.
Wymaga ponownego uruchomienia Narzędzi deweloperskich. Opcje mają następujące działanie:
- Opcja Wszystkie oznacza wszystkie znaki odstępu jako kropki (
...
). Dodatkowo Edytor oznacza znak Tab jako wiersz (—
). - Zakończenie podświetla odstępy na końcu wierszy na jasnoczerwony kolor.
Wyświetlanie wartości zmiennych wyświetlanych w tekście podczas debugowania pokazuje wartości zmiennych obok instrukcji przypisywania, gdy wykonywanie jest wstrzymane.
![Debuger wstrzymany podczas wykonywania funkcji wyświetla wartości zmiennych obok instrukcji przypisywania.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-debugger-paused-durin-7df9450bef37b.png?authuser=6&hl=pl)
Podczas aktywowania punktu przerwania zaznacz panel Źródła i otwiera Źródła > Edytor w wierszu z punktem przerwania, który wstrzymał wykonanie.
Ten film po raz pierwszy pokazuje panel Źródła nieaktywny po wstrzymaniu. Gdy włączysz tę opcję, Narzędzia deweloperskie otwierają Edytor w panelu Źródła i wyświetlają wiersz kodu z punktem przerwania.
Automatyczne dodawanie zmniejszonych źródeł wydruku pozwala na ich odczytanie.
W przypadku drukowania Edytor może wyświetlić pojedynczy długi wiersz kodu w kilku wierszach, poprzedzony znakiem -
, który wskazuje, że jest to kontynuacja wiersza.
![Zastosuj stylizowany kod w panelu Źródła.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/pretty-print.png?authuser=6&hl=pl)
Włączenie map źródeł CSS pozwala Narzędziam deweloperskim znaleźć źródła wygenerowanych plików CSS, na przykład .scss
, i Cię je wyświetlić.
![Panel Źródła pokazuje pliki .scss w sekcji Utworzone w drzewie nawigacyjnym. Okienko Style w panelu Elementy zawiera linki do źródeł .scss obok reguł CSS.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-sources-panel-shows-e421484c90f24.png?authuser=6&hl=pl)
Opcja Zezwalaj na przewijanie po końcu pliku pozwala przewinąć dalej niż ostatni wiersz w Edytorze.
Z tego filmu dowiesz się, jak przewinąć plik po włączeniu tej opcji.
Zezwalaj Narzędziam deweloperskim na ładowanie 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 pozostanie wyłączona, Narzędzia deweloperskie będą zapisywać w komunikatach w konsoli komunikaty podobne do tych poniżej:
![Komunikat w konsoli informujący, że ładowanie ze zdalnej ścieżki pliku jest zabronione ze względów bezpieczeństwa.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/a-message-the-console-in-052f2c13b3dc.png?authuser=6&hl=pl)
Wcięcie domyślne
pozwala wybrać liczbę spacji, jaką można wstawić
klawisza Tab w Edytorze.
Ten przykład pokazuje, jak ustawić domyślne wcięcie na osiem spacji, a następnie znak tabulacji.
Elementy
W tej sekcji znajdziesz opcje umożliwiające dostosowanie panelu Elementy.
Pokaż model shadow DOM klienta użytkownika wyświetla węzły DOM w drzewie DOM.
![Panel Elementy pokazuje węzły Shadow DOM.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-elements-panel-shows-088126d24e216.png?authuser=6&hl=pl)
Zawijanie słów powoduje podział długich wierszy w drzewie DOM i zawijanie ich do następnego wiersza.
![Panel Elementy dzieli długie wiersze według słów i zawija je do następnego wiersza.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-elements-panel-breaks-8f610414be113.png?authuser=6&hl=pl)
Opcja Pokaż komentarze HTML wyświetla komentarze HTML w drzewie DOM.
![Panel Elementy wyświetla komentarze HTML.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-elements-panel-shows-69db5e051bcd3.png?authuser=6&hl=pl)
Funkcja Pokaż węzeł DOM po najechaniu wybiera odpowiedni węzeł w drzewie DOM, gdy najeżdżasz kursorem na element w widocznym obszarze w trybie inspekcji
.
Ten film po raz pierwszy pokazuje, że w drzewie DOM nie są wybrane węzły DOM. Gdy włączysz tę opcję, panel Elementy wybiera węzły widoczne po najechaniu kursorem.
Pokaż etykietkę szczegółowej inspekcji – wyświetla etykietkę w widocznym obszarze w trybie inspekcji
, gdy najedziesz kursorem na element.
![Etykietka szczegółowa wyświetlana w trybie inspekcji.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-detailed-tooltip-show-28d3aa44e33a2.png?authuser=6&hl=pl)
Pokaż linijki po najechaniu – wyświetla linijki w widocznym obszarze po najechaniu kursorem na poszczególne elementy drzewa DOM.
![Linijki są widoczne w widocznym obszarze.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/rulers-shown-viewport-ae8f481c23e7e.png?authuser=6&hl=pl)
Pokaż etykietkę dokumentacji CSS po najechaniu kursorem na właściwość w panelu Style wyświetla etykietkę z krótkim opisem.
Link Więcej informacji prowadzi do dokumentu CSS w MDN dotyczącego danej usługi.
![Etykietka z dokumentacją właściwości CSS.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-tooltip-documentatio-7c33fb7ae9d4e.png?authuser=6&hl=pl)
Sieć
W tej sekcji znajdziesz opcje umożliwiające dostosowanie panelu Sieć. Większość opcji jest taka sama jak w ustawieniach panelu.
Opcja Zachowaj dziennik jest taka sama jak opcja Zachowaj dziennik w panelu Sieć. Zapisuje żądania po każdym wczytaniu stron.
W filmie widać, że dziennik żądań jest odświeżany przy ponownym załadowaniu strony, a następnie pozostaje widoczny po włączeniu tej opcji.
Rejestruj dziennik sieci tak samo jak
Rejestruj dziennik sieci w panelu Sieć. Uruchamia lub zatrzymuje rejestrowanie żądań w dzienniku sieciowym.
![Przycisk Zarejestruj dziennik sieci w panelu Network (Sieć).](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-record-network-log-bu-ae1f7d1e69e3.png?authuser=6&hl=pl)
Włącz blokowanie żądań sieciowych blokuje żądania pasujące do wzorców w szufladzie Blokowanie żądań sieciowych.
Ten film po raz pierwszy pokazuje, że żądania nie są zablokowane. Następnie, gdy włączysz tę opcję, będzie je blokować wzorzec w szufladzie Blokowanie żądań sieciowych.
Opcja Wyłącz pamięć podręczną (gdy Narzędzia deweloperskie są otwarte) działa tak samo jak opcja Wyłącz pamięć podręczną w panelu Sieć. Wyłącza pamięć podręczną przeglądarki.
![Pole wyboru Wyłącz pamięć podręczną.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-disable-cache-checkbo-f09250026a0aa.png?authuser=6&hl=pl)
Typy zasobów oznaczone kolorami wyróżniają żądania w różnych kolorach w zależności od ich typu w kolumnie Waterfall w dzienniku sieciowym.
![Kolumna Kaskada na karcie Sieć bez oznaczeń i kolorów.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-waterfall-column-the-c3f0d296db17e.png?authuser=6&hl=pl)
Opcja Grupuj dziennik sieci według ramki działa tak samo jak opcja Grupuj według ramek w panelu Sieć. Ta opcja grupuje żądania zainicjowane przez ramki w tekście.
![Dziennik żądań sieciowych z żądaniami pogrupowanymi według ramek w tekście.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-network-request-log-8ecfc9e3f8259.png?authuser=6&hl=pl)
Wymuś blokowanie reklam w tej witrynie blokuje wykryte reklamy na stronie, gdy Narzędzia deweloperskie są otwarte.
![Żądanie sieci związane z reklamą widoczne w panelu Sieć z włączonym filtrem Zablokowane żądania.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/an-ad-related-network-req-3e1c284d89cd5.png?authuser=6&hl=pl)
Wydajność
W tej sekcji znajdziesz opcje, które umożliwiają dostosowanie panelu Wydajność.
Działanie kółka myszy w wykresu płomienia
przypisuje do kółka myszy działanie związane z przewijaniem lub powiększaniem, gdy poruszasz się po wykresie płomieniowym.
Ten przykład pokazuje działania kółka myszy służącego do przewijania i powiększania na wykresie płomieniowym w panelu Wydajność.
Konsola
W tej sekcji znajdziesz opcje umożliwiające dostosowywanie konsoli. Większość opcji jest taka sama jak w Ustawieniach konsoli.
Opcja Ukryj komunikaty sieciowe ukrywa komunikaty sieciowe w konsoli.
Z tego filmu dowiesz się, jak ukryć komunikaty sieciowe przy użyciu tej opcji zarówno w Ustawieniach, jak i w Ustawieniach konsoli.
Opcja Tylko wybrany kontekst sprawia, że w konsoli wyświetlają się tylko komunikaty dotyczące wybranego kontekstu: na górze, elementu iframe, instancji roboczej lub rozszerzenia.
Z tego filmu dowiesz się, jak włączyć tę opcję zarówno w sekcji Ustawienia, jak i w sekcji Konsola > Ustawienia, a także jak wybrać kontekst w konsoli.
Log XMLHttpRequests generuje żądania XHR dziennika konsoli i żądania pobierania.
Ten film pokazuje, jak włączyć tę opcję zarówno w Ustawienia, jak i Konsola > Ustawienia, a także jak rejestrować komunikaty
XHR finished loading
w konsoli.
Pokaż sygnatury czasowe powoduje, że Konsola wyświetla sygnatury czasowe obok wiadomości.
![Wiadomości z sygnaturami czasowymi wymienionymi w konsoli.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/messages-timestamps-list-040be725ea68b.png?authuser=6&hl=pl)
Autouzupełnianie z historii sprawia, że Konsola sugeruje polecenia uruchamiane wcześniej podczas pisania.
Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.
![Menu autouzupełniania z opcją polecenia z historii konsoli.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/autocomplete-drop-down-a-6e0a4dc95d8d5.png?authuser=6&hl=pl)
Zaakceptuj sugestię autouzupełniania naciśnięciem klawisza Enter po naciśnięciu Enter Konsola zaakceptuje wybraną sugestię z menu autouzupełniania.
Na tym filmie widać, co się dzieje, gdy naciśniesz Enter przed włączeniem tej opcji i po jej włączeniu.
Grupowanie podobnych wiadomości w konsoli sprawia, że grupa Konsola tworzy podobne wiadomości razem.
Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.
![Podobne wiadomości w konsoli.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/similar-messages-the-con-2026bc985883e.png?authuser=6&hl=pl)
Pokaż błędy CORS w konsoli powoduje, że w konsoli wyświetlają się błędy CORS zarejestrowane.
Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.
![Konsola pokazuje błędy CORS.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/console-shows-cors-errors-57f9bea2680a4.png?authuser=6&hl=pl)
Ocena z zaangażowaniem powoduje, że podczas wpisywania polecenia w konsoli wyświetla się podgląd danych wyjściowych.
Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.
Ten film pokazuje różne podglądy wyników.
Traktuj ocenę kodu jako działanie użytkownika zmienia każde polecenie uruchamiane w konsoli w interakcję z użytkownikiem.
Inaczej mówiąc, podczas oceny ustawia navigator.userActivation.isActive
na true
. Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.
Film przedstawia wynik oceny wartości navigator.userActivation.isActive
przed włączeniem tej opcji i po jej włączeniu.
Automatycznie rozwiń komunikaty Console.trace() sprawia, że zarejestrowane w konsoli komunikaty console.trace()
są rozwinięte.
![Rozwinięta komunikat konsoli.trace() w konsoli.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/an-expanded-consoletrace-a083a714be536.png?authuser=6&hl=pl)
Opcja Zachowaj dziennik podczas nawigacji sprawia, że dziennik konsoli wyświetla komunikat Navigated to
przy każdej nawigacji i zapisuje logi na wszystkich stronach.
Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.
![Konsola wyświetli komunikaty „Otwarto stronę” i zapisuje logi na różnych stronach.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-console-shows-naviga-f4bc36001187f.png?authuser=6&hl=pl)
Rozszerzenie
W tej sekcji znajdziesz opcje, które umożliwiają dostosowanie obsługi linków w przypadku rozszerzeń Narzędzi deweloperskich w Chrome.
Obsługa linków
ustawia opcję otwierania plików po kliknięciu linku do pliku źródłowego, na przykład w panelu Elementy > Style.
Trwałość
W tej sekcji znajdziesz opcje, które określają, jak Narzędzia deweloperskie zapisują wprowadzone zmiany.
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 sekcji Zastąpienia lokalne.
Debuger
W tej sekcji znajdziesz opcje, które określają działanie Debugera.
Opcja Wyłącz JavaScript pozwala sprawdzić, jak wygląda i działa strona internetowa, gdy JavaScript jest wyłączony.
Załaduj ponownie stronę, aby zobaczyć, czy podczas ładowania strony zależy od JavaScriptu, a jeśli tak, to w jaki sposób.
Gdy JavaScript jest wyłączony, Chrome wyświetla na pasku adresu odpowiednią ikonę , a w Narzędziach deweloperskich obok opcji Źródła widoczna jest ikona ostrzeżenia
.
![Ikona na pasku adresu i ikona ostrzeżenia obok opcji Źródła w Narzędziach deweloperskich.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/an-icon-the-address-bar-92ceba2ae707c.png?authuser=6&hl=pl)
Wyłącz asynchroniczne zrzuty stosu ukrywa „pełną historię” operacji asynchronicznej w stosie wywołań.
Domyślnie Debuger próbuje śledzić operacje asynchroniczne, jeśli używana przez Ciebie platforma obsługuje takie śledzenie.
![Operacja asynchroniczna w stosie wywołań.](https://developer.chrome.google.cn/static/docs/devtools/settings/preferences/image/the-async-operation-the-7d1209cb7afdd.png?authuser=6&hl=pl)
Więcej informacji znajdziesz w artykule Wyświetlanie asynchronicznego zrzutu stosu.
Globalne
W tej sekcji znajdziesz listę opcji w Narzędziach deweloperskich, które mają wpływ na cały świat.
Opcja Automatycznie otwieraj Narzędzia deweloperskie w przypadku wyskakujących okienek otwiera te narzędzia, gdy klikniesz link, który otwiera nowe karty. Oznacza to, że wszystkie linki z usługą target=_blank
.
Ten film pokazuje, jak kliknąć link i otworzyć nową kartę *bez* Narzędzi deweloperskich. Gdy włączysz tę opcję, otworzy się nowa karta *z* Narzędziami deweloperskimi.
Wyszukiwanie podczas pisania sprawia, że Narzędzia deweloperskie przechodzą do pierwszego wyniku wyszukiwania, gdy wpisujesz zapytanie. Jeśli ta opcja jest wyłączona, w Narzędziach deweloperskich zobaczysz wynik dopiero po naciśnięciu Enter.
Ten film po raz pierwszy pokazuje, jak Narzędzia deweloperskie „przeskakują” podczas wpisywania zapytania. Gdy włączysz tę opcję, po naciśnięciu Enter w Narzędziach deweloperskich zobaczysz pierwszy wynik.
Synchronizuj
W tej sekcji możesz skonfigurować synchronizację ustawień między urządzeniami.
Włącz synchronizację ustawień umożliwia synchronizowanie ustawień Narzędzi deweloperskich na wielu urządzeniach.
Aby użyć tego ustawienia, najpierw włącz Synchronizację Chrome. Więcej informacji znajdziesz w artykule Ustawienia synchronizacji.