Настройки

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

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

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

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

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

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

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

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

Появление

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

Темы Падать. устанавливает цветовую тему для пользовательского интерфейса DevTools.

Темы: Изменение темы DevTools с системных настроек на темную и на светлую.
  • Системные предпочтения
  • Свет
  • Темный

Компоновка панели Падать. упорядочивает панели в панели.

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

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

Язык Падать. устанавливает локаль для пользовательского интерфейса DevTools.

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

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

Флажок. Включение сочетания клавиш Ctrl/Cmd + 0–9 для переключения панелей позволяет открывать панели с помощью клавиатуры.

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

Флажок. Отключение наложения состояния паузы скрывает надпись «Приостановлено» в отладчике. Играйте и перешагивайте через кнопки. наложение в области просмотра, когда выполнение кода приостановлено.

Флажок. Показать «Что нового» после каждого обновления автоматически открывает вкладку «Что нового» после каждого обновления Chrome.

Вкладка «Что нового».

Источники

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

Флажок. Поиск в анонимных скриптах и ​​скриптах по содержимому позволяет выполнять поиск по всем загруженным файлам JavaScript, в том числе в расширениях Chrome, с помощью вкладки «Поиск» .

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

Флажок. Автоматически показывать файлы на боковой панели — выбирает файлы на панели «Источники» > «Страница» при переключении между вкладками в редакторе .

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

Флажок. Включение карт исходного кода JavaScript позволяет DevTools находить источники сгенерированных или минимизированных файлов JavaScript.

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

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

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

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

Флажок. Определить отступ устанавливает отступ, равный отступу исходного файла, открытого в редакторе .

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

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

Флажок. Автодополнение обеспечивает удобные подсказки в редакторе .

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

Флажок. Автоматическое закрытие скобок автоматически добавляет закрывающую скобку или тег при вводе открывающей скобки.

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

Флажок. Соответствие скобок подчеркивает и выделяет светло-красным цветом в редакторе квадратную, фигурную или круглую скобку без пары.

Фигурная скобка без пары, подчеркнутая красным.

Флажок. Свертывание кода позволяет сворачивать и разворачивать блоки кода в фигурных скобках в редакторе .

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

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

Показать пробельные символы Падать. отображает пробельные символы в редакторе .

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

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

Флажок. Отображать значения переменных в строке во время отладки показывает значения переменных рядом с операторами присваивания, пока выполнение приостановлено.

Отладчик, приостановленный во время выполнения функции, отображает значения переменных рядом с операторами присваивания.

Флажок. Панель «Источники фокуса» при срабатывании точки останова открывает «Источники» > «Редактор» на строке с точкой останова, которая приостановила выполнение.

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

Флажок. Автоматически красиво распечатанные минимизированные источники делают эти источники читабельными.

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

Красиво напечатанный код на панели «Источники».

Флажок. Включение карт источников CSS позволяет DevTools находить источники сгенерированных файлов CSS, например .scss , и показывать их вам.

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

Флажок. Разрешить прокрутку за конец файла позволяет прокручивать дальше последней строки в редакторе .

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

Флажок. Разрешить DevTools загружать ресурсы, такие как исходные карты, из удаленных путей к файлам . По умолчанию отключено из соображений безопасности.

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

Сообщение в Консоли о том, что загрузка с удаленного пути к файлу запрещена по соображениям безопасности.

Отступ по умолчанию Падать. позволяет выбрать количество пробелов Клавиша табуляции. Клавиша Tab вставляется в редактор .

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

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

Элементы

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

Флажок. Показать теневой DOM пользовательского агента отображает теневые узлы DOM в дереве DOM.

На панели «Элементы» отображаются теневые узлы DOM.

Флажок. Перенос по словам разбивает длинные строки в дереве DOM и переносит их на следующую строку.

Панель «Элементы» разбивает длинные строки по словам и переносит их на следующую строку.

Флажок. Показать комментарии HTML отображает комментарии HTML в дереве DOM.

На панели «Элементы» отображаются комментарии HTML.

Флажок. «Показать узел DOM при наведении» выбирает соответствующий узел в дереве DOM при наведении курсора на элемент в области просмотра в Осмотреть. режим проверки.

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

