DevTools в браузере — справочник

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Тестировщику Инженеру

---

Попробуйте прямо сейчас

Не будем затягивать. Вы уже на веб-странице — прямо сейчас откройте средства разработчика и убедитесь, что они у вас есть. Идите по шагам; после каждого можно закрыть панель (F12 ещё раз) и перейти к следующему способу.

1. Нажмите F12 и подождите пару секунд. Снизу или сбоку должна появиться панель с вкладками вроде «Элементы», «Консоль», «Сеть». Получилось? Отлично — этот способ запомнят все.
2. Закройте панель и нажмите Ctrl + Shift + I (на macOS — Cmd + Option + I). Открылось снова? Это то же самое, что F12, только сочетанием — удобно, если F12 перехватывает игра или ноутбук без отдельной клавиши.
3. Закройте и нажмите Ctrl + Shift + J — откроется сразу вкладка Консоль (остальные вкладки тоже доступны сверху).
4. Правый клик по любому тексту или кнопке на странице → Просмотреть код (или Inspect). DevTools откроются на вкладке Элементы с уже выбранным узлом — так обычно чинят вёрстку.
5. Через меню браузера: ⋮ → Дополнительные инструменты → Инструменты разработчика (в Edge и Яндекс Браузере формулировка та же по смыслу).
6. С открытыми DevTools нажмите Ctrl + Shift + C (macOS — Cmd + Shift + C). Курсор станет «прицелом» — кликните по заголовку или кнопке на странице. Вкладка Элементы подсветит этот узел в дереве HTML. Сработало?
7. В правом верхнем углу панели DevTools откройте ⋮ → в блоке «Закрепить сбоку» выберите снизу (иконка с горизонтальной полосой внизу). Страница останется сверху, инструменты — под ней. Эту раскладку удобно оставить по умолчанию.
8. Нажмите Ctrl + Shift + P — откроется меню команд (Command Menu). Начните вводить screenshot и выберите Capture full size screenshot (полная страница в «Загрузки») или просто закройте меню по Esc. Главное — вы увидели «палитру» быстрых действий.

Мини-проверка drawer

Если внизу DevTools видна вторая полоса с вкладками — нажмите Esc: она спрячется. Ещё раз Esc (или иконка консоли в углу) — вернётся.

Так вы не потеряете место на экране, когда drawer не нужен.

Если ничего не открылось

Проверьте, не перехватывает ли F12 игра, лаунчер (Steam, Xbox Game Bar) или расширение. Попробуйте Ctrl+Shift+I или пункт меню из шага 5.

В Firefox вкладки называются по-русски иначе (Инспектор, Консоль), но открываются так же — F12 или Ctrl+Shift+I.

Если хотя бы один способ сработал — можно идти дальше. Остальная статья разберёт, что означает каждая вкладка и как не утонуть в интерфейсе.

---

Первый взгляд на интерфейс

Ниже — скриншот Chrome DevTools на этой же энциклопедии (русский интерфейс). На нём видно сразу три уровня:

• страница сверху;
• основная панель инструментов;
• дополнительная полоса снизу (drawer).

Куда «приклеить» DevTools

В правом верхнем углу панели DevTools откройте меню ⋮ (три точки). В блоке «Закрепить сбоку» четыре варианта — на скриншоте открыто именно это меню:

Иконка	Режим	Когда удобно
Отдельное окно	DevTools вынесены в второе окно	второй монитор, демонстрация экрана без панели
Слева	панель слева от страницы	узкий, но высокий монитор
Снизу	панель под страницей	широкая вёрстка, виден и сайт, и код
Справа	панель справа	классика на широком дисплее

Личная рекомендация автора статьи — закреплять снизу: страница остаётся по центру взгляда, дерево HTML и стили читаются на всю ширину, а высоту панели можно подстроить перетаскиванием границы. Справа тоже нормально, если привыкли к IDE с боковой панелью. Отдельное окно спасает, когда на одном мониторе тесно.

Выбор запоминается для каждого сайта — можно по-разному на localhost и на проде.

Основная панель — вкладки сверху

На скриншоте активна вкладка «Элементы» (в английской локали — Elements). Слева — дерево HTML, справа — «Стили», «Вычисленные», «Макет». Рядом в верхней полосе обычно живут «Консоль», «Источники», «Сеть», «Производительность», «Память», «Приложение», Lighthouse, «Регистратор» — полный список зависит от версии Chrome и установленных расширений (на снимке, например, виден AdBlock).

Скрытые вкладки возвращаются через » в конце полосы.

Дополнительная панель снизу (drawer)

Под основной областью — вторая горизонтальная панель. На скриншоте в ней вкладки:

• Консоль — ввод JavaScript и сообщения об ошибках (дублирует отдельную вкладку «Консоль» сверху, но всегда под рукой, пока вы в «Элементах»);
• Помощь от ИИ — подсказки Chrome по DevTools (можно не открывать, если работаете без ИИ);
• Что нового — заметки о свежих функциях браузера;
• Поиск — поиск текста по всем загруженным файлам страницы;
• Проблемы — сводка предупреждений (доступность, cookie, устаревшие API); на снимке в углу — «1 проблема».

Эту полосу не обязаны держать открытой. Потяните верхний край drawer вниз, чтобы уменьшить высоту, нажмите Esc, чтобы спрятать, или закройте ненужные вкладки крестиком на вкладке. Оставьте только Консоль, если нужны логи при правке вёрстки.

Маленький экран и тесный ноутбук

На экране 13–14″ при закреплении снизу и открытом drawer места для самой страницы остаётся мало. Варианты:

• закрепить DevTools справа или в отдельном окне на втором мониторе;
• свернуть drawer и открывать консоль по Ctrl+Shift+J, когда нужно;
• временно развернуть только нужную вкладку на всю панель DevTools.

