Chrome Dev Tools Консоль разработчика Горячие Клавиши

Горячие клавиши: Открытие DevTools

Горячие клавиши Windows Горячие клавиши macOS Название Описание
F12 или Ctrl + ⇧Shift + I ⌘Cmd + ⌥Option + I Открыть последнюю панель Открывает панель, которой пользовались последний раз. Если DevTools были закрыты, они открываются в последней позиции (встроенные, сбоку или в отдельном окне)
Ctrl + ⇧Shift + J ⌘Cmd + ⌥Option + J Открыть Console Непосредственно открывает панель Console для выполнения JavaScript-кода, просмотра логов и ошибок
Ctrl + ⇧Shift + C ⌘Cmd + ⇧Shift + C или ⌘Cmd + ⌥Option + C Открыть Elements Открывает панель Elements для inspection DOM-дерева и инспекции стилей элемента

Горячие клавиши: Глобальные

Горячие клавиши Windows Горячие клавиши macOS Название Описание
? или F1 ? или ⌘Cmd + F1 Открыть настройки Открывает панель Settings DevTools для конфигурации: тема, язык, предпочтения по клавишам, экспорт/импорт настроек и пр.
Ctrl + →Right ⌘Cmd + ⇧Shift + →Right Следующая панель Переключает фокус на следующую панель DevTools (Elements → Console → Sources → Network → ...)
Ctrl + ←Left ⌘Cmd + ⇧Shift + ←Left Предыдущая панель Переключает фокус на предыдущую панель DevTools
Ctrl + ⇧Shift + D ⌘Cmd + ⇧Shift + D Переключить позицию Меняет позицию DevTools: встроенный снизу / сбоку / в отдельном окне. Если за сессию позиция не менялась — открепляет в отдельное окно
Ctrl + ⇧Shift + M ⌘Cmd + ⇧Shift + M Device Mode Включает режим эмуляции мобильных устройств: переопределение user-agent, разрешение экрана, масштабирование, скорость сети (throttling)
Ctrl + ⇧Shift + C ⌘Cmd + ⇧Shift + C Inspect Element Mode Переключает курсор в режим «указателя» (element picker) для наведения и выделения элементов на странице
Ctrl + ⇧Shift + P ⌘Cmd + ⇧Shift + P Command Menu Открывает палитру команд DevTools — быстрый доступ к настройкам, переключателям, API DevTools без навигации по меню. Введите название команды и нажмите Enter
Esc Esc Переключать Drawer Сворачивает / разворачивает Drawer (нижнюю панель) в текущей панели DevTools
F5 или Ctrl + R ⌘Cmd + R Обычная перезагрузка Перезагружает страницу с использованием кэшированных ресурсов (если они есть)
Ctrl + F5 или Ctrl + ⇧Shift + R ⌘Cmd + ⇧Shift + R Жёсткая перезагрузка Перезагружает страницу, игнорируя кэш: все ресурсы (CSS, JS, изображения) загружаются заново с сервера
Ctrl + F ⌘Cmd + F Поиск по текущей панели Открывает поиск по тексту на активной панели. Поддерживается в: Elements, Console, Sources, Performance, Memory, Quick Source
Ctrl + ⇧Shift + F ⌘Cmd + ⌥Option + F Поиск по всем ресурсам Открывает вкладку поиска в Drawer — глобальный поиск текста по всем загруженным ресурсам проекта
Ctrl + O или Ctrl + P ⌘Cmd + O или ⌘Cmd + P Открыть файл в Sources Открывает палитру выбора файлов в Sources panel — быстрый переход к любому JS/CSS/HTML файлу проекта по имени. Поддерживает частичный ввод
Ctrl + ⇧Shift + + ⌘Cmd + ⇧Shift + + Увеличить масштаб Увеличивает масштаб UI DevTools на 10%. Применяется только к интерфейсу DevTools, не к содержимому страницы
Ctrl + - ⌘Cmd + - Уменьшить масштаб Уменьшает масштаб UI DevTools на 10%
Ctrl + 0 ⌘Cmd + 0 Сбросить масштаб Возвращает масштаб UI DevTools к 100%
Ctrl + O → введите ! + название скрипта → ⏎Enter ⌘Cmd + O → введите ! + название скрипта → ⏎Enter Запустить сниппет Выполняет User Script (сниппет) Chrome: через Command Menu введите ! (восклицательный знак), начните вводить имя сниппета и нажмите Enter. Сниппеты — сохранённые фрагменты JS, доступные в Sources panel

Горячие клавиши: Elements panel

