Настройки

София Емельянова
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 . Дополнительную информацию см. в разделе Настройки синхронизации .