Интерфейс гибкий — нет единственно правильной раскладки, есть удобная под ваш экран и задачу. Потратьте минуту на меню ⋮ → закрепление и на высоту границ — дальше читать справочник будет легче.

---

Маршрут чтения

Эта статья — справочник по встроенным инструментам браузера.

Общие принципы отладки, точки останова в IDE и символы — в «Отладка»; там же короткий практикум с debug.html.

Разметка — HTML, стили — CSS, скрипты — JavaScript.

Сеть и HTTP в контексте сайта — как работают сайты;

API через DevTools — также тестирование API.

Официальная документация

Текст опирается на открытую документацию Google Chrome DevTools (русская локализация): обзор, открытие, горячие клавиши.

В Edge, Яндекс Браузере, Opera, Brave интерфейс совпадает с Chromium; в Firefox — Инструменты разработчика с похожими вкладками, но другими названиями и деталями.

---

Содержание

1. Попробуйте прямо сейчас
2. Первый взгляд на интерфейс
3. Что такое DevTools
4. Как открыть и закрепить панель
5. Интерфейс и настройка
6. Command Menu и горячие клавиши
7. Общие возможности
8. Вкладка Elements
9. CSS в DevTools
10. Вкладка Console
11. Вкладка Sources и отладка JavaScript
12. Вкладка Network и Resources
13. Performance и Lighthouse
14. Memory
15. Application
16. Recorder, Rendering, Autofill, Accessibility
17. Типовые сценарии
18. Краткий FAQ

Углубление

19. Справочник вкладок — когда открывать
20. DOM — углубление
21. Console — дополнительные приёмы
22. JavaScript — асинхронность в отладчике
23. Network — углубление
24. Performance — чтение flame chart
25. Lighthouse — как читать отчёт
26. Memory — пошаговый чек-лист утечки
27. Application — сценарии по хранилищам
28. Issues и Coverage
29. Безопасность и этика
30. Практикум — три мини-задания
31. Связь с другими инструментами
32. Глоссарий
33. Что запомнить

---

Что такое DevTools

Средства разработчика (англ. Developer Tools, сокращённо DevTools) — встроенный набор панелей в веб-браузере. Они показывают, как устроена открытая страница:

• дерево HTML;
• применённые стили;
• выполняемый JavaScript;
• сетевые запросы;
• использование памяти;
• хранилища;
• метрики производительности.

DevTools работают над уже загруженной страницей. Вы видите тот же DOM и те же скрипты, что и пользователь, без отдельной «лабораторной» копии сайта. Поэтому инструмент незаменим для фронтенда, вёрстки, отладки API с клиента, ручного QA и анализа чужого продакшена (с оговорками по этике и robots).

Задача	Типичная вкладка
«Почему блок съехал?»	Elements + панель Styles
«Почему кнопка молчит?»	Console, затем Sources
«Куда ушёл запрос и что вернул сервер?»	Network
«Почему страница тормозит?»	Performance, Lighthouse
«Кто съел память?»	Memory
«Где лежит токен / cookie?»	Application

В экосистеме Chromium DevTools тесно связаны с Chrome DevTools Protocol (CDP) — по этому протоколу к браузеру подключаются Playwright, Puppeteer, удалённая отладка Android и часть IDE. Для повседневной работы протокол знать необязательно, но полезно понимать, что «автоматизация браузера» и DevTools смотрят на один движок.

---

Как открыть и закрепить панель

Если вы прошли блок «Попробуйте прямо сейчас» и «Первый взгляд на интерфейс», базовые способы открытия и закрепления снизу у вас уже есть. Ниже — шпаргалка.

Способы открытия — шпаргалка

Способ	Windows / Linux	macOS
Клавиша функции	F12	Fn + F12 (зависит от клавиатуры)
Основное сочетание	Ctrl + Shift + I	Cmd + Option + I
Только консоль	Ctrl + Shift + J	Cmd + Option + J
Контекстное меню	ПКМ по странице → Просмотреть код / Inspect	то же
Меню браузера	Дополнительные инструменты → Инструменты разработчика	то же

Закрыть панель — тем же сочетанием (F12 или Ctrl+Shift+I) или крестиком на DevTools.

Закрепление и drawer — кратко

Меню ⋮ → Закрепить сбоку — подробнее со скриншотом. Кратко, варианты Dock side:

• справа — классика для широкого монитора;
• снизу — удобно при отладке высокой вёрстки;
• отдельное окно — второй монитор или демонстрация экрана;
• слева — редко, но помогает при узком viewport.

Нижний drawer прячут Esc или уменьшают перетаскиванием границы. Практикум Sources — в «Отладка».

---

Интерфейс и настройка

Анатомия окна

1. Верхняя полоса вкладок — основные панели (Elements, Console, Sources, Network…).
2. Панель инструментов вкладки — фильтры, запись, очистка, настройки именно этой панели.
3. Рабочая область — дерево, редактор, таблица запросов, flame chart.
4. Боковые панели — Styles, Computed, Event Listeners, Breakpoints, Scope.
5. Drawer (нижний ящик) — вторая полоса: Консоль, Помощь от ИИ, Что нового, Поиск, Проблемы и др.; Esc и перетаскивание границы (подробнее).

Кнопка шестерёнки (Settings) открывает глобальные настройки DevTools: тема (светлая/тёмная), язык интерфейса, поведение при открытии, экспериментальные функции, форматирование.

Настройка под себя

В Settings → Preferences обычно включают:

• Disable cache (while DevTools is open) — при отладке статики и API, чтобы каждый запрос шёл на сервер;
• Enable CSS source maps / Enable JavaScript source maps — привязка минифицированного кода к исходникам;
• Auto-open DevTools for popups — отладка window.open;
• Theme — совпадение с системной темой или фиксированная тёмная.