Горячие клавиши Windows Горячие клавиши macOS Название Описание
Управление элементами
Ctrl + Z ⌘Cmd + Z Отменить изменение Возвращает последнее изменённое свойство/атрибут/узел DOM к предыдущему состоянию. Поддерживает множественное отменение (Ctrl+Z / ⌘+Z — до 50 шагов)
Ctrl + Y ⌘Cmd + ⇧Shift + Z Повторить изменение Восстанавливает последнее отменённое изменение. Действует в пределах текущей сессии edit Elements
↑Up / ↓Down ↑Up / ↓Down Выбрать соседний элемент Навигация по DOM-дереву: переход к родительскому (↑) или дочернему (↓) элементу относительно выделенного. Работает только когда фокус на дереве элементов
→Right →Right Раскрыть узел Раскрывает текущий узел DOM в дереве элементов. Если узел уже раскрыт — выделяет первый дочерний элемент
←Left ←Left Свернуть узел Сворачивает текущий узел DOM. Если узел уже свёрнут — выделяет родительский элемент
Ctrl + Alt + клик на стрелке ⌥Option + клик на стрелке Раскрыть/свернуть все дочерние Раскрывает или сворачивает все дочерние узлы выбранного элемента разом. Удерживайте Ctrl+Alt (Win) или Option (Mac) и нажмите на стрелку разворачивания
⏎Enter ⏎Enter Редактировать атрибуты Переключает режим Edit Attributes для выбранного элемента — позволяет редактировать атрибуты (id, class, data-*, style и т.д.) напрямую в панели
⇥Tab / ⇤BackTab ⇥Tab / ⇤BackTab Следующий / предыдущий атрибут В режиме Edit Attributes — переход к следующему (Tab) или предыдущему (Shift+Tab) атрибуту элемента для быстрого редактирования
H H Скрыть элемент Быстро скрывает выбранный элемент (устанавливает display: none). Элемент остаётся в DOM, но скрывается со страницы. Повторное нажатие восстанавливает display
F2 Fn + F2 Edit as HTML Переключает режим редактирования HTML: позволяет редактировать все HTML-теги выбранного элемента как блок текста. Подтверждает Enter, отменяет Esc

Styles pane

