Chrome DevTools — швейцарский нож разработчика

DevTools встроен в браузер Chrome и открывается клавишей F12. В нём смотрят HTML и CSS, читают ошибки JavaScript, исследуют сетевые запросы, меряют производительность и эмулируют мобильные устройства. Это «рентген» любого сайта.

Уровень: начальный 19 разделов ⏱ 2–3 часа

1. Интерфейс DevTools

Открыть: F12 или Ctrl + Shift + I в Chrome. Основные вкладки:

Вкладка	Прямое назначение
Elements	HTML/DOM и CSS
Console	ошибки, логи, выполнение JS
Sources	исходники, точки останова
Network	все запросы и их скорость
Performance	профиль загрузки и взаимодействия
Application	хранилища: localStorage, cookies
Lighthouse	аудит (курс Lighthouse)

Хочешь голый браузер без панели — поменяй раскладку: Ctrl+Shift+P → «Dock to right».

2. Elements: HTML и CSS на лету

Кликни правой кнопкой по элементу страницы → Inspect. DevTools покажет его в иерархии DOM. Полезные действия:

править атрибуты и текст прямо в дереве;
менять CSS в правой панели со «живым» превью;
переключать состояния ✳ (hover, focus) отладку;
скрыть блок (display:none) — клавиша H.

// клик по кнопке в правой панели → + стиль
.hero {
  background-color: #2563eb;   // меняй и смотри мгновенно
}

Правки в Elements не сохраняются в файл. Записывай итоговые значения в VS Code, а лучше используй это как быстрый прототип.

3. Console: окно ошибок и диалог с JS

В консоли появляются ошибки (в красном) и вывод console.log. Внизу можно сразу вводить код:

console.log("привет");
console.warn("предупреждение");
console.error("ошибка");
console.table([{ a: 1 }, { a: 2 }]);

// прямо в консоли
document.title
> "Какой-то сайт"
$("#menu")        // короткий document.querySelector

Ошибки удобно разбирать по стеку вызовов прямо в консоли: клик по файлу открывает исходник в Sources.

4. Sources: точки останова и шаги

Открой Sources → Ctrl+P → имя файла. Клик по номеру строки ставит breakpoint (синяя точка). При перезагрузке выполнение остановится, и станут доступны:

F10 — шаг не входя в функцию;
F11 — шаг с входом;
Shift + F11 — выйти из функции;
панель Scope — переменные на текущем шаге.

// точки останова можно ставить и в коде
debugger;   // остановка при выполнении

5. Network: всё о запросах

Сетевой «ФБР» страницы. Открой Network и перезагрузи страницу (F5). Напротив каждого запроса — метод, статус, тип, размер и время:

колонка Name — URL запроса;
Status — 200, 404, 500…;
Waterfall — этапы времени (DNS, TLS, ожидание, получение);
кнопка Preserve log — не чистить логи между загрузками;
фильтры: All / XHR / JS / CSS / Img.

Клик по запросу → вкладка Preview/Response — увидишь JSON ответа API; вкладка Headers — заголовки запроса и ответа. Это ваш быстрый взгляд на REST API (курс REST API).

6. Throttling: эмуляция медленного интернета

В Network сверху выбери профиль скорости: Slow 3G, Fast 3G или кастомный. Так проверяют LCP и опыт реальных пользователей (связано с метриками курса Lighthouse).

7. Performance: профайлер

Запись профиля: нажми Record (точка), подожди несколько секунд, останови. DevTools покажет «пламя» — где код тратил время:

Summary — сколько заняли JS, рендер, стили;
найди красные/фиолетовые блоки — дорогостоящие функции;
двойной клик по блоку — откроется исходный код.

Записывай профиль не на своём мощном ноутбуке, а хотя бы в Fast 3G + CPU 4x slowdown (вкладка Performance → настройки), иначе цифры будут обманчиво хорошими.

8. Application: localStorage, sessionStorage, cookies

// из консоли
localStorage.setItem("theme", "dark");
localStorage.getItem("theme");
sessionStorage.setItem("token", "abc");

document.cookie            // посмотреть cookies

Вкладка Application покажет эти хранилища по сайтам. Также здесь: IndexedDB, Service Workers, кэш и готовность PWA.

Если логин «протёк» — очисти cookies и localStorage: правый клик по сайту → Clear storage. Это часто решает неочевидные баги авторизации.

9. Device Mode: мобильная эмуляция

Иконка «переключение устройства» (Ctrl + Shift + M) включает телефонную эмуляцию:

выбор устройства: iPhone, Pixel, планшеты;
поворот экрана, масштабирование;
эмуляция touch-событий и небезопасной сети;
сетка адаптивности (breakpoints реальных устройств).

Это эмуляция, а не настоящий телефон: рендер движка и тач тонкие, но отличие от реального устройства всё же есть. В итоге проверь на реальном девайсе.

