DevTools -- открытие и обзор панелей

Chrome DevTools — встроенный набор инструментов разработчика, доступный в любом Chromium-браузере для отладки HTML, CSS, JavaScript и анализа производительности.

Зачем нужно

DevTools — главный инструмент фронтенд-разработчика. Без него невозможно отлаживать код, анализировать запросы, исправлять вёрстку. Это первое, что нужно освоить после изучения основ HTML/CSS/JS.

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

  • Ежедневная разработка: отладка кода, проверка вёрстки
  • Анализ производительности загрузки страницы
  • Изучение чужих сайтов и библиотек
  • Мобильное тестирование через эмуляцию устройств

Основной контент

Открытие DevTools

Способ Windows/Linux Mac
Горячая клавиша F12 Cmd+Option+I
Инспекция элемента Ctrl+Shift+C Cmd+Shift+C
Console напрямую Ctrl+Shift+J Cmd+Option+J
Меню браузера ⋮ → Дополнительные инструменты → Инструменты разработчика

Правый клик на любом элементе → Inspect — откроет DevTools с выделенным элементом.

Основные панели

Панель Назначение
Elements DOM-дерево + CSS-стили
Console Логи, выполнение JS
Sources Исходные файлы, отладчик
Network HTTP-запросы
Performance Профилирование производительности
Memory Анализ памяти, утечки
Application localStorage, cookies, SW
Lighthouse Аудит: производительность, SEO, accessibility

Настройка расположения

Три точки (⋮) в тулбаре DevTools → Dock side:

  • Справа от страницы (по умолчанию)
  • Снизу
  • Слева
  • Отдельное окно (Ctrl+Shift+D)

Эмуляция мобильных устройств

Иконка телефона в левом верхнем углу DevTools (или Ctrl+Shift+M) — включает режим Device Emulation:

  • Выбор устройства (iPhone, Pixel, iPad...)
  • Настройка ширины/высоты вручную
  • Симуляция touch-событий
  • Throttling сети и CPU

Command Menu

Ctrl+Shift+P (в DevTools) — Command Palette: быстрый доступ к любой функции без поиска по меню.

> Capture screenshot        — скриншот страницы
> Show Rendering            — открыть панель рендеринга
> Disable JavaScript        — отключить JS
> Clear site data           — очистить все хранилища

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

  • Нужная панель не видна — она скрыта за » справа; перетащи или используй Command Menu
  • DevTools мешает верстке — поставь в режим отдельного окна (Ctrl+Shift+D)
  • Изменения в DevTools не сохраняются — они временные; нужно переносить в реальный код

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

Ресурсы