Открыть F12, посмотреть ошибку в консоли, закрыть — знакомо? Так DevTools используют большинство. Но за привычными вкладками прячется целый арсенал, который экономит часы работы. Пройдёмся по каждой вкладке и вытащим из неё всё полезное.

Elements: не только «посмотреть HTML»

Вкладка Elements — это не просто дерево разметки. Вот что умеют мало кто знает:

Принудительные состояния элементов. Кликните правой кнопкой на элемент → Force state → выберите :hover, :focus, :active или :visited. Теперь не нужно удерживать курсор над кнопкой, чтобы посмотреть hover-стиль — он зафиксирован.

Скриншот конкретного узла. Правая кнопка на элементе → Capture node screenshot. Получаете PNG именно этого блока — удобно для передачи в задачу или сравнения вёрстки.

Поиск по атрибутам. Ctrl+F в панели Elements ищет не только по тегам, но и по классам, id, атрибутам и даже содержимому. Можно найти data-testid="submit-btn" быстрее, чем в коде.

CSS-анимации в реальном времени. В правой панели Styles есть иконка с тремя точками → More tools → Animations. Открывается отдельная панель, где можно замедлить анимации в 10 раз или поставить на паузу — незаменимо при отладке переходов.

Console: больше чем console.log

Консоль умеет намного больше, чем выводить строки.

$0, $1, $2 — переменные, которые хранят последние выбранные в Elements элементы. Выбрали div — в консоли $0 это он. Удобно вызывать методы: $0.getBoundingClientRect().

$() и $$() — встроенные сокращения для querySelector и querySelectorAll. Прямо в консоли: $$('.card') вернёт массив всех карточек.

copy() — копирует любое значение в буфер. copy(performance.timing) — и у вас в буфере JSON с тайм-стемпами загрузки страницы.

console.table() — вместо console.log для массивов объектов. Если у вас массив из 50 пользователей, console.table(users) рендерит нормальную таблицу с колонками.

console.time() / console.timeEnd() — примитивный, но быстрый способ замерить кусок кода:

console.time('fetch');
await fetch('/api/data');
console.timeEnd('fetch');
// fetch: 234ms

Live Expressions. Кнопка с глазом над консолью позволяет закрепить выражение, которое обновляется в реальном времени. Например, document.activeElement — и вы всегда видите, какой элемент сейчас в фокусе.

Network: разобраться с тем, что летит по сети

Вкладка Network — главный инструмент для оптимизации и отладки запросов.

Фильтры типов. Кнопки Fetch/XHR, JS, CSS, Img, Media, Font, Doc, WS — включайте нужный тип. При отладке API оставляйте только Fetch/XHR, чтобы не тонуть в статике.

Инициатор запроса. Колонка Initiator показывает, какой файл и строка кода вызвали запрос. Клик по ссылке — и вы в источнике. Больше не надо гадать, откуда полетел лишний запрос.

Waterfall детально. Кликните на любой запрос → вкладка Timing. Там разбивка: DNS lookup, TCP connect, TLS handshake, TTFB, Content Download. Если TTFB больше 500ms — проблема на сервере. Если Content Download тормозит — ресурс слишком тяжёлый.

Throttling сети. Выпадашка «No throttling» позволяет эмулировать медленные соединения. Есть пресеты (Fast 3G, Slow 3G) или можно задать своё. Так проверяют, как сайт ведёт себя на плохом мобильном интернете.

Replay XHR. Правая кнопка на запросе → Replay XHR. Повторяет запрос без перезагрузки страницы. Удобно при тестировании API.

Сохранение HAR. Иконка со стрелкой вниз экспортирует всю сессию сетевых запросов в HAR-файл. Его можно передать коллеге или загрузить в HAR Analyzer для анализа.

Performance: находим тормоза

Эта вкладка пугает с первого взгляда — много цветных полосок. Но разобраться несложно.

Нажмите Record, воспроизведите проблемное действие, нажмите Stop. Получаете флеймграф с трассой выполнения.

