Ustawienia

Sofia Emelianova
Sofia Emelianova

Skonfiguruj wygląd i działanie Narzędzi deweloperskich i ich paneli, klikając Ustawienia. 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 > Ustawienia i przewiń do jednej z sekcji opisanych poniżej.

W sekcji Wygląd na karcie Ustawienia.

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: Pole wyboru.
  • Listy: Menu.
  • Wycofane: Rola wycofana.

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 Menu. ustawia motyw kolorów dla interfejsu Narzędzi deweloperskich.

Układy: Zmieniam motyw Narzędzi deweloperskich z preferencji systemowej na ciemny na jasny.
  • Preferencja systemowa
  • Jasny
  • Ciemny

Układ panelu Menu. 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.

Układ panelu: zmiana układu panelu elementu z poziomego na pionowy,
  • orientacja pozioma
  • kategoria
  • automatycznie

Język Menu. określa język interfejsu Narzędzi deweloperskich.

Aby zastosować to ustawienie, załaduj ponownie Narzędzia deweloperskie.

Język: Panel Ustawienia w języku chińskim.
  • Język interfejsu przeglądarki
  • Jedną z opcji regionalnych, w tym przykładzie jest język chiński.

Pole wyboru. Użycie skrótu Ctrl/Cmd + 09 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.

Pole wyboru. Wyłącz nakładkę stanu wstrzymania ukrywa nakładkę Wstrzymano w debugerze Baw się i mijaj przyciski. w widocznym obszarze, gdy wykonywanie kodu jest wstrzymane.

Pole wyboru. Pokaż, co nowego po każdej aktualizacji, automatycznie otwiera kartę Co nowego po każdej aktualizacji Chrome.

Panel Co nowego.

Źródła

W tej sekcji znajdziesz opcje umożliwiające dostosowanie panelu Źródła.

Pole wyboru. 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.

Pole wyboru. 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.

Pole wyboru. 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.

Pole wyboru. Włącz przesuwanie zaznaczenia klawiszem Tab powoduje, że klawisz Klawisz Tab. 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.

Pole wyboru. 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.

Pole wyboru. 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ń.

Pole wyboru. 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.

Pole wyboru. 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ą.

Pole wyboru. 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 Menu. 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.
Pokaż znaki odstępu: Wybrane opcje: Wszystkie i Końcowe.
  • Brak
  • Wszystko (...)
  • Śladami

Pole wyboru. 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.

Pole wyboru. 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.

Pole wyboru. 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.

Pole wyboru. 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.

Pole wyboru. 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.

Pole wyboru. 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.

Wcięcie domyślne Menu. pozwala wybrać liczbę spacji, jaką można wstawić Klawisz Tab. klawisza Tab w Edytorze.

Domyślne wcięcie: Wyłączenie opcji zastępowania i zmiany domyślnego wcięcia z 2 na 8, a następnie na klawisz Tab.
  • 2 spacje
  • 4 spacje
  • 8 spacji
  • Znak tabulacji

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.

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

Panel Elementy pokazuje węzły Shadow DOM.

Pole wyboru. 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.

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

Panel Elementy wyświetla komentarze HTML.

Pole wyboru. 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 Zbadaj..

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.

Pole wyboru. Pokaż etykietkę szczegółowej inspekcji – wyświetla etykietkę w widocznym obszarze w trybie inspekcji Zbadaj., gdy najedziesz kursorem na element.

Etykietka szczegółowa wyświetlana w trybie inspekcji.

Pole wyboru. 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.

Pole wyboru. 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.

Sieć

W tej sekcji znajdziesz opcje umożliwiające dostosowanie panelu Sieć. Większość opcji jest taka sama jak w ustawieniach panelu.

Pole wyboru. 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.

Pole wyboru. Rejestruj dziennik sieci tak samo jak Zarejestruj dziennik sieci. Rejestruj dziennik sieci w panelu Sieć. Uruchamia lub zatrzymuje rejestrowanie żądań w dzienniku sieciowym.

Przycisk Zarejestruj dziennik sieci w panelu Network (Sieć).

Pole wyboru. 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.

Pole wyboru. 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ą.

Pole wyboru. 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.

Pole wyboru. 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.

Pole wyboru. 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.

Wydajność

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

Działanie kółka myszy w wykresu płomienia Menu. przypisuje do kółka myszy działanie związane z przewijaniem lub powiększaniem, gdy poruszasz się po wykresie płomieniowym.

Działanie kółka myszy na wykresie płomieniowym: Zmiana działania kółka myszy ze przewijania na powiększenie wykresu płomieniowego.
  • Przewiń
  • Zoom

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.

Podobne opcje w Konsoli i w Ustawieniach.

Pole wyboru. 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 Ustawienia. Ustawieniach, jak i w Ustawieniach konsoli.

Pole wyboru. 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. Ustawienia, jak i w sekcji Konsola > Ustawienia, a także jak wybrać kontekst w konsoli.

Pole wyboru. Log XMLHttpRequests generuje żądania XHR dziennika konsoli i żądania pobierania.

Ten film pokazuje, jak włączyć tę opcję zarówno w Ustawienia. Ustawienia, jak i Konsola > Ustawienia, a także jak rejestrować komunikaty XHR finished loading w konsoli.

Pole wyboru. Pokaż sygnatury czasowe powoduje, że Konsola wyświetla sygnatury czasowe obok wiadomości.

Wiadomości z sygnaturami czasowymi wymienionymi w konsoli.

Pole wyboru. 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.

Pole wyboru. 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.

Pole wyboru. 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.

Pole wyboru. 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.

Pole wyboru. 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.

Pole wyboru. 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.

Pole wyboru. Automatycznie rozwiń komunikaty Console.trace() sprawia, że zarejestrowane w konsoli komunikaty console.trace() są rozwinięte.

Rozwinięta komunikat konsoli.trace() w konsoli.

Pole wyboru. 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.

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: Wybieranie opcji otwierania linków.
  • Automatycznie. Domyślnie otwiera pliki w panelu Źródła.
  • Dowolna opcja, którą można dodać za pomocą rozszerzenia Narzędzi deweloperskich.

Trwałość

W tej sekcji znajdziesz opcje, które określają, jak Narzędzia deweloperskie zapisują wprowadzone zmiany.

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 sekcji Zastąpienia lokalne.

Debuger

W tej sekcji znajdziesz opcje, które określają działanie Debugera.

Pole wyboru. 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ę Wyłączono JavaScript., a w Narzędziach deweloperskich obok opcji Źródła widoczna jest ikona ostrzeżenia Ostrzeżenie..

Ikona na pasku adresu i ikona ostrzeżenia obok opcji Źródła w Narzędziach deweloperskich.

Pole wyboru. 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ń.

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.

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.

Pole wyboru. 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.

Pole wyboru. 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.