Горячие клавиши Windows Горячие клавиши macOS Название Описание
Ctrl + клик на значении ⌘Cmd + клик на значении Перейти к объявлению CSS При зажатом Ctrl/⌘ кликните на значение CSS-свойства (например, color: #fff) — DevTools откроет файл, где это свойство объявлено
↑Up / ↓Down ↑Up / ↓Down Переключить CSS правило Навигация между CSS-правилами, влияющими на выбранный элемент. Полезно при большом количестве стилей с разными специфичностями
←Left / →Right ←Left / →Right Навигация по свойству Перемещение между именем свойства, значением и контролами (color picker, angle clock) внутри CSS-правила
Alt + ↓Down ⌥Option + ↓Down Открыть tooltip функции Открывает всплывающую подсказку для функции в CSS-значении (var(), calc(), clamp(), etc.), показывая вычисленное значение и контекст
⇧Shift + клик на цвет ⇧Shift + клик на цвет Цикл форматов цвета Переключает представление цветового значения (RGB → HEX → OKLCH → HSL → hwb и т.д.) через Color Preview. Полезно для копирования в нужном формате
Tab — выделить значение и нажать Tab / ⇤BackTab Tab — выделить значение и нажать Tab / ⇤BackTab Следующее / предыдущее свойство При выделенном значении — Tab переходит к редактированию следующего свойства, Shift+Tab — предыдущего
Выделить значение → Alt + ↑Up / ↓Down Выделить значение → ⌥Option + ↑Up / ↓Down Изменить значение на 0.1 Точечная корректировка числового CSS-значения (ширина, отступ, толщина линии и пр.) с шагом ±0.1. Например: border-width: 1px → 1.1px
Выделить значение → ↑Up / ↓Down Выделить значение → ↑Up / ↓Down Изменить значение на 1 Корректировка числового CSS-значения с шагом ±1. Например: font-size: 16px → 17px
Выделить значение → ⇧Shift + ↑Up / ↓Down Выделить значение → ⇧Shift + ↑Up / ↓Down Изменить значение на 10 Корректировка числового CSS-значения с шагом ±10. Полезно для быстрых подстроек отступов и позиций
Выделить значение → Ctrl + ↑Up / ↓Down Выделить значение → ⌘Cmd + ↑Up / ↓Down Изменить значение на 100 Корректировка числового CSS-значения с шагом ±100. Используется для масштабных подстроек при layout-работе
⇧Shift + клик на Angle Preview ⇧Shift + клик на Angle Preview Цикл угловых единиц Переключает единицы угла: deg → grad → rad → turn (полный цикл). Например: transform: rotate(90deg) → rotate(100grad)
Клик на Angle Preview → ↑Up / ↓Down Клик на Angle Preview → ↑Up / ↓Down Изменить угол на 1° Точечная корректировка углового значения на ±1 градус. Работает для любого свойства с углом (rotate, skew, transform-origin и т.д.)
Клик на Angle Preview → ⇧Shift + ↑Up / ↓Down Клик на Angle Preview → ⇧Shift + ↑Up / ↓Down Изменить угол на 10° Корректировка углового значения на ±10 градусов. Быстрая настройка трансформаций без счётчика
Клик на Angle Preview → ⇧Shift, клик / слайд на Angle Clock Клик на Angle Preview → ⇧Shift, клик / слайд на Angle Clock Изменить угол на 15° (clock) Интерактивная корректировка угла через визуальный угловой круг (Angle Clock Overlay). Каждый клик/сдвиг = ±15°

Горячие клавиши: Sources panel

Горячие клавиши Windows Горячие клавиши macOS Название Описание
Отладка
F8 или Ctrl + \ F8 или ⌘Cmd + \ Pause / Resume Приостанавливает выполнение скрипта (если страница работает) или возобновляет (если отладка на брейкпоинте). Аналог кнопки «pause» на панели
F10 или Ctrl + ' F10 или ⌘Cmd + ' Step Over Выполняет текущую строку и переходит к следующей. Если текущая строка — вызов функции, функция выполняется целиком (без захода внутрь)
F11 или Ctrl + ; F11 или ⌘Cmd + ; Step Into Заходит внутрь вызова функции на текущей строке. Позволяет отладить код функции по шагам (Step Over/Out)
⇧Shift + F11 или Ctrl + ⇧Shift + ; ⇧Shift + F11 или ⌘Cmd + ⇧Shift + ; Step Out Завершает текущую функцию и приостанавливается на следующей строке после вызова этой функции. Полезно выйти из встроенного кода
Ctrl + клик на строке ⌘Cmd + клик на строке Continue to line При остановке на брейкпоинте: зажатый Ctrl/⌘ + клик на любой строке — продолжит выполнение до этой строки (ставит временный брейкпоинт)
Ctrl + . / Ctrl + , Ctrl + . / Ctrl + , Следующий / предыдущий фрейм Переключение между call stack фреймами при остановке на брейкпоинте. Позволяет выбрать, какой фрейм отлаживать
Ctrl + S ⌘Cmd + S Сохранить изменения Сохраняет локальные изменения файлов (made via DevTools editor) на диск. Изменения, сделанные в DevTools, пишутся в memory-overrides
Ctrl + Alt + S ⌘Cmd + ⌥Option + S Сохранить все Сохраняет все несохранённые изменения во всех редактируемых файлах. Альтернатива сохранения каждого файла по отдельности
Ctrl + G Ctrl + G Перейти к строке Открывает диалог перехода к конкретной строке в текущем файле. Введите номер строки и нажмите Enter
Ctrl + O → введите : + номер строки → ⏎Enter ⌘Cmd + O → введите : + номер строки → ⏎Enter Перейти к номеру строки Через Command Menu — переход к конкретной строке в открытом файле. Формат: :номер (например, :42 для 42-й строки)
Ctrl + O → введите : + строка + : + колонка → ⏎Enter ⌘Cmd + O → введите : + строка + : + колонка → ⏎Enter Перейти к строке и колонке Переход к точной позиции в файле: :строка:колонка (например, :5:9 → строка 5, колонка 9). Полезно при навигации по длинным файлам
Ctrl + ⇧Shift + O ⌘Cmd + ⇧Shift + O Перейти к функции / правилу Открывает список определений (функции в JS, rule sets в CSS). Поиск по имени декларации. Для HTML — переход к script/style блоку
Alt + W ⌥Option + W Закрыть вкладку Закрывает текущую открытую вкладку файла в Sources panel. Альтернатива — кнопка «×» на вкладке
Ctrl + Pg Up / Pg Dn Fn + ⌘Cmd + ↑Up / ↓Down Следующая / предыдущая вкладка Переключение между открытыми файлами (вкладками) в Sources panel. Аналогично вкладкам браузера (Ctrl+Tab)
Ctrl + ⇧Shift + Y ⌘Cmd + ⇧Shift + Y Toggle Navigation sidebar Скрывает или показывает левую боковую панель (File Navigator) в Sources panel. Полезно для полного экрана редактора кода
Ctrl + ⇧Shift + H ⌘Cmd + ⇧Shift + H Toggle Debugger sidebar Скрывает или показывает правую боковую панель (Debugger/Variables/Call Stack) в Sources panel

Code Editor

Горячие клавиши Windows Горячие клавиши macOS Название Описание
Ctrl + Delete ⌥Option + Delete Удалить слово Удаляет последнее слово перед курсором (до пробела). В отличие от Backspace, удаляет целое слово за раз
Клик на номер строки / Ctrl + B Клик на номер строки / ⌘Cmd + B Toggle line breakpoint Ставит / снимает line-of-code breakpoint (синяя точка слева от номера строки). Срабатывает при достижении этой строки в процессе выполнения
Ctrl + Alt + B ⌘Cmd + ⌥Option + B Conditional breakpoint / Logpoint Открывает диалог редактирования: можно создать conditional breakpoint (останавливаться только при условии) или logpoint (логировать без остановки)
Ctrl + клик на номер строки ⌘Cmd + клик на номер строки Conditional breakpoint dialog Открывает диалог создания условного брейкпоинта. Введите JS-условие — отладка остановится только когда оно вернёт true
Ctrl + ⇧Shift + клик на номер строки ⌘Cmd + ⇧Shift + клик на номер строки Logpoint dialog Создаёт logpoint: вместо остановки в отладчике, DevTools будет логировать выражение в Console. Формат: 'msg: ' + variableName
Ctrl + M Ctrl + M Совпадающая скобка Перемещает курсор кMatching скобке ({}, [], ()). Полезно при навигации по вложенным структурам: блокам кода, массивам, функциям
Ctrl + / ⌘Cmd + / Комментировать / раскомментировать Переключает single-line комментарий. Если выделено несколько строк — добавляет комментарий в начало каждой. Для JS: //, для CSS: /* */
Ctrl + D / ⇧Shift + D ⌘Cmd + D / ⌘Cmd + U Выбрать следующее / предыдущее вхождение Ctrl+D: выделяет следующее вхождение слова под курсором (одновременно подсвечивает все). Ctrl+Shift+D / ⌘+U: выделяет предыдущее. Для множественного редактирования

Горячие клавиши: Network panel

Горячие клавиши Windows Горячие клавиши macOS Название Описание
Ctrl + F ⌘Cmd + F Поиск в деталях запроса Фильтрация заголовков (headers), payload и body ответа (response) выбранного HTTP-запроса. Полезно для поиска конкретного поля (напр. Cookie, Authorization) или данных в JSON
Ctrl + E ⌘Cmd + E Начать / остановить запись Старт / стоп записи сетевых запросов. По умолчанию сеть записывается автоматически, но можно остановить запись для сохранения ресурсов
Ctrl + R ⌘Cmd + R Record a reload Записывает все сетевые запросы при перезагрузке страницы. Аналог нажатия кнопки «Record» (●) на панели
R R Replay XHR request Повторяет выбранный XHR/Fetch запрос. Полезно для повторного вызова API без перезагрузки страницы. Работает с выбранным запросом из списка
Esc Esc Скрыть детали запроса Закрывает панель деталей выбранного запроса (Headers, Preview, Response, etc.) и возвращает к списку запросов

Горячие клавиши: Performance panel

Горячие клавиши Windows Горячие клавиши macOS Название Описание
Ctrl + E ⌘Cmd + E Начать / остановить запись Старт / стоп записи performance-профиля. Во время записи фиксируется: FPS, CPU, layout, paint, network, JS execution timeline. Кнопка «Record» (●) на панели
Ctrl + S ⌘Cmd + S Сохранить запись Сохраняет performance-профиль в файл (.cpuprofile). Можно открыть позже для анализа: Call Tree, Flame Chart, Bottom Up, Network events
Ctrl + O ⌘Cmd + O Загрузить запись Открывает файл performance-профиля (.cpuprofile) для анализа. Используется для сравнения профилей «до» и «после» оптимизации

Горячие клавиши: Memory panel

Горячие клавиши Windows Горячие клавиши macOS Название Описание
Ctrl + E ⌘Cmd + E Начать / остановить запись Старт / стоп сбора memory-профиля. В зависимости от выбранного типа: Heap Snapshot, Allocation timeline, Allocation timeline на GC, Memory timeline. Позволяет находить утечки памяти

Горячие клавиши: Console panel

Горячие клавиши Windows Горячие клавиши macOS Название Описание
→Right или ⇥Tab →Right или ⇥Tab Принять автодополнение Принимает текущее предложение из автодополнения в строке ввода Console. Работает для имён переменных, методов, свойств объекта, API-методов (log, fetch и т.д.)
Esc Esc Отклонить автодополнение Закрывает список автодополнения без применения. Курсор остаётся на текущей позиции ввода
↑Up / ↓Down или Ctrl + P / N ↑Up / ↓Down или Ctrl + P / N Навигация автодополнения Стрелки: навигация по списку автодополнения вверх/вниз. Ctrl+P/N: альтернативная навигация (как в Vim/VSCode) по предложениям
↑Up ↑Up Предыдущее выражение Возвращает предыдущее выполненное выражение в строку ввода Console. Множественные нажатия — цикл по истории выполненных команд
↓Down ↓Down Следующее выражение Возвращает следующее выражение после навигации по истории вверх. Восстановление вперёд по истории
Ctrl + ` Ctrl + ` Фокус на Console Быстро переводит фокус ввода на строку ввода Console из любой другой панели DevTools. Позволяет мгновенно начинать ввод JS
Ctrl + L ⌘Cmd + K или ⌥Option + L Очистить Console Очищает вывод Console (логи, ошибки, предупреждения). Использованная история команд сохраняется и доступна через ↑. Для программной очистки: console.clear()
⇧Shift + ⏎Enter ⇧Shift + Return Многострочный ввод Принудительно переходит на новую строку в строке ввода Console. DevTools обычно сам определяет многострочные выражения, но эта клавиша — ручной форс
⏎Enter Return Выполнить Выполняет введённое выражение в контексте страницы. Результат отображается в Console. Для однострочных — мгновенное выполнение, для многострочных — после Enter
Зажат Alt + клик Expand Зажат ⌥Option + клик Expand Раскрыть все под-свойства Раскрывает всю структуру объекта (вложенные свойства на любом уровне) в Console. Альтернатива — использовать dir(object) или console.log(JSON.stringify(obj, null, 2))
Горячие клавиши Windows Горячие клавиши macOS Название Описание
Ctrl + ⇧Shift + { или } ⌘Cmd + ⌥Option + { или } Свернуть / развернуть результаты Сворачивает ({) или разворачивает (}) все результаты поиска в глобальном поиске Drawer. Полезно при большом количестве совпадений

Горячие клавиши: Recorder panel

Горячие клавиши Windows Горячие клавиши macOS Название Описание
Ctrl + E ⌘Cmd + E Старт / стоп записи Начинает или останавливает запись пользовательских сценариев (interactions) Recorder panel. Записывает клики, нажатия клавиш, скролл, навигацию
Ctrl + ⏎Enter ⌘Cmd + ⏎Enter Повтор записи Воспроизводит записанный сценарий (replay) для отладки или тестирования. Используется для автовоспроизведения пользовательских действий
Ctrl + C ⌘Cmd + C Копировать запись Копирует записанный сценарий или выбранный шаг в буфер обмена. Результат: Playwright / Puppeteer код или CDP commands
Ctrl + B ⌘Cmd + B Toggle code view Переключает между визуальным представлением шагов записи и сгенерированным кодом (Playwright / Puppeteer)

Горячие клавиши: Layers panel

Горячие клавиши Windows Горячие клавиши macOS Название Описание
W / A / S / D W / A / S / D Навигация по слою Перемещение диаграммы слоёв: W (вверх), A (влево), S (вниз), D (вправо). Для просмотра больших композиций с множеством GPU-слоёв
X X Режим панорамирования Переключает режим навигации: курсор становится «рукой» для перетаскивания диаграммы. Повторное нажатие — выход из режима
V V Режим вращения Переключает режим 3D-вращения диаграммы слоёв. Полезно для визуализации вложенности GPU-слоёв
0 0 Сброс позиции Сбрасывает позицию и вращение диаграммы к начальному состоянию (reset transform). Аналог кнопки «Reset» на панели
⇧Shift + + или mousewheel ↑ ⇧Shift + + или mousewheel ↑ Масштаб + Увеличивает диаграмму слоёв. Используется для детального изучения отдельных GPU-слоёв
⇧Shift + - или mousewheel ↓ ⇧Shift + - или mousewheel ↓ Масштаб − Уменьшает диаграмму слоёв. Для обзора всей структуры GPU-слоёв