Вкладки можно скрывать и возвращать: меню » справа в полосе вкладок → отметить нужные панели. Редко используемые (Recorder, Memory) можно убрать с панели, чтобы не отвлекали новичков.

Перетаскивание границ между панелями меняет пропорции; DevTools запоминает layout для origin (сайта).

---

Command Menu и горячие клавиши

Command Menu

Command Menu — палитра команд, как в VS Code. Открытие: Ctrl + Shift + P (Windows/Linux) или Cmd + Shift + P (macOS).

Начните вводить название действия:

• screenshot — снимок видимой области или полной страницы;
• coverage — отчёт покрытия CSS/JS;
• drawer — показать Rendering, Issues;
• disable javascript — выключить выполнение скриптов на вкладке;
• hard reload — жёсткая перезагрузка с очисткой кеша для этой вкладки.

Command Menu экономит время, когда вы забыли, в какой вкладке спрятана функция.

Основные сочетания (Chromium)

Действие	Windows / Linux	macOS
Открыть DevTools	Ctrl + Shift + I	Cmd + Option + I
Console	Ctrl + Shift + J	Cmd + Option + J
Command Menu	Ctrl + Shift + P	Cmd + Shift + P
Поиск по файлам (Sources)	Ctrl + P	Cmd + P
Поиск в файле	Ctrl + F	Cmd + F
Поиск по всем файлам	Ctrl + Shift + F	Cmd + Option + F
Перейти к строке	Ctrl + G	Cmd + G
Сохранить все файлы с диска (Overrides)	Ctrl + S	Cmd + S
Продолжить выполнение	F8	F8
Шаг с обходом (Step over)	F10	F10
Шаг с заходом (Step into)	F11	F11
Шаг с выходом (Step out)	Shift + F11	Shift + F11
Выключить все breakpoints	Ctrl + F8	Cmd + F8

Полный список — в документации по shortcuts. На macOS в меню DevTools дублируются подсказки для активной панели.

---

Общие возможности

Режим устройств (Device Mode)

Кнопка Toggle device toolbar (Ctrl + Shift + M) включает эмуляцию мобильного viewport:

• выбор пресета (iPhone, Pixel, iPad) или произвольные ширина/высота;
• DPR (device pixel ratio) — влияет на @media и картинки srcset;
• throttling сети — Slow 3G, Fast 3G, Offline;
• throttling CPU — имитация слабого устройства;
• ориентация portrait/landscape.

Device Mode меняет только отображение и условия в DevTools, а не реальный телефон. Для финальной проверки нужны физические устройства или облачные фермы (BrowserStack и аналоги).

Глобальный поиск

Search в drawer (Ctrl + Shift + F) ищет строку по всем загруженным ресурсам страницы: HTML, inline-скрипты, внешние JS/CSS. Удобно найти, где объявлен класс, вызывается API или захардкожен URL.

Отличие от Ctrl + P в Sources: последний открывает файл по имени, глобальный поиск — текст внутри файлов.

Удалённая отладка

Remote debugging позволяет подключить DevTools к другому экземпляру Chromium:

• Android — Chrome на ПК + USB-отладка, вкладка chrome://inspect;
• другой Chrome — запуск с флагом --remote-debugging-port=9222, затем chrome://inspect;
• Node.js — флаг --inspect, подключение через chrome://inspect или встроенный debugger в VS Code.

Сценарий:

• отладка WebView в приложении;
• таба на телефоне;
• headless Chrome в CI (с осторожностью).

Отключение JavaScript

Settings → Debugger → Disable JavaScript (или Command Menu: Disable JavaScript) останавливает выполнение скриптов при перезагрузке страницы. Полезно проверить:

• работает ли базовая HTML-форма без JS;
• не ломается ли вёрстка из-за скрипта, который прячет контент до инициализации;
• поведение <noscript>.

После проверки функцию нужно снова включить, иначе следующие сессии отладки будут вводить в заблуждение.

Панель Rendering (drawer)

More tools → Rendering (или через Command Menu) даёт переключатели:

• Paint flashing — подсветка перерисовываемых областей;
• Layout shift regions — визуализация CLS при разработке;
• FPS meter — счётчик кадров;
• Emulate CSS media — prefers-color-scheme, prefers-reduced-motion;
• Emulate vision deficiencies — протанопия, дейтеранопия и др. для проверки контраста.

Связь с доступностью и перформансом — в разделах Lighthouse и Accessibility.

Autofill

Панель Autofill показывает, какие поля браузер распознал для автозаполнения, какие подсказки предложены. Разработчик проверяет атрибуты autocomplete, name, связку label↔input. Подробнее — документация Autofill.

---

Вкладка Elements

Вкладка Elements (в Firefox — Инспектор) — центр работы с DOM и CSS в реальном времени.

Дерево DOM

Слева — иерархия узлов: элементы, текст, комментарии, #shadow-root для Web Components.

Действие	Как
Развернуть/свернуть	стрелка слева от тега
Выделить на странице	иконка «выбрать элемент» (Ctrl + Shift + C)
Редактировать HTML	двойной клик по тегу или ПКМ → Edit as HTML
Удалить узел	Delete
Скрыть элемент	ПКМ → Hide element (временно, visibility в инспекторе)
Скопировать	Copy → Copy outerHTML, selector, XPath, styles

Редактирование в дереве не сохраняется на сервере — только для эксперимента. Для постоянных правок меняют исходники проекта.

Поиск в DOM

Ctrl + F внутри Elements ищет по дереву: селекторы CSS, строки текста, XPath (в зависимости от версии). Примеры:

• .header nav a
• [data-testid="submit"]

Свойства DOM-узла

Вкладка Properties (рядом со Styles) показывает JavaScript-свойства объекта узла: innerText, value, checked, ссылки на обработчики. Это не HTML-атрибуты: атрибут value="x" в разметке и свойство element.value после ввода пользователя могут различаться.

Event Listeners

