Инструменты разработчика Chrome: практическое руководство по DevTools

Практическое руководство по Chrome DevTools: как открыть инструменты разработчика, что делает каждая основная панель и какие горячие клавиши экономят больше всего времени.

Chrome DevTools — это набор инструментов веб-разработчика, встроенный в Google Chrome. Открыть его можно клавишей F12, сочетанием Ctrl + Shift + I в Windows и Linux или Cmd + Option + I на Mac. DevTools позволяет на лету смотреть и править HTML и CSS страницы, выполнять JavaScript, видеть каждый сетевой запрос, измерять производительность, эмулировать телефоны и проводить аудит страниц. В этом руководстве собраны самые нужные панели в том порядке, в котором они обычно требуются, и горячие клавиши, которые экономят больше всего времени.

Как открыть DevTools и сориентироваться

Кроме горячих клавиш, можно кликнуть правой кнопкой по любому элементу и выбрать Просмотреть код (Inspect): DevTools откроется с уже выделенным элементом. В меню Chrome также есть пункт Дополнительные инструменты > Инструменты разработчика.

С самого начала пригодятся три вещи:

Вкладки панелей вверху (Elements, Console, Sources, Network и другие). Редко используемые панели спрятаны за стрелкой >>.
Положение панели в меню из трёх точек: справа, снизу, слева или отдельным окном. Отдельное окно удобно, если у вас два монитора.
Командное меню: Ctrl + Shift + P (Cmd + Shift + P на Mac). Наберите название любой функции («screenshot», «disable JavaScript», «dark mode»), и она найдётся. Это самый быстрый способ узнать, что умеет DevTools.

Elements: просмотр и правка HTML и CSS

Панель Elements показывает живой DOM, а не исходный код, поэтому в нём есть всё, что добавил JavaScript. Выделите узел, и панель Styles справа покажет все применённые CSS-правила: какое побеждает, а какие перечёркнуты.

Что стоит попробовать:

Кликните по любому значению в Styles, чтобы изменить его и сразу увидеть результат. После перезагрузки правки пропадут, если не настроить local overrides.
Включайте состояния вроде :hover и :focus кнопкой :hov, чтобы стилизовать интерактивные состояния, не удерживая мышь на месте.
Кликните по цветному квадратику рядом с цветом, чтобы открыть пипетку. Для текста она показывает ещё и коэффициент контраста.
Откройте вкладку Computed, чтобы увидеть итоговые значения всех свойств и блочную модель.
Обратите внимание на значки flex и grid рядом с элементами: клик по ним накладывает линии раскладки прямо на страницу.

Console: выполнение JavaScript и чтение ошибок

В консоли видны ошибки, предупреждения и вывод console.log со страницы, а ещё здесь можно выполнять JavaScript в контексте страницы. Полезные помощники:

$0 — элемент, выделенный сейчас на панели Elements.
$$('a') возвращает массив всех элементов, подходящих под селектор.
copy(obj) копирует значение в буфер обмена.
Фильтруйте по уровню (ошибки, предупреждения) и по тексту, чтобы убрать шум.

Sources: отладка JavaScript

Панель Sources показывает файлы страницы, и именно здесь ставятся точки останова. Кликните по номеру строки, чтобы остановиться на ней, затем идите по коду шагами и смотрите значения переменных. Условные точки останова (правый клик по номеру строки) срабатывают, только когда выражение истинно. Event listener breakpoints останавливают выполнение на любом клике, нажатии клавиши или другом событии. Это выручает, когда непонятно, какой код вообще запускается.

Network: все запросы страницы

Панель Network перечисляет все запросы страницы: документы, скрипты, картинки, шрифты и обращения к API, со статусом, размером и временем. Кликните по запросу, чтобы увидеть заголовки, тело запроса, ответ и разбивку по времени.

Как это использовать на практике:

Поставьте галочку Disable cache, чтобы при открытом DevTools файлы всегда загружались заново.
В списке Throttling можно сымитировать медленный мобильный интернет.
Фильтруйте по типу (Fetch/XHR, JS, Img), чтобы быстро найти нужный запрос.
Кликните правой кнопкой по запросу и скопируйте его как fetch или cURL, чтобы повторить в другом месте.

Performance: что тормозит страницу

Запишите загрузку страницы или какое-то действие, и панель Performance покажет таймлайн работы браузера: скрипты, рендеринг, отрисовку и сеть. Долгие задачи отмечены красным. Панель также показывает живые Core Web Vitals (LCP, CLS и INP) для ваших действий и подсказки о вероятных причинах. Чтобы результат был ближе к телефону, перед записью включите замедление CPU в 4 или 6 раз. Подробнее в статье проверка скорости сайта на мобильных.

Панель Application показывает, что хранит страница: cookie, local и session storage, IndexedDB, cache storage и зарегистрированные service workers. Записи можно править и удалять. Это самый быстрый способ сбросить вход в аккаунт или проверить сценарий первого визита. Clear site data стирает всё для текущего домена.

Lighthouse: аудит страницы

Панель Lighthouse запускает автоматические проверки производительности, доступности, лучших практик и SEO в мобильном или десктопном режиме. Пошаговая инструкция: как провести аудит Lighthouse для мобильных.

Режим устройства: эмуляция телефонов и планшетов

Панель устройств (Ctrl + Shift + M или Cmd + Shift + M, когда фокус в DevTools) превращает страницу в вид телефона или планшета с соответствующим viewport, плотностью пикселей, user agent и touch-событиями. Подробно об этом в статье эмулятор мобильных устройств в Chrome. Для быстрых визуальных проверок без DevTools Mobile View Extension показывает такое же превью устройства по кнопке на панели инструментов.

Горячие клавиши, которые стоит запомнить

Действие	Windows / Linux	Mac
Открыть DevTools	`F12` или `Ctrl + Shift + I`	`Cmd + Option + I`
Сразу открыть Console	`Ctrl + Shift + J`	`Cmd + Option + J`
Режим выбора элемента	`Ctrl + Shift + C`	`Cmd + Shift + C`
Командное меню	`Ctrl + Shift + P`	`Cmd + Shift + P`
Панель устройств	`Ctrl + Shift + M`	`Cmd + Shift + M`
Поиск по всем файлам	`Ctrl + Shift + F`	`Cmd + Option + F`
Открыть файл по имени	`Ctrl + P`	`Cmd + P`
Жёсткая перезагрузка	`Ctrl + Shift + R`	`Cmd + Shift + R`

Расширение возможностей DevTools

Расширения Chrome могут добавлять в DevTools свои панели: инструменты для React, Vue, Angular и Redux, проверку доступности вроде axe DevTools. Короткий список есть в статье расширения Chrome для веб-разработчиков.

Частые вопросы

Как открыть инструменты разработчика в Chrome?

Нажмите F12 или Ctrl + Shift + I в Windows и Linux, Cmd + Option + I на Mac, либо кликните правой кнопкой по странице и выберите «Просмотреть код».

Можно ли редактировать сайт через Chrome DevTools?

Можно менять HTML и CSS страницы в своём браузере, чтобы примерить изменения. Правки локальные и пропадают после перезагрузки, настоящий сайт они не меняют.

Chrome DevTools бесплатный?

Да. DevTools входит в Chrome и во все браузеры на Chromium, например Edge, Brave и Opera, и ничего дополнительно скачивать не нужно.