Настройка инструментов разработчика

Кейси Баски
Джеселин Йен
София Емельянова
Sofia Emelianova
GitHub

На этой странице перечислены способы настройки Chrome DevTools.

Настройки

Настройки > Настройки содержат множество опций для настройки DevTools.

См. Открытие настроек и настроек .

Темная тема

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

Темная тема.

  1. Откройте командное меню .

  2. Начните вводить dark , выберите команду «Переключиться на темную тему» ​​и нажмите Enter, чтобы запустить команду.

    Команда темной темы.

  3. Либо установите свою тему в «Настройки» > «Настройки» > «Внешний вид» > «Темы» .

Динамическая тема

DevTools может автоматически соответствовать цветовой теме Chrome.

Чтобы установить тему:

  1. Откройте новую вкладку и нажмите настройку Chrome» в правом нижнем углу.
  2. В разделе «Внешний вид» выберите тему с помощью . Измените темы или выберите цветовую палитру.

DevTools соответствует цветовой теме, выбранной в разделе «Внешний вид».

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

Ящик

Ящик содержит множество скрытых функций.

Нажмите Escape , чтобы открыть или закрыть ящик.

Ящик.

Нажмите Дополнительные инструменты , чтобы открыть другие вкладки ящика .

Кнопка «Дополнительные инструменты», открывающая другие вкладки ящика.

Изменить размещение DevTools

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

Вы можете изменить расположение DevTools двумя способами:

  • Главное меню : откройте Customize And Control DevTools и нажмите:
    • Открепить в отдельное окно
    • Закрепить влево
    • Прикрепить вниз
    • Закрепить вправо

  • Командное меню :

    1. Откройте командное меню .
    2. Начните вводить dock и выберите один из предложенных вариантов: закрепить внизу, влево, вправо, открепить или восстановить последнее положение закрепления.

Предлагаемый вариант стыковки в меню команд.

Чтобы включить параметр «Восстановить последнее положение стыковки» с помощью сочетания клавиш, нажмите:

  • В Linux или Windows: Control + Shift + D.
  • В MacOS: Command + Shift + D.

Изменение порядка панелей, вкладок и панелей

Чтобы изменить порядок, щелкните и перетащите влево или вправо любой из следующих элементов:

  • Панели в верхней части DevTools.
  • Панели на панели «Элементы», такие как «Стили» , «Вычисляемые» , «Макет » и другие.
  • Панели на панели «Источники», такие как «Страница» , «Рабочая область» , «Переопределения» и другие.
  • Вкладки ящиков в нижней части DevTools.

Кроме того, вы можете перемещать панели и вкладки вверх и вниз в ящик и обратно. Для этого щелкните правой кнопкой мыши панель или вкладку и выберите «Переместить вверх» или «Переместить вниз» в раскрывающемся меню.

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

Компоновка панели

По умолчанию DevTools автоматически меняет расположение панели в зависимости от размера окна. Вы можете отключить автоперестановку. Перейдите в «Настройки» > «Настройки» > «Внешний вид» и обновите макет панели в соответствии с вашими предпочтениями.

Например, панель «Стили» на панели «Элементы» переместится сбоку вниз, если размер экрана мал. Если вы хотите, чтобы панель «Стиль» всегда оставалась сбоку, измените расположение панели на вертикальное .

Изменить макет панели

Изменить язык пользовательского интерфейса DevTools

См. «Настройки» > «Настройки» > «Внешний вид» > «Язык» .

Измените язык, перейдя в «Настройки», а затем «Настройки».

Синхронизировать настройки

Вы можете синхронизировать настройки DevTools на нескольких устройствах.

Чтобы включить синхронизацию, сначала включите Chrome Sync . После включения настройки DevTools синхронизируются по умолчанию.

Синхронизация профиля Chrome.

Вы можете включить или отключить синхронизацию настроек DevTools отдельно, используя флажок « > «Синхронизация» > «Включить синхронизацию настроек» .

Настройки синхронизации DevTools

DevTools синхронизирует большинство настроек, за исключением вкладок «Рабочая область» , «Эксперименты» и «Устройства» , а также некоторых других общих настроек. Состояние флажка «Включить синхронизацию настроек» также синхронизируется между устройствами.

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

Настройки внешнего вида.

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

Док.

Настройте сочетания клавиш

См. «Настройки» > «Ярлыки» .

Включить эксперименты

См . «Настройки» > «Эксперименты» .