На что смотреть в первую очередь:

  • Красные треугольники на кадрах — здесь были долгие задачи (Long Tasks), больше 50ms. Именно они вызывают ощущение «лагов».
  • Раздел Main показывает стек вызовов JS. Широкие блоки — долгие функции.
  • Rendering и Painting — тут видно, когда браузер перерисовывает страницу. Если paint происходит слишком часто или занимает много — ищите причину в CSS-анимациях или частых изменениях DOM.

Tip: Включите флаг «Screenshots» перед записью. Тогда в таймлайне будут превью экрана на каждый момент — легче понять, что происходило в интерфейсе.

Lighthouse: аудит одной кнопкой

Lighthouse встроен в DevTools и даёт оценку по пяти критериям: Performance, Accessibility, Best Practices, SEO, PWA.

После анализа он выдаёт конкретные рекомендации с объяснением и ссылками на документацию. Например:

  • «Eliminate render-blocking resources» — JavaScript или CSS блокирует рендер, нужно добавить defer или async.
  • «Serve images in next-gen formats» — JPG вместо WebP/AVIF увеличивает объём без выигрыша в качестве.
  • «Reduce unused JavaScript» — в бандл попал код, который не используется на этой странице.

Важный момент: запускайте Lighthouse в режиме инкогнито и с отключёнными расширениями. Блокировщики рекламы и менеджеры паролей могут исказить метрики.

Application: куки, хранилище, кеш

Здесь всё, что браузер хранит для вашего сайта.

Storage. LocalStorage, SessionStorage, IndexedDB, Cookies — всё редактируется прямо в интерфейсе. Не нужно писать localStorage.setItem() в консоли — кликнул, изменил значение, нажал Enter.

Clear storage. Кнопка «Clear site data» сбрасывает сразу всё: куки, кеш, хранилище, сервис-воркеры. Один клик вместо поочерёдной чистки каждого раздела.

Service Workers. Если ваш сайт использует SW — здесь можно посмотреть его статус, обновить вручную или обойти (Bypass for network). Незаменимо при отладке PWA.

Cache Storage. Показывает, что закешировал сервис-воркер. Можно удалить конкретные записи или весь кеш.

Sources: отладка кода

Вкладка Sources — полноценный отладчик.

Breakpoints. Клик на номер строки в исходнике — и код остановится на этом месте при выполнении. В панели справа видны все переменные в текущем скоупе.

Conditional breakpoints. Правая кнопка на номере строки → Add conditional breakpoint. Код остановится только если условие истинно. Например, user.id === 42 — останавливаемся только на конкретном пользователе в цикле.

Logpoints. Альтернатива console.log без изменения кода. Правая кнопка → Add logpoint. Вводите выражение — оно печатается в консоль при каждом проходе через эту строку.

Snippets. В левой панели Sources есть раздел Snippets — место для постоянных скриптов. Сохраните туда код, который часто запускаете на разных сайтах. Запуск — Ctrl+Enter.

Overrides. Sources → Overrides позволяет локально перезаписать любой файл с сервера. Можно редактировать JS или CSS продакшн-сайта локально — изменения сохраняются между обновлениями страницы. Полезно для быстрых экспериментов без деплоя.

Memory: охота на утечки

Если страница со временем потребляет всё больше памяти — здесь ищем причину.

Heap snapshot — снимок кучи в конкретный момент. Делаем снимок до проблемного действия и после, сравниваем — видим, что накопилось.

Allocation instrumentation — запись аллокаций в реальном времени. Жёлтые полосы на таймлайне — объекты, которые не были собраны сборщиком мусора.

Чаще всего утечки памяти — это:

  • Подписки на события (addEventListener), которые не удаляются при размонтировании компонента.
  • Замыкания, держащие ссылку на большой объект.
  • Таймеры (setInterval), которые продолжают работать после удаления элемента.

Shortcut-шпаргалка