10. Командное меню и горячие клавиши

Ctrl + Shift + P      # команды DevTools
F12                   # открыть/закрыть DevTools
Ctrl + Shift + C      # выбрать элемент на странице
Ctrl + Shift + M      # Device Mode
F5 / Ctrl + R         # перезагрузить

Из командного меню: «Coverage» (сколько кода реально выполняется), «Rendering → Paint flashing» (где рисует браузер), «Search» (поиск по всем ресурсам).

11. Применение к собственным проектам

Проверь вёрстку из курса HTML/CSS: контраст, отступы, переполнения;
баги JS-логики из курса JavaScript ловятся в Console+Sources;
ответы API смотри в Network — поможет курс REST API;
аудит качества — вкладка Lighthouse (курс Lighthouse).

12. Rendering: как браузер рисует страницу

Панель Rendering включается командой Ctrl+Shift+P → «Show Rendering». Она показывает, что именно и в каком порядке браузер рисует на экране. Это незаменимая помощь при поиске раздражающих скачков вёрстки и перерисовок.

Paint flashing — вспышки на областях, которые сейчас перерисовываются; если мерцает половина экрана — повод искать лишние transform/width-анимации;
Layout Shift Regions — подсвечивает смещения макета (влияют на метрику CLS из курса Lighthouse);
Frame Rendering Stats — FPS и время кадра при анимациях.

Хороший «обыск»: включи Paint flashing и поинтеракционируй со страницей. Если вспышки не ограничиваются одним блоком — ищи, что заставляет пересчитываться весь документ.

13. Memory: снимки кучи и утечки

Вкладка Memory (или Profiles) позволяет делать heap-снимки — полную картину объектов в памяти. Делают снимок до действия, повторяют действие несколько раз, делают снимок после: если число объектов растёт и не падает — это утечка.

открой Memory → Take heap snapshot;
выполни в приложении сценарий (открытие/закрытие окна);
сделай второй снимок и сравни через «Summary» / «Comparison»;
ищи объекты с пометкой detached — они потеряли ссылки, но живут в куче.

// классическая утечка: слушатель на удалённом узле
button.addEventListener('click', handler);
button.remove();      // узел стёрт, а обработчик держит его живьём

Одна утечка в JS почти не ощущается, но на долгоживущих страницах (SPA) они копятся. Регулярная проверка heap-снимков — часть гигиены фронтенда.

14. Удалённая отладка мобильных устройств

Эмуляция из раздела Device Mode — не настоящий телефон. Отладка реального устройства подключается по USB и работает через адрес chrome://inspect.

включи на Android «Режим разработчика» и «Отладку по USB»;
подключи телефон кабелем и открой на ПК chrome://inspect;
разреши доступ к устройству в браузере телефона;
открой своё приложение — оно появится в списке, и нажми Inspect.

// окно DevTools откроется на ПК, а управляет устройством
// adb reverse пробрасывает localhost с телефона на ПК
adb reverse tcp:8000 tcp:8000

Для iOS Chrome использует Safari Web Inspector: на iPhone включи «Расширенные функции» → «Web Inspector», в Safari на macOS — меню «Разработка».

15. Recorder: запись и воспроизведение действий

Панель Recorder записывает клики, ввод и навигацию, а затем превращает их в тест или набор шагов для воспроизведения бага. Открой её через командное меню Ctrl+Shift+P → «Show Recorder».

// вкладки записи: Record → выполни сценарий → Replay
// экспорт в файл: опции → Export → Puppeteer / JSON
Recorder -> New recording -> Replay

Экспорт в Puppeteer даёт готовый скрипт, который можно положить в автотесты:

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://localhost:8080');
await page.click('.add-to-cart');
await browser.close();

Recorder удобен для шагов «как повторить баг»: записал сценарий — и коллега воспроизводит проблему один в один по шагам.

16. Snippets и Local Overrides

Snippets — многоразовые скрипты, которые выполняются на любой странице без сохранения в репозиторий. Создай в Sources → Snippets, вызови Ctrl+Enter:

// быстрый запрос к API без новой вкладки
const res = await fetch('/api/orders');
console.log('status:', res.status);
console.table(await res.json());

Local Overrides позволяют подменять файлы сайта локальными версиями: правка стиля или ответа API сохраняется на диске и применяется при каждой перезагрузке, даже без сервера.

вкладка Sources → Overrides → Select folder for overrides;
редактируй любой файл — DevTools добавляет имя переопределённого;
отключи Enable Local Overrides, когда эксперимент закончен.

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

17. XHR и Event Listener breakpoints

Классические breakpoints останавливают по строке. Дочерние типы ловят событие целиком: XHR/fetch breakpoints срабатывают в момент отправки запроса, Event Listener breakpoints — на клик, сетевой ответ, таймер или изменение DOM.

