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 для інспекції 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 Повторити зміну Відновлює останню скасовану зміну. Діє в межах поточної сесії редагування 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(), тощо), показуючи обчислене значення та контекст
⇧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» на панелі
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 Співпадаюча дужка Переміщує курсор до співпадаючої дужки ({}, [], ()). Корисно при навігації по вкладеним структурам: блокам коду, масивам, функціям
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, тощо) та повертається до списку запитів

Гарячі клавіші: 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-шарів