Панель Event Listeners перечисляет обработчики, привязанные к узлу (и опционально к предкам). Видно:

• тип события (click, input);
• файл и строку регистрации (если есть source map);
• passive / once / capture.

Помогает ответить на «почему срабатывает два раза» — часто висят два listener или всплытие без stopPropagation.

Badges (значки на узлах)

Chrome показывает badges у узлов в дереве:

• flex / grid — контейнер раскладки;
• scroll — прокручиваемая область;
• slot — Shadow DOM;
• reveal — скрытый фрагмент в режиме отладки.

Значки ускоряют навигацию по сложной вёрстке. Справочник — Elements badges.

Accessibility в Elements

Встроенная мини-панель Accessibility (или через drawer) показывает имя доступного объекта, роль, состояние. Для полного аудита используют вкладку Lighthouse и панель Accessibility в drawer.

---

CSS в DevTools

Панель Styles

Для выбранного элемента Styles перечисляет правила в порядке каскада:

• element.style — инлайн через инспектор (аналог атрибута style);
• правила из таблиц стилей с именем файла и строкой;
• перечёркнутые свойства — переопределены более специфичным правилом;
• иконка :hov — принудительное :hover, :focus, :active.

Клик по имени файла открывает исходник в Sources. Клик по квадрату цвета — Color Picker.

Computed

Computed показывает итоговое вычисленное значение каждого свойства после каскада. Раскрытие треугольника у свойства показывает цепочку правил, которые к нему привели. Удобно для width, font-size, display, когда в Styles десятки пересекающихся правил.

Box Model

Схема margin → border → padding → content с числами в пикселях. Клик по значению позволяет изменить отступы интерактивно. Связь с теорией — блочная модель CSS.

Редактирование и новые правила

• клик в пустую строку в element.style — разовое свойство;
• кнопка + — новое правило с селектором (DevTools подставит селектор для текущего узла);
• Classes — быстрое включение/выключение классов из списка на элементе.

CSS Issues

Вкладка Issues (или иконка предупреждений) собирает проблемы CSS: невалидные свойства, устаревшие префиксы, конфликты @layer, ошибки @import. Раньше часть предупреждений дублировалась в Console.

Color Picker

Продвинутый выбор цвета:

• форматы HEX, RGB, HSL, HWB;
• Contrast ratio — проверка контраста текста и фона (WCAG);
• палитра страницы (часто используемые цвета);
• CSS variables — выбор var(--token) из списка объявленных на странице.

Подробнее — документация по color.

Справочник CSS в DevTools

Автодополнение в Styles знает современные свойства, @supports, @container. Официальный перечень возможностей панели — CSS reference.

---

Вкладка Console

Console — поток сообщений runtime: ошибки JavaScript, предупреждения, console.* из вашего кода и из библиотек, а также сообщения браузера (CORS, deprecated API, нарушения CSP).

Уровни и фильтры

Уровень	Типичный источник
Error	необработанное исключение, failed fetch, синтаксическая ошибка
Warning	deprecated API, мелкие проблемы
Info	console.info, логи фреймворков
Verbose	подробный вывод, часто скрыт по умолчанию

Фильтры сверху: скрыть Network, скрыть расширения, только Errors. Поле фильтра принимает текст и мини-язык, например -url:chrome-extension чтобы убрать шум от расширений.

Понимание сообщений

Красная строка обычно содержит stack trace — цепочку файлов и строк. Клик по ссылке открывает Sources на месте ошибки (при наличии source map — на TypeScript/JSX, а не на минифицированный bundle).

CORS, Mixed Content, Refused to execute inline script — сообщения политики безопасности; исправление на стороне сервера (заголовки) или конфигурации сборки, а не «ещё один console.log».

Подробнее — Understand console messages.

Ввод выражений

Внизу Console — REPL: можно выполнить выражение в контексте текущей выбранной execution context (top, iframe, расширение). После паузы на breakpoint контекст совпадает с кадром стека.

• $0 — последний выбранный в Elements элемент;
• $_ — результат предыдущего выражения;
• $('selector') — document.querySelector;
• copy(obj) — копировать JSON в буфер;
• clear() — очистить консоль;
• table(array) — табличный вывод;
• dir(obj) — интерактивное дерево свойств.

Console API

Метод	Назначение
console.log(a, b)	общий вывод
console.info / warn / error	уровни
console.debug	verbose-уровень
console.table(data)	таблица для массивов объектов
console.group / groupEnd	вложенные группы
console.time / timeEnd	замер интервала
console.trace()	stack trace без throw
console.assert(cond, msg)	сообщение, если cond ложно
console.count(label)	счётчик вызовов
console.clear()	очистка

Стилизация через %c:

console.log('%c API OK ', 'background:#0a0; color:#fff; padding:2px 6px;', response);

Live Expressions

Live Expression (иконка глаза в Console) — закреплённое выражение, пересчитываемое при каждом обновлении страницы или шаге отладки. Пример: document.querySelector('#cart').childElementCount или window.__STATE__.

Format и стиль объектов

• раскрытие объекта показывает прототип и геттеры;
• Preview для Promise, Map, Set;
• для DOM-узлов — ссылка на Elements.

Справочник — Console API, utilities.

Console в drawer и на вкладке

Console можно держать внизу на любой вкладке (drawer, Esc) или на отдельной вкладке Console. При отладке в Sources удобен drawer: видны и код, и логи.

---

Вкладка Sources и отладка JavaScript

Sources объединяет файловый навигатор, редактор кода и отладчик JavaScript.

Навигатор файлов

Дерево Page — всё, что загрузила вкладка: HTML, JS, CSS, WebAssembly, сниппеты. Filesystem — локальная папка, сопоставленная с сайтом через Overrides. Overrides — ваши подмены файлов на диске.

Ctrl + P — быстрый поиск файла по имени (app.tsx, bundle.js).

