Предпочтения, Предпочтения, Предпочтения, Предпочтения

София Емельянова
Sofia Emelianova

Настройте внешний вид и поведение DevTools и его панелей с помощью Настройки. Настройки > Настройки . На этой вкладке перечислены как общие параметры настройки, так и параметры, специфичные для панели.

Чтобы установить настройки, откройте Настройки. Настройки > Настройки и перейдите к одному из разделов, описанных далее.

Раздел «Внешний вид» на вкладке «Настройки».

Чтобы узнать, что делает каждый параметр, найдите на этой странице имя параметра и разверните его описание.

В этой ссылке различные настройки обозначаются следующими значками:

  • Флажок. Флажки
  • Раскрывающиеся списки Падать.
  • Устарело. Устарело

Чтобы восстановить настройки по умолчанию, прокрутите вкладку «Настройки» до конца и нажмите « Восстановить настройки по умолчанию и перезагрузить» .

Появление

В этом разделе перечислены параметры, настраивающие внешний вид DevTools.

Влияет на «Элементы» > «Стили» и родственные вкладки, а также на панель «Источники» > «Отладчик» . Опция auto заставляет макет зависеть от ширины DevTools.

Компоновка панели: Изменение расположения панели элемента с горизонтального на вертикальное.
  • горизонтальный
  • вертикальный
  • авто

Чтобы применить этот параметр, перезагрузите DevTools.

Язык: Панель настроек на китайском языке.
  • Язык пользовательского интерфейса браузера
  • Один из вариантов локали, в данном примере китайский.

В этом видео показано, как переключаться между вкладками с помощью соответствующих сочетаний клавиш.

Источники

В этом разделе перечислены параметры настройки панели «Источники» .

В этом видеоролике показано, как при включенной этой опции панель «Источники» выбирает файлы в дереве навигации при переключении между вкладками.

На панели «Источники» в строке состояния отображается ссылка на минимизированный файл.

Требуется перезагрузить DevTools.

В этом видеоролике впервые показаны символы табуляции, вставленные с помощью клавиши Tab. Затем, когда вы включаете эту опцию и перезагружаете DevTools, клавиша Tab перемещает фокус.

Требуется перезагрузить DevTools.

В этом видео сначала показан отступ по умолчанию в восемь пробелов. Затем, когда вы включаете эту опцию, она заменяет отступ по умолчанию на отступ исходного файла.

В этом видео сначала нет никаких предложений. Затем, когда вы включите эту опцию, редактор покажет предложения по завершению команды.

В этом видео показано, как вводить открывающие скобки до и после включения автоматического закрытия скобок.

Требуется перезагрузить DevTools.

В этом видео показано, как сворачивать блоки кода при включении этой опции.

Требуется перезагрузить DevTools. Опции делают следующее:

  • All обозначает все пробельные символы как точки ( ... ). Кроме того, редактор обозначает символ табуляции как линию ( ).
  • Трейлинг выделяет пробельные символы в конце строк светло-красным цветом .
Показать пробельные символы: Выбранные параметры: «Все» и «Трейлинг».
  • Никто
  • Все ( ... )
  • Трейлинг

В этом видео сначала показана панель «Источники» не в фокусе при приостановке в точке останова. Затем, когда вы включите эту опцию, DevTools откроет редактор на панели «Источники» и покажет вам строку кода с точкой останова.

При красивой печати редактор может отображать одну длинную строку кода в нескольких строках, которым предшествует - , чтобы указать, что это продолжение строки.

Красиво напечатанный код на панели «Источники».
На панели «Источники» отображаются файлы .scss в разделе «Авторские» дерева навигации. На панели «Стили» панели «Элементы» рядом с правилами CSS отображаются ссылки на источники .scss.

В этом видео показано, как прокрутить файл до конца, если включить эту опцию.

Если оставить этот параметр отключенным, DevTools регистрирует в консоли сообщения, подобные следующим:

Сообщение в Консоли о том, что загрузка с удаленного пути к файлу запрещена по соображениям безопасности.
Отступ по умолчанию: Отключение параметров переопределения и изменение отступа по умолчанию с двух пробелов на восемь, а затем на клавишу Tab.
  • 2 места
  • 4 места
  • 8 мест
  • Символ табуляции