Несколько горячих клавиш, которые экономят время:

  • Ctrl+Shift+P — палитра команд (как в VS Code). Вбейте «screenshot», «coverage», «sensors» — быстрый доступ к любой функции.
  • Ctrl+[ / Ctrl+] — переключение между вкладками DevTools.
  • Esc — открыть/закрыть Drawer (нижнюю панель) с Console в любой вкладке.
  • Ctrl+L — очистить консоль.
  • F8 — пауза/продолжение при отладке.
  • F10 — шаг через строку, F11 — шаг внутрь функции.

Coverage: находим мёртвый код

Мало кто знает про вкладку Coverage (Ctrl+Shift+P → Coverage). Она показывает, сколько процентов каждого JS и CSS файла реально выполнилось на странице.

Красный — неиспользованный код, зелёный — выполненный. Если у вас bootstrap.min.css загружен полностью, а используется 8% — повод задуматься о критическом CSS или загрузке только нужных компонентов.

Как это применять на практике

Несколько сценариев из реальной работы:

Страница медленно грузится. Network → смотрим Waterfall. Если TTFB большой — проблема на сервере. Если много последовательных запросов — нужна параллелизация или HTTP/2. Если тяжёлые картинки — сжать и конвертировать в WebP.

Кнопка не срабатывает. Elements → Force state :active, проверяем z-index. Или в консоли $('button').onclick — проверяем, привязан ли обработчик. Sources → ставим breakpoint на click-handler.

Верстка плывёт на мобилке. Переключаемся в режим Device Toolbar (Ctrl+Shift+M), выбираем устройство или задаём ширину вручную. Если проблема не воспроизводится — проверяем meta viewport в Elements.

API возвращает неожиданный ответ. Network → находим запрос → вкладка Preview (для JSON) или Response (для сырого текста). Смотрим заголовки запроса и ответа во вкладках Headers. Если нужно воспроизвести — Replay XHR или Copy as cURL → вставить в Postman.

В веб-студии REEXY при разработке корпоративных сайтов (от 15 000 ₽) и интернет-магазинов (от 10 000 ₽) DevTools используются на каждом этапе — от проверки вёрстки в кросс-браузерном режиме до финального Lighthouse-аудита перед сдачей проекта. Это не опциональный этап, а часть процесса.

Расширения, которые дополняют DevTools

Сам по себе DevTools мощный, но несколько расширений добавляют полезные вкладки:

  • React Developer Tools — дерево компонентов, пропсы, стейт. Аналоги есть для Vue и Angular.
  • Redux DevTools — история экшенов, путешествие во времени по стейту.
  • axe DevTools — аудит доступности (a11y) глубже, чем встроенный Lighthouse.
  • JSON Formatter — подсвечивает JSON в Network/Response без копирования в редактор.

Что часто упускают даже опытные разработчики

Несколько вещей, которые реально удивляют людей с опытом:

Sensors. Ctrl+Shift+P → Sensors. Можно эмулировать геолокацию (любые координаты), ориентацию устройства и нажатие клавиш. Удобно тестировать карты или компасы без реального устройства.

Rendering panel. Ctrl+Shift+P → Rendering. Здесь включается подсветка перерисовок (Paint flashing) — мигающие зелёные прямоугольники показывают, что браузер перерисовывает. Если мигает всё при скролле — что-то триггерит лишние paint.

Изменение User-Agent. В том же Rendering или Network Conditions можно переключить User-Agent на любой браузер или устройство. Полезно, если сайт ведёт себя по-разному для разных агентов.

Drag and drop в Elements. Узлы в дереве HTML можно перетаскивать мышью. Быстро переставить блоки для эксперимента — без редактирования файла.

DevTools — это инструмент, который растёт вместе с вами. Начинаешь с console.log, через год осознаёшь, что breakpoints быстрее, ещё через год — что Coverage и Memory-профилировщик экономят дни работы. Стоит потратить пару часов на знакомство с незнакомыми вкладками — окупится на следующем же проекте.