Wygląd i działanie Narzędzi deweloperskich oraz ich paneli możesz dostosować, klikając 
Ustawienia > Preferencje. Na tej karcie znajdziesz zarówno ogólne opcje dostosowywania, jak i opcje dotyczące panelu.
Aby określić ustawienia, otwórz 
Ustawienia > Ustawienia i przewiń do jednej z sekcji opisanych poniżej.
Aby dowiedzieć się, do czego służy dane ustawienie, wyszukaj jego nazwę na tej stronie i rozwiń jego opis.
W tym artykule znajdziesz informacje o różnych ustawieniach z tymi ikonami:
pola wyboru.- Listy rozwijane
Wycofany
Aby przywrócić ustawienia domyślne, przewiń na koniec karty Preferencje i kliknij Przywróć ustawienia domyślne i załaduj ponownie.
Wygląd
W tej sekcji znajdziesz listę opcji, które umożliwiają dostosowanie wyglądu Narzędzi deweloperskich.
Motywy 
ustawiają motyw kolorystyczny interfejsu Narzędzi deweloperskich.
Układ paneli 
porządkuje panele w panele.
Ma to wpływ na karty Elementy > Style oraz karty pokrewne oraz panel Źródła > Debuger. Opcja automatycznie sprawia, że układ zależy od szerokości Narzędzi deweloperskich.
Język 
określa język interfejsu użytkownika Narzędzi deweloperskich.
Aby zastosować to ustawienie, załaduj ponownie Narzędzia deweloperskie.
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.
Wyłącz nakładkę stanu wstrzymania, aby ukryć nakładkę 
Wstrzymano w debugerze w widoku, gdy wykonywanie kodu jest wstrzymane.
Pokaż nowości 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 dostosowywanie panelu Źródła.
Wyszukaj w skryptach anonimowych i skryptach treści umożliwia wyszukiwanie we wszystkich załadowanych plikach JavaScript, w tym w rozszerzeniach Chrome, na karcie Szukaj.
Ten film pokazuje, jak wyszukiwać tekst w pliku źródłowym rozszerzenia.
Gdy przełączasz się między kartami w Edytorze, opcja Automatycznie pokazuj pliki na pasku bocznym wybiera pliki w panelu Źródła > Strona.
Ten film pokazuje, jak po włączeniu tej opcji panel Źródła wybiera pliki w drzewie nawigacyjnym podczas przełączania się między kartami.
Włączanie map źródeł JavaScriptu pozwala Narzędziom deweloperskim znajdować źródła wygenerowanych lub zminiaturyzowanych plików JavaScript.
Włączanie przesuwania zaznaczenia klawiszem Tab powoduje, że klawisz 
Tab przesuwa zaznaczenie w DevTools, 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 załadujesz ponownie Narzędzia deweloperskie, klawisz Tab przeniesie zaznaczenie.
Wykryj wcięcie ustawia wcięcie odpowiadające temu, które znajduje się w pliku ź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 pokazujemy domyślne wcięcie wynoszące 8 spacji. Po włączeniu tej opcji domyślne wcięcie zostanie zastąpione wcięciem pliku źródłowego.
Autouzupełnianie umożliwia korzystanie z 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ń.
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.
Dopasowanie nawiasów – w jasno czerwonym kolorze podkreśla w Edytorze nawiasy kwadratowe, nawiasy klamrowe i nawiasy bez pary.
Zawijanie kodu umożliwia zwijanie i rozwijanie bloków kodu w nawiasach klamrowych w Edytorze.
Wymaga ponownego załadowania 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ę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.
Wyświetlaj wartości zmiennych w tekście podczas debugowania – wyświetla wartości zmiennych obok instrukcji przypisania podczas wstrzymania wykonywania kodu.
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.
W tym filmie po raz pierwszy panel Źródła jest nieostry po wstrzymaniu w punkcie 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.
Automatyczne stosowanie formatowania stylistycznego do zminifikowanych źródeł treści sprawia, że te źródła są czytelne.
W trybie ładnego wydruku Edytor może wyświetlić jedną długą linię kodu na kilku wierszach, poprzedzoną znakiem -, aby wskazać, że jest to kontynuacja linii.
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.
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.
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 pozostawisz to ustawienie wyłączone, Narzędzia deweloperskie będą logowały się w komunikatach w konsoli, podobnych do tych:
Domyślne wcięcie 
pozwala wybrać liczbę spacji wstawianych klawiszem 
Tab w Edytorze.
W tym przykładzie pokazujemy, jak ustawić domyślne wcięcie, zaczynając od 8 spacji, a następnie na znak Tab.
Elementy
W tej sekcji znajdziesz listę opcji, które umożliwiają dostosowanie panelu Elementy.
Pokaż shadow DOM klienta użytkownika wyświetla węzły cienia DOM w drzewie DOM.
Zawijanie tekstu powoduje dzielenie długich wierszy w drzewie DOM i przenoszenie ich do następnego wiersza.
Pokaż komentarze HTML wyświetla komentarze HTML w drzewie DOM.
Pokaż węzeł DOM po najechaniu kursorem wybiera odpowiedni węzeł w drzewie DOM, gdy najedziesz kursorem na element w widocznym obszarze w trybie inspekcji 
.
Ten film po raz pierwszy pokazuje, że węzły DOM nie są wybrane w drzewie DOM. Gdy włączysz tę opcję, panel Elementy będzie wybierać węzły po najechaniu na nie kursorem.
Pokaż etykietkę ze szczegółami inspekcji – wyświetla etykietkę w widocznym obszarze w trybie inspekcji 
po najechaniu kursorem na element.
Pokaż linijki pod kursorem myszy wyświetla linijki w widoku po najechaniu kursorem na elementy w drzewie DOM.
Po najechaniu kursorem na właściwość w panelu Style Pokaż etykietkę dokumentacji CSS wyświetla etykietkę z krótkim opisem.
Link Więcej informacji powoduje przejście do pliku referencyjnego CSS MDN w danej usłudze.
Sieć
W tej sekcji znajdziesz opcje, które umożliwiają dostosowywanie panelu Sieć. Większość opcji jest taka sama jak w ustawieniach panelu.
Zachowaj dziennik to to samo co Zachowaj dziennik w panelu Sieć. Oszczędza żądania podczas wczytywania stron.
Na początku filmu widać odświeżanie dziennika żądań po ponownym załadowaniu strony, a potem jego zapisanie po włączeniu tej opcji.
Rejestruj dziennik sieci to to samo co 
Rejestruj dziennik sieci w panelu Sieć. rozpoczyna lub zatrzymuje rejestrowanie żądań w dzienniku sieciowym.
Włącz blokowanie żądań sieciowych blokuje żądania pasujące do wzorców z panelu Blokowanie żądań sieciowych.
Na początku tego filmu widać, że żądania nie są blokowane. Następnie gdy włączysz tę opcję, zablokuje je wzorzec w panelu Blokowanie żądań sieciowych.
Funkcja Wyłącz pamięć podręczną (gdy Narzędzia deweloperskie jest otwarte) odpowiada opcji Wyłącz pamięć podręczną w panelu Sieć. Wyłącza pamięć podręczną przeglądarki.
Zezwalaj na generowanie pliku HAR z danymi wrażliwymi dodaje opcje do przycisku Eksportuj HAR, które umożliwia eksportowanie z danymi wrażliwymi lub bez nich (oczyszczone).
Dane wrażliwe to dane w nagłówkach Cookie, Set-Cookie i Authorization.
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.
Opcja Grupuj dziennik sieci według ramki jest taka sama jak opcja Grupuj według ramek w panelu Sieć. Ta opcja grupuje żądania zainicjowane przez wbudowane ramki.
Wymuś blokowanie reklam w tej witrynie blokuje wykryte reklamy na stronie, gdy Narzędzia deweloperskie są otwarte.
Wyniki
W tej sekcji znajdziesz opcje, które umożliwiają dostosowanie panelu Skuteczność.
Działanie kółka myszy na wykresie płomieniowym 
powoduje przypisanie do kółka myszy działania przewijania lub powiększania podczas poruszania się po wykresie płomieniowym.
W tym przykładzie działania kółka myszy dotyczące przewijania i powiększania są widoczne na wykresie płomienistym w panelu Skuteczność.
Konsola
W tej sekcji znajdziesz opcje umożliwiające dostosowanie konsoli. Większość opcji jest taka sama jak w Ustawieniach konsoli.
Opcja Ukryj komunikaty sieciowe ukrywa wiadomości sieciowe w konsoli.
Ten film pokazuje, jak ukrywać wiadomości sieciowe przy użyciu tej opcji zarówno w Ustawieniach 
, jak i w ustawieniach konsoli.
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 
Ustawieniach i w sekcji Konsola > Ustawienia oraz wybrać kontekst w Konsoli.
Rejestruj żądania XMLHttpRequest powoduje, że konsola rejestruje żądania XHR i fetch.
Ten film pokazuje, jak włączyć tę opcję w 
Ustawieniach i Konsola > Ustawienia oraz jak zarejestrować wiadomości XHR finished loading w Konsoli.
Pokaż sygnatury czasowe – Konsola wyświetla sygnatury czasowe obok wiadomości.
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.
Akceptuj sugestię autouzupełniania naciśnięciem klawisza Enter sprawia, ż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.
Grupuj podobne wiadomości w konsoli sprawia, że podobne wiadomości są grupowane w Konsoli.
Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.
Pokaż błędy CORS w konsoli powoduje, że konsola wyświetla zarejestrowane błędy CORS.
Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.
Gotowa ocena sprawia, że podczas wpisywania polecenia w konsoli wyświetla się podgląd danych wyjściowych.
Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.
Ten film przedstawia różne podglądy wyjścia.
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 przedstawia wynik oceny funkcji navigator.userActivation.isActive przed włączeniem tej opcji i po jej włączeniu.
Automatycznie rozwijaj komunikaty konsoli.trace() sprawia, że Console wyświetla rozwinięte wiadomości console.trace() podczas ich rejestrowania.
Zachowaj dziennik po przejściu na inną stronę sprawia, że konsola rejestruje wiadomość Navigated to po każdym przejściu na inną stronę i zapisuje dzienniki na wszystkich stronach.
Tę samą opcję znajdziesz w sekcji Konsola > Ustawienia.
Rozszerzenie
W tej sekcji znajdziesz opcje, które dostosowują obsługę linków w rozszerzeniach do Narzędzi deweloperskich do Chrome.
Obsługa linków 
to opcja umożliwiająca otwieranie plików po kliknięciu linku do pliku źródłowego, np. w panelu Elementy > Style.
Trwałość
W tej sekcji znajdziesz opcje, które określają, jak Narzędzia deweloperskie zapisują wprowadzane przez Ciebie zmiany.
Włącz lokalne zastąpienia sprawia, ż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 opcje sterujące działaniem Debugera.
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 podczas wczytywania strona zależy od JavaScriptu i w jaki sposób.
Gdy JavaScript jest wyłączony, Chrome wyświetla odpowiednią ikonę 
na pasku adresu, a Narzędzia deweloperskie wyświetlają ikonę ostrzeżenia 
obok źródeł.
Wyłącz asynchroniczne zrzuty stosu ukrywa „pełną historię” operacji asynchronicznego w stosie wywołań.
Domyślnie Debuger próbuje prześledzić operacje asynchroniczne, jeśli używana przez Ciebie platforma obsługuje takie śledzenie.
Więcej informacji znajdziesz w artykule Wyświetlanie asynkronicznych ścieżek sterowania.
Cały świat
W tej sekcji znajdziesz opcje, które mają ogólny wpływ na DevTools.
Automatycznie otwieraj Narzędzia deweloperskie w przypadku wyskakujących okienek powoduje otwarcie Narzędzi deweloperskich po kliknięciu linków, które otwierają nowe karty. Oznacza to, że wszystkie linki z atrybutem target=_blank.
W tym filmie po raz pierwszy pokazujemy, jak kliknąć link i otworzyć nową kartę *bez* Narzędzi deweloperskich. Gdy ją włączysz, otworzy się nowa karta z Narzędziami deweloperskimi.
Szukaj podczas pisania sprawia, że DevTools „przeskakują” do pierwszego wyniku wyszukiwania podczas wpisywania zapytania. Jeśli ta opcja jest wyłączona, Narzędzia deweloperskie przejdą do wyników tylko wtedy, gdy naciśniesz Enter.
W tym filmie po raz pierwszy pokazujemy, jak Narzędzia deweloperskie „przeskakują” 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.
Włącz synchronizację ustawień, aby synchronizować ustawienia Narzędzi deweloperskich 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.