Точки останова (breakpoints)

Тип	Когда ставить
Line breakpoint	клик по номеру строки
Conditional	ПКМ → Add conditional breakpoint → i === 42
Logpoint	ПКМ → Add logpoint → вывод без остановки
DOM breakpoint	Elements → ПКМ → Break on subtree / attributes / removal
XHR/fetch breakpoint	Sources → XHR/fetch → URL contains api/
Event Listener breakpoint	Sources → Event Listener Breakpoints → click
Exception breakpoint	пауза на throw или на uncaught

Панель Breakpoints справа перечисляет все активные точки; снятие галочки временно отключает без удаления.

Управление выполнением

При остановке доступны:

• Resume (F8) — продолжить до следующей точки;
• Step over (F10) — выполнить строку, не заходя в функцию;
• Step into (F11) — войти в вызов;
• Step out (Shift + F11) — выйти из текущей функции;
• Deactivate breakpoints — игнорировать все точки;
• Restart frame — повторить текущий кадр стека (если движок поддерживает).

Scope показывает Local, Closure, Global. Watch — произвольные выражения, пересчитываемые на каждом шаге. Call Stack — цепочка вызовов; клик по кадру переключает контекст Scope.

Практикум с debug.html — в статье «Отладка» (раздел «Запуск DevTools и точка останова»).

Blackbox

ПКМ по файлу в навигаторе → Blackbox script — отладчик пропускает этот файл при Step into/out, ошибки всё равно видны в Console. Используют для минифицированных библиотек (react-dom.production.min.js), когда source map недоступен.

Snippets

Snippets — сохранённые фрагменты JS, выполняемые в контексте страницы (Ctrl + Enter). Удобны для разовых скриптов: массовое изменение DOM, парсинг localStorage, тест API без правки репозитория.

Создание: Sources → Snippets → +. Snippets хранятся в профиле браузера.

Source maps

Минификатор и bundler (Vite, Webpack, esbuild) генерируют .map файлы, связывающие строку в bundle.js с src/App.tsx. При включённых Enable JavaScript source maps в Settings breakpoint ставится на исходник, stack trace читаемый.

Если карты не загружаются (404 на .map, отключены в prod), отладка идёт по bundle — см. Source maps.

Local Overrides

Overrides позволяют сохранить изменённый файл на диск: DevTools подменяет ответ сервера локальной копией. Сценарий: быстро проверить правку CSS/JS до коммита. Настройка: Sources → Overrides → Select folder for overrides.

Справочник отладчика

Полный перечень команд и панелей — JavaScript reference.

---

Вкладка Network и Resources

Зачем нужна Network

Каждый HTTP/HTTPS/WebSocket запрос, инициированный страницей, попадает в таблицу Network. Это главный инструмент для:

• проверки API (метод, статус, тело);
• диагностики медленной загрузки (waterfall);
• анализа кеша и заголовков;
• поиска лишних запросов (дубли, тяжёлые картинки).

Колонки таблицы

Колонка	Смысл
Name	URL (часто укороченный)
Status	HTTP-код (200, 404, 500) или (failed)
Type	document, script, xhr, fetch, img…
Initiator	кто запустил (строка в JS, парсер HTML)
Size	передано по сети / из кеша
Time	полная длительность

Клик по строке открывает детали:

• Headers — запрос и ответ, cookies, Set-Cookie, CORS;
• Payload / Request — тело POST, FormData, JSON;
• Preview / Response — форматированный ответ;
• Timing — DNS, connect, SSL, TTFB, download;
• Cookies — для этого запроса.

Фильтры

Поле фильтра принимает ключевые слова:

• domain:api.example.com
• method:POST
• status-code:404
• mime-type:application/json
• larger-than:1M
• -method:OPTIONS — исключить preflight

Кнопка Fetch/XHR оставляет только API-вызовы — типичный режим для отладки SPA.

Preserve log и Disable cache

• Preserve log — не очищать таблицу при навигации (критично для SPA);
• Disable cache — при открытых DevTools не брать ответ из HTTP-кеша.

Throttling

Выпадающий список No throttling → Slow 3G, Fast 3G, Custom — имитация сети. Дополняет Device Mode. Реальная сеть на телефоне всё равно может отличаться.

Copy as cURL

ПКМ по запросу → Copy → Copy as cURL — воспроизведение в терминале. Мост между браузером и curl. В тестировании API это стандартный приём.

Replay и блокировка

• Replay XHR — повторить запрос (если доступно);
• Block request URL — подмена сети для теста ошибок;
• Override content — связь с Overrides.

Справочник — Network reference.

Resources

Панель Resources (или раздел в Application / отдельная вкладка в новых версиях) группирует загруженные файлы по типу. Дублирует часть навигатора Sources, но удобна для обзора «что вообще скачалось».

---

Performance и Lighthouse

Performance (профилирование)

Вкладка Performance записывает трассировку одной вкладки:

• активность Main thread (JavaScript, layout, paint);
• GPU, Raster;
• Network на временной шкале;
• скриншоты кадров (опционально).

Запись: кнопка Record → воспроизвести тормоз → Stop. Анализ:

• длинные жёлтые блоки Scripting — тяжёлый JS;
• Layout / Recalculate Style — частые пересчёты вёрстки;
• Painting — дорогая отрисовка;
• красные треугольники — Long Tasks (>50 ms).

Interactions — задержка после клика (INP). Связь с метриками — фронтенд и метрики.

Для Node.js отдельный сценарий — Performance for Node (подключение через --inspect).

Lighthouse

Lighthouse запускает автоматический аудит открытой страницы:

Категория	Что проверяет
Performance	LCP, CLS, TBT и др.
Accessibility	контраст, labels, ARIA
Best Practices	HTTPS, устаревшие API
SEO	meta, crawlability
PWA	manifest, service worker

