Обзор Chrome DevTools

Встроенные инструменты разработчика в Chrome для инспекции, отладки и профилирования веб-страниц

Зачем нужно

  • Инспектировать и менять HTML/CSS в реальном времени
  • Отлаживать JavaScript
  • Анализировать производительность
  • Тестировать адаптивность (responsive design)

Где используется

  • Ежедневная веб-разработка
  • Отладка багов в браузере
  • Оптимизация производительности
  • Тестирование на разных устройствах

Предпосылки

  • Базовый HTML и CSS

Открытие DevTools

Способ Windows/Linux macOS
Горячая клавиша F12 или Ctrl+Shift+I Cmd+Option+I
Правый клик "Просмотреть код" "Просмотреть код"
Меню Menu → More Tools → Developer Tools
Inspect элемент Ctrl+Shift+C Cmd+Shift+C
Консоль Ctrl+Shift+J Cmd+Option+J

Панели DevTools

Панель Назначение
Elements Инспекция и редактирование HTML/CSS
Console Выполнение JavaScript, просмотр логов
Sources Отладка JavaScript (breakpoints)
Network Сетевые запросы (XHR, Fetch, ресурсы)
Performance Профилирование производительности
Memory Анализ использования памяти
Application LocalStorage, Cookies, Service Workers
Lighthouse Аудит производительности и доступности

Device Mode (адаптивное тестирование)

Кнопка устройства в левом верхнем углу DevTools или Ctrl+Shift+M:

Возможности

  • Эмуляция экранов мобильных устройств
  • Выбор готовых устройств (iPhone, iPad, Pixel)
  • Произвольный размер viewport
  • Эмуляция touch-событий
  • Throttling сети и CPU

Популярные breakpoints

Mobile:   320px — 480px
Tablet:   768px — 1024px
Desktop:  1280px+

Практический workflow

  1. Открыть Device Mode
  2. Выбрать устройство или задать размер
  3. Проверить вёрстку
  4. Включить "Show media queries" — видно breakpoints
  5. Протестировать ориентацию (портрет/ландшафт)

Расположение DevTools

Кнопка "..." в DevTools → Dock side:

  • Снизу — по умолчанию
  • Справа — удобно для адаптивного тестирования
  • Слева — редко используется
  • Отдельное окно — для двух мониторов

Command Menu

Ctrl+Shift+P (внутри DevTools) — аналог Command Palette в VS Code:

> Screenshot     — скриншот страницы/элемента
> Theme          — переключить тёмную/светлую тему
> Disable cache  — отключить кэш
> Sensors        — эмуляция GPS, акселерометра
> Coverage       — неиспользуемый CSS/JS

Полезные скриншоты

  • Capture full size screenshot — вся страница целиком (включая scroll)
  • Capture node screenshot — скриншот выбранного элемента
  • Capture area screenshot — выделить область

Полезные настройки

DevTools → Settings (F1):

✅ Show rulers on hover — линейки при наведении
✅ Show user agent shadow DOM — теневой DOM
✅ Auto-open DevTools for popups — DevTools для попапов
✅ Enable CSS source maps — маппинг CSS
✅ Enable JavaScript source maps — маппинг JS

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

  • Не знать про Device Mode — тестировать адаптивность только ресайзом окна
  • Забывать про кэш — изменения не видны из-за кэша. Решение: Settings → "Disable cache" (работает только с открытым DevTools)
  • Не знать Command Menu — искать функции через меню вместо Ctrl+Shift+P
  • Редактировать код в Elements — изменения не сохраняются, они временные

Практика

  1. Откройте DevTools на любом сайте через F12
  2. Попробуйте все панели — переключитесь между ними
  3. Включите Device Mode и протестируйте сайт на iPhone 14
  4. Используйте Command Menu для полного скриншота страницы
  5. Попробуйте разные расположения DevTools (снизу, справа, окно)

Связанные темы

Ресурсы