Chrome DevTools: руководство для веб-разработчика

Что такое DevTools и как открыть

Chrome DevTools — инструменты разработчика, встроенные в Chrome и другие браузеры на Chromium. Открываются клавишей F12, сочетанием Ctrl+Shift+I (на macOS — Cmd+Option+I) или через правый клик и пункт «Просмотреть код».

Полезно сразу запомнить командное меню: Ctrl+Shift+P (Cmd+Shift+P). Через него можно найти любую функцию по названию — сделать скриншот, отключить JavaScript, сменить тему.

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

Elements: вёрстка и стили

Показывает живой DOM и применённые CSS-правила.

Сценарий: кнопка «уехала» вправо.

1. Выберите элемент инструментом инспектора (иконка со стрелкой или Ctrl+Shift+C).
2. В блоке Styles посмотрите, какие правила применены, а какие зачёркнуты — значит, их перебило более специфичное правило.
3. Во вкладке Computed проверьте итоговые margin, width и display.
4. Для flex- и grid-контейнеров включите оверлей по значку рядом с элементом — линии сетки станут видны прямо на странице.

Правки в Styles действуют только до перезагрузки — это удобно для экспериментов.

Console: ошибки и быстрые проверки

Здесь видны ошибки JavaScript, предупреждения и ваши console.log.

Сценарий: форма не отправляется.

• Найдите красную ошибку и кликните по ссылке справа — откроется строка в исходнике.
• Выберите элемент в Elements, затем введите в консоли $0 — получите ссылку на него.
• console.table(array) удобно показывает массивы объектов.
• Фильтр уровней (Errors, Warnings) убирает шум.

Network: запросы к серверу

Показывает каждый запрос: статус, размер, время, заголовки и тело ответа.

Сценарий: данные не появляются на странице.

1. Откройте Network и обновите страницу.
2. Отфильтруйте Fetch/XHR.
3. Найдите нужный запрос и посмотрите статус: 4xx — проблема в запросе или правах, 5xx — на сервере.
4. Во вкладке Payload проверьте, что отправлено, в Response — что пришло.
5. Ошибка CORS отображается в Console, а сам запрос в Network будет помечен как неудачный.

Полезные опции: Disable cache — чтобы видеть страницу как новый посетитель, Throttling — чтобы эмулировать медленную сеть. Правый клик по запросу и Copy as cURL позволяет повторить его из терминала.

Performance: почему тормозит

Записывает всё, что делает браузер: выполнение скриптов, layout, paint.

Сценарий: прокрутка дёргается.

1. Нажмите запись, воспроизведите проблему, остановите.
2. На дорожке Main ищите длинные задачи — они помечаются красным уголком.
3. Кликните по задаче: в Bottom-Up или Call Tree видно, какая функция заняла больше всего времени.
4. Фиолетовые блоки Layout подряд после скрипта — признак layout thrashing.

Для честных замеров включите CPU throttling: на мощном ноутбуке проблемы слабых телефонов не видны.

Application: хранилища и кэш

Показывает cookies, localStorage, sessionStorage, IndexedDB, Service Workers и Cache Storage.

Сценарий: пользователь «залогинен», хотя должен был выйти.

• В разделе Cookies проверьте, удалилась ли сессионная cookie, и посмотрите её флаги HttpOnly, Secure, SameSite и срок жизни.
• В Local Storage проверьте, не остался ли там токен.
• Кнопка Clear site data в разделе Storage сбрасывает всё для текущего сайта.
• В Service Workers можно отключить старый воркер, который отдаёт закэшированную версию.

Lighthouse: автоматический аудит

Проверяет производительность, доступность, лучшие практики и SEO.

Сценарий: нужно понять, с чего начать оптимизацию.

• Запускайте в окне инкогнито, чтобы расширения не искажали результат.
• Смотрите не только на итоговый балл, а на раздел Diagnostics и конкретные рекомендации.
• Сравнивайте отчёты до и после изменений в одинаковых условиях.

Lighthouse — лабораторный замер. Реальный опыт пользователей может отличаться, поэтому смотрите и полевые данные, если они доступны. Полный список возможностей — в официальной документации.

Частые ошибки

• Чинить стили в Elements и забыть перенести правки в код.
• Измерять скорость с включённым кэшем и на быстром интернете.
• Игнорировать предупреждения в Console, пока они не станут ошибками.
• Оценивать сайт только по баллу Lighthouse без разбора причин.