Режим Navigation (полная загрузка) или Timespan / Snapshot — в зависимости от версии. Отчёт сохраняется в HTML/JSON; пункты со ссылками на документацию.

Lighthouse — ориентир, а не единственный источник истины: лабораторные условия отличаются от продакшена пользователей.

---

Memory

Вкладка Memory профилирует кучу JavaScript (и связанные структуры).

Профиль	Назначение
Heap snapshot	снимок всех объектов; сравнение двух снимков находит утечки
Allocation instrumentation on timeline	когда и где выделяли память
Allocation sampling	лёгкая выборка с меньшими накладными расходами

Типовой поиск утечки:

1. Snapshot A;
2. выполнить действие (открыть/закрыть модалку);
3. принудительный GC (иконка корзины);
4. Snapshot B;
5. Comparison → искать объекты, которые остались после закрытия UI.

Утечки в SPA часто связаны с незакрытыми подписками, таймерами, ссылками на DOM в замыканиях.

---

Application

Вкладка Application (ранее часть Resources) — хранилища и фоновые API origin.

Storage

Механизм	Где смотреть
Local Storage	ключ-значение, синхронно
Session Storage	на вкладку
IndexedDB	базы, object stores
Cookies	все cookie origin
Cache Storage	Response из Service Worker
Shared Storage (если есть)	экспериментальные сценарии

Можно редактировать, удалять ключи, очищать целиком — удобно при отладке авторизации и feature flags.

Cookies

Подраздел Cookies показывает имя, значение, domain, path, HttpOnly, Secure, SameSite, срок. Правки вручную помогают проверить сценарии «протухшая сессия». Подробнее — Cookies в DevTools.

Service Workers и PWA

Service Workers — зарегистрированные worker-скрипты, статус, push, sync. Кнопки Unregister, Update, Bypass for network — отладка офлайн-кеша.

Manifest — проверка manifest.json для PWA.

Background services

Разделы Background fetch, Background sync, Notifications, Payment handler и др. показывают очереди фоновых задач. Справочник — Background services.

Frames и Security

Дерево Frames — иерархия iframe. Security — TLS, mixed content. Reporting API — отчёты CSP и Permissions Policy.

---

Recorder, Rendering, Autofill, Accessibility

Recorder

Recorder записывает сценарий пользователя (клики, ввод, навигация) и экспортирует в Puppeteer или JSON для автотестов. Подходит для быстрого прототипа e2e, а не для замены осознанного тест-дизайна.

Шаги: Record → действия на странице → Stop → Replay / Export. Обзор Recorder.

Rendering

См. общие возможности — Rendering. Дополняет Performance визуальной диагностикой перерисовок.

Autofill

См. Autofill. Проверка форм входа и оплаты.

Accessibility (drawer)

Панель Accessibility в drawer и дерево Accessibility в Elements показывают доступное имя, роль, aria-*. Полный чеклист — Lighthouse; ручная проверка с screen reader всё равно нужна.

Справочник возможностей — Accessibility reference.

---

Типовые сценарии

«Стили не применяются»

1. Elements → выбрать элемент.
2. Styles — есть ли перечёркнутое правило? Кто победил в каскаде?
3. Computed — итоговое display, color, visibility.
4. Network — загрузился ли файл CSS (200, не 404 из CDN).
5. При display: none в другом медиазапросе — Device Mode / Rendering → media.

«API возвращает не то»

1. Network → Fetch/XHR → воспроизвести действие.
2. Статус, Response, Headers (Authorization, Content-Type).
3. Compare с Postman/curl — тестирование API.
4. Initiator — какой файл вызвал fetch.

«Ошибка в консоли на проде»

1. Console → раскрыть stack → открыть исходник.
2. Проверить source maps.
3. Blackbox сторонние библиотеки, шагать свой код.
4. Conditional breakpoint на подозрительном if.

«Страница лагает при скролле»

1. Performance → Record → скролл → Stop.
2. Rendering → Paint flashing — лишние перерисовки?
3. Memory — растёт ли heap без GC?

«Не могу войти / сессия слетает»

1. Application → Cookies / Local Storage.
2. Network → Set-Cookie, SameSite, Secure.
3. Очистить storage для origin и повторить сценарий с Preserve log.

---

Краткий FAQ

Вопрос. DevTools видит секреты из .env на фронте?

Ответ. Всё, что попало в bundle или в HTML, видно в Sources и Network. Секреты держат на сервере. Подробнее — безопасность .env.

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

Ответ. Нет. Это локальный эксперимент в вашем браузере. Для постоянных изменений правят репозиторий и деплоят.

Вопрос. Firefox — те же клавиши?

Ответ. Открытие похоже (F12, Ctrl+Shift+I). Названия вкладок другие: Инспектор, Консоль, Отладчик, Сеть. Логика та же.

Вопрос. React DevTools и Chrome DevTools — что выбрать?

Ответ. Оба. Chrome DevTools — DOM, сеть, производительность. React DevTools (расширение) — дерево компонентов, props, hooks. Они дополняют друг друга.

Вопрос. Стили меняю в DevTools, после F5 всё пропало.

Ответ. Так и должно быть — правки в инспекторе не сохраняются на сервере. Перенесите изменение в файл CSS/SCSS в проекте. Временные эксперименты — через Overrides в Sources.

Вопрос. В Network пусто, хотя сайт явно что-то грузит.

Ответ. Откройте DevTools до действия, включите Preserve log, снимите лишние фильтры. Для SPA смотрите тип Fetch/XHR. Если панель открыли после загрузки — обновите страницу с уже открытой вкладкой «Сеть».

Вопрос. «Помощь от ИИ» в drawer — обязательна?

Ответ. Нет. Это встроенная подсказка Chrome. Закройте вкладку крестиком или спрячьте весь drawer клавишей Esc. На работу Elements/Network это не влияет.

