Ustawienia

Sofia Emelianova
Sofia Emelianova

Wygląd i działanie Narzędzi deweloperskich oraz ich paneli możesz dostosować, klikając Ustawienia. 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 > 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 artykule znajdziesz informacje o różnych ustawieniach z tymi ikonami:

  • Pole wyboru. pola wyboru.
  • Listy rozwijane menu.
  • Rola wycofana. 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.

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.

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

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

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

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

Źródła

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

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 panelu Źródła na pasku stanu znajduje się link do zminifikowanego pliku.

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.

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.

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

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

Wymaga ponownego załadowania Narzędzi deweloperskich.

Ten film pokazuje, jak złożyć bloki kodu po włączeniu tej opcji.

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 Końcowe.
  • Brak
  • Wszystko (...)
  • Trzymanie się

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.

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.

Formatowany kod w panelu Źródła.
Panel Źródła wyświetla pliki .scss w sekcji Utworzone w drzewie nawigacyjnym. W okienku Style w panelu Elementy obok reguł CSS są wyświetlane linki do źródeł .scss.

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

Jeśli pozostawisz to ustawienie wyłączone, Narzędzia deweloperskie będą logowały się w komunikatach w konsoli, podobnych do tych:

Komunikat w konsoli informujący o tym, że ze względów bezpieczeństwa wczytywanie ze zdalnej ścieżki pliku jest zabronione.
Wcięcie domyślne: Wyłączenie opcji zastępowania i zmianę domyślnego wcięcia z dwóch spacji na osiem, a następnie naciśnięcie klawisza Tab.
  • 2 spacje
  • 4 spacje
  • 8 spacji
  • Znak tabulacji

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.

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.

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 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 w panelu Sieć. rozpoczyna lub zatrzymuje rejestrowanie żądań w dzienniku sieciowym.

Przycisk Rejestruj dziennik sieci w panelu Sieć.

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.

Grupuj według ramek w panelu Sieć. Ta opcja grupuje żądania zainicjowane przez wbudowane ramki.

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

wykryte reklamy na stronie, gdy Narzędzia deweloperskie są otwarte.

Żądanie sieciowe związane z reklamami wyświetlone w panelu Sieć przy włączonym filtrze Blokowane żądania.

Wyniki

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

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

Podobne opcje w Konsoli i Ustawieniach

Ten film pokazuje, jak ukrywać wiadomości sieciowe przy użyciu tej opcji zarówno w Ustawieniach Ustawienia., jak i w ustawieniach konsoli.

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

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

Ten film przedstawia różne podglądy wyjścia.

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.

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: 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 opcje, które określają, jak Narzędzia deweloperskie zapisują wprowadzane przez Ciebie zmiany.

Debuger

W tej sekcji znajdziesz opcje sterujące działaniem Debugera.

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ę 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 programisty.

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 opcje, które mają ogólny wpływ na DevTools.

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.