В этом примере показано, как установить отступ по умолчанию сначала на восемь пробелов, а затем на символ табуляции.

Элементы

В этом разделе перечислены параметры настройки панели «Элементы» .

В этом видео сначала показано, что узлы DOM не выбраны в дереве DOM. Затем, когда вы включите эту опцию, панель «Элементы» выбирает узлы при наведении курсора.

Сеть

В этом разделе перечислены параметры настройки панели «Сеть» . Большинство опций такие же, как и в настройках панели.

журналу сохранения на панели «Сеть» . Сохраняет запросы при загрузке страниц.

В этом видео сначала показан журнал запросов, обновляемый при перезагрузке страницы, а затем сохраняющийся при включении этой опции.

Запишите сетевой журнал на панели «Сеть» . Запускает или останавливает запись запросов в сетевой журнал.

Кнопка «Запись сетевого журнала» на панели «Сеть».

Это видео впервые показывает, что запросы не блокируются. Затем, после включения этой опции, шаблон в ящике блокировки сетевых запросов блокирует их.

группировке по кадрам на панели «Сеть» . Эта опция группирует запросы, инициированные встроенными кадрами.

Журнал сетевых запросов с запросами, сгруппированными по встроенным кадрам.

Производительность

В этом разделе перечислены параметры настройки панели «Производительность» .

Действие колесика мыши на графике пламени: Изменение действия колеса мыши с прокрутки на масштабирование диаграммы пламени.
  • Прокрутка
  • Увеличить

В этом примере показаны действия прокрутки и масштабирования колесика мыши на диаграмме пламени на панели «Производительность» .

Консоль

В этом разделе перечислены параметры настройки консоли . Большинство опций такие же, как и в настройках консоли .

Аналогичные опции в Консоли и в Настройках.

В этом видео показано, как скрыть сетевые сообщения с помощью этой опции как в Настройки. Настройки и в Настройках консоли .

В этом видео показано, как включить эту опцию как в Настройки. Настройки и Консоль > Настройки и запишите сообщения XHR finished loading в консоль .

Другими словами, при оценке navigator.userActivation.isActive устанавливается true . Вы можете найти ту же опцию в Консоль > Настройки .

В этом видео показаны результаты оценки navigator.userActivation.isActive до и после включения этой опции.

Расширение

В этом разделе перечислены параметры, настраивающие обработку ссылок для расширений Chrome DevTools.

Обработка ссылок: Выбор варианта открытия ссылок.
  • Авто. По умолчанию открывает файлы на панели «Источники» .
  • Произвольный параметр, который можно добавить с помощью расширения DevTools.

Упорство

В этом разделе перечислены параметры, управляющие тем, как DevTools сохраняет внесенные вами изменения.

Отладчик

В этом разделе перечислены параметры, управляющие поведением отладчика .

JavaScript отключен .

Перезагрузите страницу, чтобы увидеть, зависит ли она от JavaScript во время загрузки и каким образом.

Когда JavaScript отключен, Chrome отображает соответствующий Отключен JavaScript. значок в адресной строке, и DevTools отображает предупреждение Предупреждение. значок рядом с Источниками .

Значок в адресной строке и значок предупреждения рядом с источником в DevTools.

По умолчанию отладчик пытается отслеживать асинхронные операции, если используемая вами платформа поддерживает такую ​​трассировку.

Асинхронная операция в стеке вызовов.

Дополнительные сведения см. в разделе Просмотр трассировок асинхронного стека .

Глобальный

В этом разделе перечислены параметры, имеющие глобальный эффект в DevTools.

В этом видео сначала показано, как щелкнуть ссылку и открыть новую вкладку *без* DevTools. Затем, когда вы включите эту опцию, откроется новая вкладка *с* DevTools.

Поиск по мере ввода заставляет DevTools «перепрыгивать» к первому результату поиска при вводе поискового запроса. Если этот параметр отключен, DevTools приведет вас к результату только при нажатии Enter .

В этом видео впервые показано, как DevTools «подпрыгивает» при вводе поискового запроса. Затем, когда вы включите эту опцию, DevTools перенесет вас к первому результату при нажатии Enter .

Синхронизировать

В этом разделе можно настроить синхронизацию настроек между устройствами.