---

Дальше — углубление

Ниже — дополнительные таблицы, чек-листы и приёмы по каждой вкладке.

Если вы только освоили открытие панели и закрепление снизу, можно вернуться сюда после первого бага в своём проекте.

Итоги и ссылки — в конце, в разделе «Что запомнить».

---

Справочник вкладок — когда открывать

Вкладка	Открывайте, если…	Частая ошибка новичка
Elements	смещение блоков, неверный шрифт, скрытый текст	правят только element.style, забывают про файл CSS
Console	красная ошибка, undefined is not a function	игнорируют stack trace и смотрят только последнюю строку
Sources	логика if/else, async, библиотека «ломает» состояние	ставят breakpoint в минификате без source map
Network	401/403/500, CORS, «данные не пришли»	смотрят только Preview, не Headers и Timing
Performance	лаги, долгий INP, «подвисает» скролл	делают вывод по Lighthouse без воспроизведения сценария
Memory	вкладка жрёт RAM, растёт heap	делают один snapshot без сравнения до/после
Application	«не сохраняется логин», PWA не обновляется	чистят cookies, не проверяя SameSite и domain
Lighthouse	нужен чеклист перед релизом	гоняются за 100 баллами, ломая реальный UX
Recorder	нужен черновик e2e-сценария	считают запись заменой стабильных селекторов

---

DOM — углубление

Документ в браузере — живое дерево узлов. DevTools показывает его после парсинга HTML, исправлений браузера и вставок скриптами.

Типы узлов

Узел	Пример	Заметка
Element	<div>	имеет атрибуты и стили
Text	текст внутри <p>	редко правят вручную
Comment	<!-- -->	виден в дереве
Document	#document	корень
DocumentFragment	шаблоны	встречается при клонировании

Shadow DOM

У Web Components в дереве появляется #shadow-root. Стили из основного документа не проникают внутрь (кроме :host и CSS variables при настройке). Инспектор показывает shadow-дерево при раскрытии. Отладка компонентов без раскрытия shadow часто даёт «пустой» div снаружи.

Псевдоэлементы

::before и ::after отображаются в дереве Elements как отдельные узлы при включённой опции Show pseudo-elements. Стили для них правят в панели Styles в секции ::before.

Break on DOM

Тип breakpoint	Срабатывает
subtree modifications	добавление/удаление потомков
attribute modifications	смена class, data-*, disabled
node removal	удаление выбранного узла

Используйте, когда скрипт «перерисовывает» список и вы теряете элемент, на котором стояли.

Подробнее — DOM в DevTools, свойства узлов.

---

Console — дополнительные приёмы

Группировка логов

console.group('Checkout');
console.log('cart', cart);
console.log('user', user);
console.groupEnd();

Вложенные groupCollapsed сворачивают шумные блоки по умолчанию.

Замеры времени

console.time('render');
renderList(items);
console.timeEnd('render'); // render: 12.4ms

Для точных микробенчмарков в hot path лучше Performance, но time/timeEnd достаточно на этапе прототипа.

Мониторинг событий

monitorEvents(document.querySelector('#app'), 'click');
// … клики появятся в Console
unmonitorEvents(sameElement, 'click');

Полезно, когда подозреваете лишние обработчики без перезагрузки страницы.

debug() и monitor

• debug(fn) — остановка при вызове функции fn (один раз снимите breakpoint);
• monitor(fn) — лог каждого вызова с аргументами;
• monitorEvents(element, ['scroll', 'resize']) — поток DOM-событий.

См. Console reference, логирование.

Сохранение лога

ПКМ в Console → Save as… — экспорт для баг-репорта. Включайте Preserve log до воспроизведения, иначе навигация SPA очистит историю.

---

JavaScript — асинхронность в отладчике

Async stack traces

В Settings включите Enable async stack traces. Тогда в Call Stack видна цепочка await и Promise.then, а не только «анонимная» микрозадача.

XHR/fetch breakpoints

В Sources → XHR/fetch Breakpoints → + → подстрока URL (/api/orders). Любой fetch, содержащий строку, остановит выполнение до отправки (удобно поймать момент формирования тела запроса).

Promise rejection

В Console включите Pause on uncaught exceptions и отдельно Pause on caught exceptions (осторожно — шумно). Для промисов смотрите фильтр Unhandled promise rejection.

Workers

Sources показывает Dedicated Workers и Service Workers отдельными target. Console сверху имеет выпадающий список execution context — переключитесь, если лог идёт из worker, а не из main thread.

---

Network — углубление

Waterfall (водопад)

Горизонтальная полоса времени раскладывает фазу:

1. Queueing — браузер ждёт слот соединения (лимит на origin).
2. Stalled — ожидание до отправки.
3. DNS Lookup — разрешение имени.
4. Initial connection — TCP + TLS.
5. SSL — рукопожатие (если HTTPS).
6. Request sent — байты запроса ушли.
7. Waiting (TTFB) — сервер думает.
8. Content Download — тело ответа.

Длинный TTFB при маленьком ответе — сигнал к бэкенду или БД. Длинный Download при маленьком TTFB — тяжёлое тело или сеть.

Initiator chain

Колонка Initiator раскрывается в цепочку: какой скрипт вызвал fetch, откуда загрузился скрипт. Связь с как работают сайты.

HAR

ПКМ в Network → Save all as HAR with content — архив для коллеги или для повторного анализа в DevTools позже (Load HAR).

WebSocket

Фильтр WS показывает кадры. Вкладка Messages — входящие/исходящие фреймы, удобно для чатов и live-данных.

Preflight OPTIONS

Для CORS браузер может отправить OPTIONS перед POST. Если OPTIONS падает, основной запрос не уйдёт — смотрите оба в цепочке.

---

Performance — чтение flame chart

После записи профиля:

1. Выберите участок с красной полосой Long task на Main.
2. Внизу Bottom-Up — какие функции съели время суммарно.
3. Call tree — иерархия вызовов в выбранном интервале.
4. Event log — список событий (Layout, Paint) по времени.

Summary сверху даёт доли Scripting / Rendering / Painting / System / Idle. Если Scripting > 50% при простом скролле — ищите обработчики scroll без passive или тяжёлую работу в listener.

Web Vitals lane (в новых версиях) привязывает метрики к моменту записи.

Справочник — Performance reference.

---

Lighthouse — как читать отчёт

Каждый проваленный аудит содержит:

• описание проблемы;
• элемент (селектор или URL);
• ссылку Learn more.

Типичные пункты для фронтенда:

• Properly size images — отдайте width/height или srcset;
• Eliminate render-blocking resources — отложите некритичный CSS/JS;
• Uses deprecated APIs — замена API в коде;
• Buttons do not have accessible names — текст или aria-label.

Запускайте Lighthouse в режиме инкогнито без расширений — расширения завышают шум и время.

---

Memory — пошаговый чек-лист утечки

1. Откройте страницу в чистом профиле или инкогнито.
2. Heap snapshot → снимок #1.
3. Выполните действие 5–10 раз (открыть модалку, перейти туда-обратно).
4. Закройте UI, подождите 2–3 секунды.
5. Нажмите Collect garbage (иконка мусорки).
6. Снимок #2.
7. Выберите #2, Comparison → baseline #1.
8. Сортируйте по Delta — объекты, которые остались в плюсе, подозрительны.
9. Раскройте Retainers — кто держит ссылку (часто closure или detached DOM tree).

Detached DOM tree — узел удалён из документа, но на него ещё ссылается JS (классический leak в SPA).

---

Application — сценарии по хранилищам

Симптом	Куда смотреть
«После F5 всё забыто»	Session Storage vs Local Storage
«Два таба не синхронны»	Local Storage + событие storage
«Офлайн не работает»	Service Worker, Cache Storage
«Токен пропал»	Cookies, HttpOnly, срок, SameSite=Lax при cross-site POST
«Большие данные»	IndexedDB, квоты в Application

Clear site data в Application или в настройках сайта (замок слева от URL) — жёсткий сброс при отладке auth.

---

Issues и Coverage

Issues

Панель Issues (drawer) агрегирует:

• проблемы CSP;
• Mixed content;
• устаревшие API;
• Quirks mode;
• ошибки форм и cookie (SameSite).

Клик по issue ведёт к элементу или запросу.

Coverage

Command Menu → coverage → Start instrumenting coverage and reload page. После действий на странице отчёт покажет неиспользуемые байты CSS/JS (красные полосы в Sources). Помогает убрать мёртвый код из bundle; не путать с tree-shaking на этапе сборки.

---

Безопасность и этика

• На чужих сайтах DevTools используйте для обучения и своих проектов; массовый скрапинг и обход защиты без разрешения — нарушение правил площадки и закона.
• Не вставляйте в Console на проде чужих сайтов чужой код из интернета — это выполнение произвольного JS от вашего имени.
• Скриншоты Network с токенами и cookie — утечка в тикеты; размывайте Authorization и session id.
• Расширения браузера вмешиваются в Network и Console — при странных запросах отключите их или используйте профиль без расширений.

См. забота о коде и данных.

---

Практикум — три мини-задания

Задание 1 — каскад CSS

1. Откройте любую страницу энциклопедии.
2. Ctrl+Shift+C → клик по заголовку.
3. В Styles найдите правило для color и временно смените цвет.
4. В Computed найдите, из какого файла пришло итоговое значение.
5. Отмените правку (Ctrl+Z в Styles или перезагрузка).

Задание 2 — сеть

1. Network → Disable cache → перезагрузка.
2. Отфильтруйте Doc и Font — оцените порядок загрузки.
3. Выберите HTML-документ → Timing → запишите TTFB.

Задание 3 — отладка скрипта

Повторите блок из Отладка с debug.html: breakpoint, Step Into, Watch на message, Console с $0.

---

Связь с другими инструментами

Инструмент	Когда вместо DevTools	Когда вместе
VS Code debugger	Node, Python, attach к Chrome	фронт: breakpoint в IDE через extension
React/Vue DevTools	дерево компонентов	DOM/Network остаются в Chrome
Postman	автотесты API, коллекции	DevTools — как реально шлёт браузер
Playwright	CI, регресс	тот же CDP, скриншоты и trace
Grafana	метрики prod	DevTools — локальная репродукция

---

Глоссарий (кратко)

Термин	Значение
CDP	Chrome DevTools Protocol — машинный интерфейс к браузеру
Source map	карта строк bundle → исходник
TTFB	время до первого байта ответа
HAR	архив сетевой активности
Heap	куча объектов JS
Long task	задача main thread > ~50 ms
Drawer	нижняя панель DevTools
Blackbox	исключить файл из пошаговой отладки
Override	подмена файла с диска при загрузке

---

Что запомнить

• DevTools — встроенная лаборатория для HTML, CSS, JS, сети и хранилищ на живой странице.
• F12 / Ctrl+Shift+I открывают панель; Ctrl+Shift+C — выбор элемента; Ctrl+Shift+P — Command Menu.
• Закрепление снизу и скрытие лишнего drawer (Esc) экономят место на ноутбуке.
• Elements — вёрстка и стили; Console — ошибки; Sources — отладка JS; Network — HTTP и API.
• Performance и Lighthouse — скорость и качество; Memory — утечки; Application — cookies и storage.
• Правки в инспекторе временные; в репозиторий идут изменения кода и source maps для prod.

Дальше по разделу: Отладка · Анализ производительности · Расширения для браузера · о разделе

Внешние ссылки: Обзор DevTools · Открытие · Настройка · Elements · Console · Network

---