Флажок. Показать подсказку подробной проверки отображает подсказку в окне просмотра в Осмотреть. режим проверки при наведении курсора на элемент.

Подробная подсказка, отображаемая в режиме проверки.

Флажок. Показывать линейки при наведении — отображает линейки в окне просмотра при наведении курсора на элементы в дереве DOM.

Линейки показаны в окне просмотра.

Флажок. Всплывающая подсказка «Показать документацию CSS» отображает всплывающую подсказку с кратким описанием при наведении курсора на свойство на панели «Стили» .

Ссылка «Подробнее» приведет вас к справочнику MDN CSS по данному свойству.

Подсказка с документацией по свойству CSS.

Сеть

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

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

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

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

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

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

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

Флажок. Отключить кеш (когда DevTools открыт) — то же самое, что и отключить кеш на панели «Сеть» . Отключает кеш браузера.

Флажок «Отключить кеш».

Флажок. Типы ресурсов с цветовой маркировкой выделяют запросы разными цветами в зависимости от их типа в столбце «Водопад» сетевого журнала.

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

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

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

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

Сетевой запрос, связанный с рекламой, отображается на панели «Сеть» с включенным фильтром «Заблокированные запросы».

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

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

Действие колесика мыши Flamechart Падать. назначает действие прокрутки или масштабирования колесику мыши при навигации по диаграмме пламени.

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

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

Консоль

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

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

Флажок. Скрыть сетевые сообщения скрывает сетевые сообщения в консоли .

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

Флажок. Выбранный контекст позволяет консоли отображать сообщения только для выбранного контекста: верхнего, iframe, рабочего или расширения.

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

Флажок. Log XMLHttpRequests позволяет консоли регистрировать XHR и получать запросы.

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

Флажок. Показывать временные метки позволяет консоли отображать временные метки рядом с сообщениями.

Сообщения с временными метками, перечисленными в консоли.

Флажок. Автозаполнение из истории позволяет консоли предлагать команды, которые вы запускали ранее, по мере ввода.

Вы можете найти ту же опцию в Консоль > Настройки .

Раскрывающийся список автозаполнения с параметром команды из истории консоли.

Флажок. Принять предложение автозаполнения при нажатии Enter позволяет консоли принять выбранное предложение из раскрывающегося списка автозаполнения при нажатии Enter .

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

Флажок. Группировать похожие сообщения в консоли позволяет консоли группировать похожие сообщения вместе.

Вы можете найти ту же опцию в Консоль > Настройки .

Похожие сообщения в Консоли сгруппированы.

Флажок. Показать ошибки CORS в консоли заставляет консоль отображать зарегистрированные ею ошибки CORS .

Вы можете найти ту же опцию в Консоль > Настройки .

Консоль показывает ошибки CORS.

Флажок. Нетерпеливая оценка заставляет консоль отображать предварительный просмотр вывода при вводе команды.

Вы можете найти ту же опцию в Консоль > Настройки .

В этом видео показаны различные превью вывода.

Флажок. Относитесь к оценке кода как к действию пользователя, которое превращает любую команду, которую вы запускаете в консоли, в взаимодействие с пользователем.

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

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

Флажок. Автоматическое расширение сообщений console.trace() позволяет консоли отображать расширенные сообщения console.trace() при их регистрации.

Расширенное сообщение console.trace() в консоли.

Флажок. Функция «Сохранять журнал при навигации» позволяет консоли регистрировать сообщение Navigated to при каждой навигации и сохранять журналы на всех страницах.

Вы можете найти ту же опцию в Консоль > Настройки .

Консоль отображает сообщения «Перешел к» и сохраняет журналы на разных страницах.

Расширение

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

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

Упорство

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

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

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

Отладчик

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

Флажок. Отключение JavaScript позволяет вам увидеть, как ваша веб-страница выглядит и ведет себя, когда JavaScript отключен .

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

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

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

Флажок. Отключение трассировки асинхронного стека скрывает «полную историю» асинхронной операции в стеке вызовов .

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

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

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

Глобальный

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

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

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

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

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

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

Флажок. Включение синхронизации настроек позволяет синхронизировать настройки DevTools на нескольких устройствах.

Чтобы использовать этот параметр, сначала включите Chrome Sync . Дополнительную информацию см. в разделе Настройки синхронизации .