DevTools: инспектор, сеть, консоль

DevTools - это рентген для веб-страницы. Открыл - и видишь, что происходит под капотом: HTML-структура, CSS-стили, HTTP-запросы, ошибки JavaScript.

Как открыть: F12, Ctrl+Shift+I (Windows/Linux) или Cmd+Option+I (macOS). Правый клик → «Посмотреть код» открывает сразу на нужном элементе.

Elements (Инспектор)

Показывает живое DOM-дерево страницы и CSS-стили каждого элемента.

Что можно делать:

Смотреть HTML - вся структура страницы как дерево, раскрывай/сворачивай теги
Смотреть CSS - какие правила применились, из какого файла, какие перечёркнуты (перебиты более специфичным правилом)
Редактировать на лету - двойной клик по тексту или значению CSS → меняешь. Изменения видны сразу, но при перезагрузке сбросятся
Box Model - внизу панели стилей видна визуальная схема margin/border/padding/content
Computed - итоговые значения всех свойств после каскада

Типичный workflow:
1. Правый клик на элемент → «Посмотреть код»
2. Элемент подсвечен в Elements
3. Справа видишь все CSS правила
4. Меняешь значение → смотришь результат
5. Когда нашёл нужный стиль - переносишь в файл

`Ctrl+F` в панели Elements ищет по HTML-тегам, атрибутам и тексту. Можно искать по CSS-селектору - например, `.card` найдёт все элементы с этим классом.

Console (Консоль)

Консоль - REPL для JavaScript. Можешь писать код и сразу видеть результат.

// Базовый вывод
console.log('привет');           // текст
console.log({name: 'Иван'});    // объект (раскрываемый)

// Таблица - удобно для массивов объектов
console.table([
  {id: 1, name: 'Иван', role: 'Backend'},
  {id: 2, name: 'Анна', role: 'Frontend'}
]);

// Уровни логирования
console.warn('Внимание!');       // жёлтый
console.error('Ошибка!');        // красный
console.info('Инфо');            // синий (не во всех браузерах)

// Группировка
console.group('Данные пользователя');
console.log('Имя: Иван');
console.log('Роль: Backend');
console.groupEnd();

// Замер времени
console.time('загрузка');
// ...какой-то код...
console.timeEnd('загрузка');     // загрузка: 42.5ms

Полезные команды в консоли:

// Найти элемент (как document.querySelector)
$('.card')              // первый элемент с классом card
$('.card')             // все элементы (массив)

// Последний выбранный элемент в Elements
$0                      // текущий выбранный элемент
$0.style.background = 'red';  // покрасить его

// Очистить консоль
clear()

Убирай `console.log` перед деплоем. В продакшне используй логгер (Sentry, LogRocket) или условный вывод. Линтер (ESLint с правилом `no-console`) предупредит.

Network (Сеть)

Показывает все HTTP-запросы страницы: HTML, CSS, JS, изображения, API-вызовы, шрифты.

Что видишь для каждого запроса:
- Name - URL запроса
- Status - HTTP статус (200, 404, 500...)
- Type - тип ресурса (document, script, xhr, fetch...)
- Size - размер ответа
- Time - время загрузки

Фильтры вверху позволяют показать только определённый тип: XHR/Fetch (API-запросы), JS, CSS, Img.

Детали запроса

Клик по запросу открывает детали:

Headers - заголовки запроса и ответа (Content-Type, Authorization, CORS)
Preview - предпросмотр ответа (JSON красиво отформатирован)
Response - сырой ответ
Timing - водопадная диаграмма (DNS, TCP, TLS, ожидание сервера, скачивание)

Типичные проблемы, которые видно в Network

404 Not Found - неправильный URL запроса
CORS error - сервер не разрешает запросы с этого домена
401 Unauthorized - забыл токен или он протух
500 Server Error - баг на бэкенде
(canceled) - запрос отменён (навигация, abort controller)

Включи «Preserve log» в Network, чтобы запросы не очищались при навигации. Полезно при отладке редиректов и форм.

Application (Приложение)

Показывает данные, которые браузер хранит для сайта:

localStorage - ключ-значение, сохраняется между сессиями
sessionStorage - ключ-значение, очищается при закрытии вкладки
Cookies - видишь все куки домена, можешь удалять и редактировать
Service Workers - если PWA, здесь их регистрация

Performance (Производительность)

Записывает timeline: что и сколько заняло при загрузке страницы.

Ключевые метрики:

FCP (First Contentful Paint) - когда появился первый контент
LCP (Largest Contentful Paint) - когда появился самый большой элемент
CLS (Cumulative Layout Shift) - сдвиги макета (раздражает пользователей)

Режим мобильного устройства

Ctrl+Shift+M (Chrome) - переключает эмуляцию мобильного устройства:

выбираешь устройство (iPhone, Pixel, iPad)
видишь как выглядит сайт на этом экране
можешь симулировать touch-события
можешь замедлить сеть (Slow 3G) для тестирования

Горячие клавиши

F12 / Ctrl+Shift+I - открыть DevTools
Ctrl+Shift+J - открыть сразу Console
Ctrl+Shift+C - режим выбора элемента (клик на странице)
Ctrl+Shift+M - переключить мобильный режим
Ctrl+L - очистить консоль
Esc - показать/скрыть Console внизу другой панели

Мини-задание

Открой DevTools → Elements и измени цвет заголовка прямо в браузере
Найди в Network любой API-запрос (XHR/Fetch) и посмотри его заголовки и ответ
Выполни console.table() в консоли с массивом объектов
Включи мобильный режим и посмотри как выглядит страница на iPhone
Найди в Application → localStorage данные текущего сайта