Пост в нельзяграме

1️⃣ Elements — инспектор DOM-дерева и CSS-стилей. Позволяет просматривать HTML-структуру страницы, редактировать стили в реальном времени, проверять Box Model (отступы, границы, размеры).

Элементы: DOM Tree, Styles Pane, Computed, Event Listeners, Accessibility

2️⃣ Console — панель JavaScript для отладки. Отображает ошибки, предупреждения, логи. Позволяет выполнять JS-команды напрямую в браузере для проверки элементов и переменных.

Элементы: Console Output/Input, Filter, Preserve log, Context

3️⃣ Network — мониторинг всех сетевых запросов. Показывает HTTP-запросы к серверу, статус-коды, заголовки, время загрузки ресурсов. Критична для API-тестирования.

Элементы: Request List, Headers, Payload, Response, Timing, Throttling, Preserve log

4️⃣ Sources — отладчик исходного кода. Позволяет ставить точки останова (breakpoints), пошагово выполнять код, отслеживать стек вызовов и значения переменных.

Элементы: File Navigator, Code Editor, Breakpoints, Call Stack, Scope

5️⃣ Application — управление данными браузера. Показывает Cookie, Local/Session Storage, кэш, Service Workers. Необходима для тестирования авторизации и сессий.

Элементы: Storage, Cookies, IndexedDB, Cache, Clear site data

6️⃣ Lighthouse — автоматический аудит качества. Анализирует производительность, доступность (a11y), SEO и best practices. Генерирует отчёт с оценками и рекомендациями.

Элементы: Device toggle, Categories, Score circles, Metrics

7️⃣ Device Mode — эмуляция мобильных устройств. Позволяет тестировать адаптивную вёрстку, тач-события, эмулировать разные разрешения экранов и скорость сети.

Элементы: Device dropdown, Dimensions, Network/CPU throttling, Touch simulation

Зачем:
• Быстрая локализация багов
• Тестирование API без Postman
• Проверка вёрстки и адаптивности
• Отладка JS-ошибок

✍️ Какой вкладкой пользуешься чаще? 👇