// правый клик в строке → Add conditional breakpoint
xhr.onreadystatechange
// логируем только код 500 и добавим метку
this.status === 500

URL contains: фильтр по подстроке адреса; оставь пустым — ловить все;
пауза на fetch/XMLHttpRequest: глянь initiator — кто инициировал;
для таймеров включи SetTimeout/SetInterval — найдёшь источник повторов.

Когда «ничего не происходит» на клике, ставь breakpoint на click: поймаешь стек вызовов, даже если обработчик не в том файле, где ты искал.

18. Панель Issues и дерево доступности

Вкладка Issues собирает проблемы, которые не ломают страницу, но портят её: ошибки CSP, смешанный контент, устаревшие API, отсутствие alt у изображений. Открой и прочитай первые строки — часто это готовый план исправлений.

// в Elements: открой вкладку Accessibility
// дерево показывает, что видит скринридер
span role="button" != button

Accessibility tree: проверь, «читается» ли кнопка как кнопка;
атрибуты aria и роль: скринридер опирается на них;
Issues → Filter: выбери только текущую страницу, чтобы не тонуть.

Совместно с панелью Lighthouse из раздела 4 это даёт полную картину: быстродействие, SEO и доступность в одном заходе.

19. Экспорт данных: HAR и профилирование

HAR-файл — полный слепок сетевого обмена: заголовки, тела, тайминги. Сохрани через Network → правый клик → Export as HAR и отдай бэкендеру при баге.

// тайминги запроса: блокировка, ожидание, получение
// если DNS-ожидание велико — проблема у провайдера или DNS
// если TTFB велик — дело на сервере, не в фронте

профиль Performance сохрани как .trace и открой в Performance Insights;
Memory → Save snapshot делится .heapsnapshot для анализа утечек;
все файлы разработчика пригодятся в отчёте и в регрессионных сравнениях.

HAR содержит содержимое запросов (и токены!). Перед отправкой третьим лицам удали чувствительные заголовки и тела POST-запросов.

20. Инспекция Flexbox и Grid

Плохо выровненный блок — чаще проблема раскладки, а не «магии браузера». Открой элемент и нажми значки Flex/Grid на панели Elements:

сетка показывает линии, треки и зазоры Grid, а также оси и ячейки Flex;
панель Layout перечисляет все grid-контейнеры страницы — включая вложенные;
выравнивание justify-content/align-items меняется на лету, результат виден сразу.

// обведи элементы, чтобы увидеть «убежавших» из границ
[data-ui] { outline: 1px dashed #2563eb; }
[data-ui] * { outline: 1px dashed #f59e0b; }

Этот трюк мгновенно показывает переполнение из-за min-width и длинного текста — до любых споров о «пикселях».

21. Эмуляция окружения: гео, сенсоры, WebAuthn

Случай «на устройстве работает, на сайте нет» обычно про окружение. В DevTools эмулируется не только сеть:

More tools → Sensors — координаты геолокации и акселерометр;
WebAuthn — виртуальные USB-ключи для теста входа по FIDO2;
Idle detection — состояния «пользователь отошёл» и «экран заблокирован».

// проверь, что гео-код читает navigator.geolocation
navigator.geolocation.getCurrentPosition(showMap, showError);

Эмуляция не заменяет реального устройства: сенсорные жесты, давление касания и настоящий GPS-уровень различаются.

22. Перехват запросов: Block и Override

Отказ API или тяжёлая картинка могут ронять страницу — воспроизведи это намеренно:

Network → правый клик по запросу → Block request URL — симуляция недоступного ресурса;
правый клик → Override headers — подмена User-Agent и прочих заголовков;
Snippets — временные правки JS без пересборки проекта.

// аналог отказа сети для fetch — должен сработать catch
fetch("/api/data")
  .then(r => r.json())
  .catch(() => showFallback());

Комбинируй Block с Throttling: так ловишь и «кеш-шторм», и «ответил слишком поздно».

23. Performance Insights: долгие задачи и CLS

Панель Performance Insights превращает профайл в рассказ «почему тормозит»:

ищи Long Tasks > 50 мс — каждый мешает клику и скроллу;
TBT падает, если тяжёлую работу вынести из main thread;
при CLS > 0.1 ищи элементы без зарезервированной высоты (картинки, шрифты).

/* предзарезервируй высоту под изображение */
img { aspect-ratio: 16 / 9; width: 100%; }

Прогоняй профайл на throttled CPU (6×) — примерно так живут бюджетные телефоны.

Что дальше

Пройди курс HTML и CSS — на их примере отчётливо видно, как DevTools показывает результат разметки. Дальше — JavaScript: отладка через Sources и Console станет твоим вторым «я».

← Вернуться к курсам