Настройте внешний вид и поведение DevTools и его панелей с помощью Настройки > Настройки . На этой вкладке перечислены как общие параметры настройки, так и параметры, специфичные для панели.
Чтобы установить настройки, откройте Настройки > Настройки и перейдите к одному из разделов, описанных далее.
Чтобы узнать, что делает каждый параметр, найдите на этой странице имя параметра и add_circle разверните его описание.
В этой ссылке различные настройки обозначаются следующими значками:
Флажки
- Раскрывающиеся списки
Устарело
Чтобы восстановить настройки по умолчанию, прокрутите вкладку «Настройки» до конца и нажмите « Восстановить настройки по умолчанию и перезагрузить» .
Появление
В этом разделе перечислены параметры, настраивающие внешний вид DevTools.
Темы
устанавливает цветовую тему для пользовательского интерфейса DevTools.
Компоновка панели
упорядочивает панели в панели.
Влияет на «Элементы» > «Стили» и родственные вкладки, а также на панель «Источники» > «Отладчик» . Опция auto заставляет макет зависеть от ширины DevTools.
Язык
устанавливает локаль для пользовательского интерфейса DevTools.
Чтобы применить этот параметр, перезагрузите DevTools.
Включение сочетания клавиш Ctrl/Cmd + 0–9 для переключения панелей позволяет открывать панели с помощью клавиатуры.
В этом видео показано, как переключаться между вкладками с помощью соответствующих сочетаний клавиш.
Отключение наложения состояния паузы скрывает надпись «Приостановлено» в отладчике.
наложение в области просмотра, когда выполнение кода приостановлено.
Показать «Что нового» после каждого обновления автоматически открывает вкладку «Что нового» после каждого обновления Chrome.
![Вкладка «Что нового».](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-s-drawer-tab-284de1eb4dca3.png?authuser=8&hl=ru)
Источники
В этом разделе перечислены параметры настройки панели «Источники» .
Поиск в анонимных скриптах и скриптах по содержимому позволяет выполнять поиск по всем загруженным файлам JavaScript, в том числе в расширениях Chrome, с помощью вкладки «Поиск» .
В этом видео показано, как искать текст в исходном файле расширения.
Автоматически показывать файлы на боковой панели — выбирает файлы на панели «Источники» > «Страница» при переключении между вкладками в редакторе .
В этом видеоролике показано, как при включенной этой опции панель «Источники» выбирает файлы в дереве навигации при переключении между вкладками.
Включение карт исходного кода JavaScript позволяет DevTools находить источники сгенерированных или минимизированных файлов JavaScript.
![На панели «Источники» в строке состояния отображается ссылка на минимизированный файл.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-sources-panel-shows-18a5986aebe76.png?authuser=8&hl=ru)
Включить перемещение табуляции, фокус делает
Клавиша Tab перемещает фокус внутри DevTools вместо вставки символа табуляции в редакторе .
Требуется перезагрузить DevTools.
В этом видеоролике впервые показаны символы табуляции, вставленные с помощью клавиши Tab. Затем, когда вы включаете эту опцию и перезагружаете DevTools, клавиша Tab перемещает фокус.
Определить отступ устанавливает отступ, равный отступу исходного файла, открытого в редакторе .
Требуется перезагрузить DevTools.
В этом видео сначала показан отступ по умолчанию в восемь пробелов. Затем, когда вы включаете эту опцию, она заменяет отступ по умолчанию на отступ исходного файла.
Автодополнение обеспечивает удобные подсказки в редакторе .
В этом видео сначала нет никаких предложений. Затем, когда вы включите эту опцию, редактор покажет предложения по завершению команды.
Автоматическое закрытие скобок автоматически добавляет закрывающую скобку или тег при вводе открывающей скобки.
В этом видео показано, как вводить открывающие скобки до и после включения автоматического закрытия скобок.
Соответствие скобок подчеркивает и выделяет светло-красным цветом в редакторе квадратную, фигурную или круглую скобку без пары.
![Фигурная скобка без пары, подчеркнутая красным.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/a-curly-bracket-without-39b53417db5f3.png?authuser=8&hl=ru)
Свертывание кода позволяет сворачивать и разворачивать блоки кода в фигурных скобках в редакторе .
Требуется перезагрузить DevTools.
В этом видео показано, как сворачивать блоки кода при включении этой опции.
Показать пробельные символы
отображает пробельные символы в редакторе .
Требуется перезагрузить DevTools. Опции делают следующее:
- All обозначает все пробельные символы как точки (
...
). Кроме того, редактор обозначает символ табуляции как линию (—
). - Трейлинг выделяет пробельные символы в конце строк светло-красным цветом .
Отображать значения переменных в строке во время отладки показывает значения переменных рядом с операторами присваивания, пока выполнение приостановлено.
![Отладчик, приостановленный во время выполнения функции, отображает значения переменных рядом с операторами присваивания.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-debugger-paused-durin-7df9450bef37b.png?authuser=8&hl=ru)
Панель «Источники фокуса» при срабатывании точки останова открывает «Источники» > «Редактор» на строке с точкой останова, которая приостановила выполнение.
В этом видео сначала показана панель «Источники» не в фокусе при приостановке в точке останова. Затем, когда вы включите эту опцию, DevTools откроет редактор на панели «Источники» и покажет вам строку кода с точкой останова.
Автоматически красиво распечатанные минимизированные источники делают эти источники читабельными.
При красивой печати редактор может отображать одну длинную строку кода в нескольких строках, которым предшествует -
, чтобы указать, что это продолжение строки.
![Красиво напечатанный код на панели «Источники».](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/pretty-print.png?authuser=8&hl=ru)
Включение карт источников CSS позволяет DevTools находить источники сгенерированных файлов CSS, например .scss
, и показывать их вам.
![На панели «Источники» отображаются файлы .scss в разделе «Авторские» дерева навигации. На панели «Стили» панели «Элементы» рядом с правилами CSS отображаются ссылки на источники .scss.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-sources-panel-shows-e421484c90f24.png?authuser=8&hl=ru)
Разрешить прокрутку за конец файла позволяет прокручивать дальше последней строки в редакторе .
В этом видео показано, как прокрутить файл до конца, если включить эту опцию.
Разрешить DevTools загружать ресурсы, такие как исходные карты, из удаленных путей к файлам . По умолчанию отключено из соображений безопасности.
Если оставить этот параметр отключенным, DevTools регистрирует в консоли сообщения, подобные следующим:
![Сообщение в Консоли о том, что загрузка с удаленного пути к файлу запрещена по соображениям безопасности.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/a-message-the-console-in-052f2c13b3dc.png?authuser=8&hl=ru)
Отступ по умолчанию
позволяет выбрать количество пробелов
Клавиша Tab вставляется в редактор .
В этом примере показано, как установить отступ по умолчанию сначала на восемь пробелов, а затем на символ табуляции.
Элементы
В этом разделе перечислены параметры настройки панели «Элементы» .
Показать теневой DOM пользовательского агента отображает теневые узлы DOM в дереве DOM.
![На панели «Элементы» отображаются теневые узлы DOM.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-elements-panel-shows-088126d24e216.png?authuser=8&hl=ru)
Перенос по словам разбивает длинные строки в дереве DOM и переносит их на следующую строку.
![Панель «Элементы» разбивает длинные строки по словам и переносит их на следующую строку.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-elements-panel-breaks-8f610414be113.png?authuser=8&hl=ru)
Показать комментарии HTML отображает комментарии HTML в дереве DOM.
![На панели «Элементы» отображаются комментарии HTML.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-elements-panel-shows-69db5e051bcd3.png?authuser=8&hl=ru)
«Показать узел DOM при наведении» выбирает соответствующий узел в дереве DOM при наведении курсора на элемент в области просмотра в
режим проверки.
В этом видео сначала показано, что узлы DOM не выбраны в дереве DOM. Затем, когда вы включите эту опцию, панель «Элементы» выбирает узлы при наведении курсора.
Показать подсказку подробной проверки отображает подсказку в окне просмотра в
режим проверки при наведении курсора на элемент.
![Подробная подсказка, отображаемая в режиме проверки.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-detailed-tooltip-show-28d3aa44e33a2.png?authuser=8&hl=ru)
Показывать линейки при наведении — отображает линейки в окне просмотра при наведении курсора на элементы в дереве DOM.
![Линейки показаны в окне просмотра.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/rulers-shown-viewport-ae8f481c23e7e.png?authuser=8&hl=ru)
Всплывающая подсказка «Показать документацию CSS» отображает всплывающую подсказку с кратким описанием при наведении курсора на свойство на панели «Стили» .
Ссылка «Подробнее» приведет вас к справочнику MDN CSS по данному свойству.
![Подсказка с документацией по свойству CSS.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-tooltip-documentatio-7c33fb7ae9d4e.png?authuser=8&hl=ru)
Сеть
В этом разделе перечислены параметры настройки панели «Сеть» . Большинство опций такие же, как и в настройках панели.
Журнал сохранения аналогичен журналу сохранения на панели «Сеть» . Сохраняет запросы при загрузке страниц.
В этом видео сначала показан журнал запросов, обновляемый при перезагрузке страницы, а затем сохраняющийся при включении этой опции.
Запись сетевого журнала аналогична
Запишите сетевой журнал на панели «Сеть» . Запускает или останавливает запись запросов в сетевой журнал.
![Кнопка «Запись сетевого журнала» на панели «Сеть».](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-record-network-log-bu-ae1f7d1e69e3.png?authuser=8&hl=ru)
Включить блокировку сетевых запросов блокирует запросы, соответствующие шаблонам в ящике блокировки сетевых запросов .
Это видео впервые показывает, что запросы не блокируются. Затем, после включения этой опции, шаблон в ящике блокировки сетевых запросов блокирует их.
Отключить кеш (когда DevTools открыт) — то же самое, что и отключить кеш на панели «Сеть» . Отключает кеш браузера.
![Флажок «Отключить кеш».](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-disable-cache-checkbo-f09250026a0aa.png?authuser=8&hl=ru)
Типы ресурсов с цветовой маркировкой выделяют запросы разными цветами в зависимости от их типа в столбце «Водопад» сетевого журнала.
![Столбец «Водопад» на вкладке «Сеть» без цветового кодирования и с цветовым кодированием.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-waterfall-column-the-c3f0d296db17e.png?authuser=8&hl=ru)
Группировка журнала сети по кадрам аналогична группировке по кадрам на панели «Сеть» . Эта опция группирует запросы, инициированные встроенными кадрами.
![Журнал сетевых запросов с запросами, сгруппированными по встроенным кадрам.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-network-request-log-8ecfc9e3f8259.png?authuser=8&hl=ru)
Принудительная блокировка рекламы на этом сайте блокирует обнаруженную рекламу на странице, пока открыты инструменты разработчика.
![Сетевой запрос, связанный с рекламой, отображается на панели «Сеть» с включенным фильтром «Заблокированные запросы».](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/an-ad-related-network-req-3e1c284d89cd5.png?authuser=8&hl=ru)
Производительность
В этом разделе перечислены параметры настройки панели «Производительность» .
Действие колесика мыши Flamechart
назначает действие прокрутки или масштабирования колесику мыши при навигации по диаграмме пламени.
В этом примере показаны действия прокрутки и масштабирования колесика мыши на диаграмме пламени на панели «Производительность» .
Консоль
В этом разделе перечислены параметры настройки консоли . Большинство опций такие же, как и в настройках консоли .
Скрыть сетевые сообщения скрывает сетевые сообщения в консоли .
В этом видео показано, как скрыть сетевые сообщения с помощью этой опции как в Настройки и в Настройках консоли .
Выбранный контекст позволяет консоли отображать сообщения только для выбранного контекста: верхнего, iframe, рабочего или расширения.
В этом видео показано, как включить эту опцию как в Настройки и в Консоли > Настройки и выберите контекст в Консоли .
Log XMLHttpRequests позволяет консоли регистрировать XHR и получать запросы.
В этом видео показано, как включить эту опцию как в Настройки и Консоль > Настройки и запишите сообщения
XHR finished loading
в консоль .
Показывать временные метки позволяет консоли отображать временные метки рядом с сообщениями.
![Сообщения с временными метками, перечисленными в консоли.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/messages-timestamps-list-040be725ea68b.png?authuser=8&hl=ru)
Автозаполнение из истории позволяет консоли предлагать команды, которые вы запускали ранее, по мере ввода.
Вы можете найти ту же опцию в Консоль > Настройки .
![Раскрывающийся список автозаполнения с параметром команды из истории консоли.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/autocomplete-drop-down-a-6e0a4dc95d8d5.png?authuser=8&hl=ru)
Принять предложение автозаполнения при нажатии Enter позволяет консоли принять выбранное предложение из раскрывающегося списка автозаполнения при нажатии Enter .
В этом видео показано, что происходит, когда вы нажимаете Enter до и после включения этой опции.
Группировать похожие сообщения в консоли позволяет консоли группировать похожие сообщения вместе.
Вы можете найти ту же опцию в Консоль > Настройки .
![Похожие сообщения в Консоли сгруппированы.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/similar-messages-the-con-2026bc985883e.png?authuser=8&hl=ru)
Показать ошибки CORS в консоли заставляет консоль отображать зарегистрированные ею ошибки CORS .
Вы можете найти ту же опцию в Консоль > Настройки .
![Консоль показывает ошибки CORS.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/console-shows-cors-errors-57f9bea2680a4.png?authuser=8&hl=ru)
Нетерпеливая оценка заставляет консоль отображать предварительный просмотр вывода при вводе команды.
Вы можете найти ту же опцию в Консоль > Настройки .
В этом видео показаны различные превью вывода.
Относитесь к оценке кода как к действию пользователя, которое превращает любую команду, которую вы запускаете в консоли, в взаимодействие с пользователем.
Другими словами, при оценке navigator.userActivation.isActive
устанавливается true
. Вы можете найти ту же опцию в Консоль > Настройки .
В этом видео показаны результаты оценки navigator.userActivation.isActive
до и после включения этой опции.
Автоматическое расширение сообщений console.trace() позволяет консоли отображать расширенные сообщения console.trace()
при их регистрации.
![Расширенное сообщение console.trace() в консоли.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/an-expanded-consoletrace-a083a714be536.png?authuser=8&hl=ru)
Функция «Сохранять журнал при навигации» позволяет консоли регистрировать сообщение Navigated to
при каждой навигации и сохранять журналы на всех страницах.
Вы можете найти ту же опцию в Консоль > Настройки .
![Консоль отображает сообщения «Перешел к» и сохраняет журналы на разных страницах.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-console-shows-naviga-f4bc36001187f.png?authuser=8&hl=ru)
Расширение
В этом разделе перечислены параметры, настраивающие обработку ссылок для расширений Chrome DevTools.
Обработка ссылок
задает возможность открытия файлов при щелчке ссылки на исходный файл, например, на панели «Элементы» > «Стили» .
Упорство
В этом разделе перечислены параметры, управляющие тем, как DevTools сохраняет внесенные вами изменения.
Включение локальных переопределений позволяет DevTools сохранять изменения, внесенные вами в источники, при загрузке страниц.
Дополнительные сведения см. в разделе Локальные переопределения .
Отладчик
В этом разделе перечислены параметры, управляющие поведением отладчика .
Отключение JavaScript позволяет вам увидеть, как ваша веб-страница выглядит и ведет себя, когда JavaScript отключен .
Перезагрузите страницу, чтобы увидеть, зависит ли она от JavaScript во время загрузки и каким образом.
Когда JavaScript отключен, Chrome отображает соответствующий значок в адресной строке, и DevTools отображает предупреждение
значок рядом с Источниками .
![Значок в адресной строке и значок предупреждения рядом с источником в DevTools.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/an-icon-the-address-bar-92ceba2ae707c.png?authuser=8&hl=ru)
Отключение трассировки асинхронного стека скрывает «полную историю» асинхронной операции в стеке вызовов .
По умолчанию отладчик пытается отслеживать асинхронные операции, если используемая вами платформа поддерживает такую трассировку.
![Асинхронная операция в стеке вызовов.](https://developer.chrome.com/static/docs/devtools/settings/preferences/image/the-async-operation-the-7d1209cb7afdd.png?authuser=8&hl=ru)
Дополнительные сведения см. в разделе Просмотр трассировок асинхронного стека .
Глобальный
В этом разделе перечислены параметры, имеющие глобальный эффект в DevTools.
Автоматическое открытие DevTools для всплывающих окон открывает DevTools при нажатии ссылок, открывающих новые вкладки. То есть все ссылки с target=_blank
.
В этом видео сначала показано, как щелкнуть ссылку и открыть новую вкладку *без* DevTools. Затем, когда вы включите эту опцию, откроется новая вкладка *с* DevTools.
Поиск по мере ввода заставляет DevTools «перепрыгивать» к первому результату поиска при вводе поискового запроса. Если этот параметр отключен, DevTools приведет вас к результату только при нажатии Enter .
В этом видео впервые показано, как DevTools «подпрыгивает» при вводе поискового запроса. Затем, когда вы включите эту опцию, DevTools перенесет вас к первому результату при нажатии Enter .
Синхронизировать
В этом разделе можно настроить синхронизацию настроек между устройствами.
Включение синхронизации настроек позволяет синхронизировать настройки DevTools на нескольких устройствах.
Чтобы использовать этот параметр, сначала включите Chrome Sync . Дополнительную информацию см. в разделе Настройки синхронизации .