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ń w dół 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.
Informacje o różnych ustawieniach mają następujące ikony:
- Pola wyboru:
- Listy:
- Wycofane:
Aby przywrócić ustawienia domyślne, przewiń kartę Preferencje na sam 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.
Format koloru 
określa format wartości kolorów CSS w sekcji Elementy > Style.
DevTools automatycznie konwertuje dowolną prawidłową wartość koloru na wybrany format.
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.
Ź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.
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ń.
Dopasowanie nawiasów klamrowych powoduje podkreślenie i wyróżnienie na jasnoczerwony w Edytorze nawiasów kwadratowych, klamrowych lub nawiasów bez pary.
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.
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.
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ć.
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:
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.
Zawijanie słów powoduje podział długich wierszy w drzewie DOM i zawijanie ich do następnego wiersza.
Opcja Pokaż komentarze HTML wyświetla komentarze HTML w drzewie DOM.
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.
Pokaż linijki po najechaniu – wyświetla linijki w widocznym obszarze po najechaniu kursorem na poszczególne elementy drzewa DOM.
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.
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.
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.
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.
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.
Wymuś blokowanie reklam w tej witrynie blokuje wykryte reklamy na stronie, gdy Narzędzia deweloperskie są otwarte.
Występy
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.
Ten film pokazuje, 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.
Autouzupełnianie z historii sprawia, że Konsola sugeruje polecenia uruchamiane wcześniej podczas pisania.
Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.
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.
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.
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.
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.
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 Narzędzia deweloperskie wyświetlają ikonę ostrzeżenia 
obok opcji Źródła.
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.
Więcej informacji znajdziesz w artykule Wyświetlanie asynchronicznego zrzutu stosu.
Globalny
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.
Z tego filmu dowiesz się, 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.