Какие вкладки и функции Chrome DevTools наиболее полезны для фронтенд-разработки и отладки?

Chrome DevTools — основной инструмент для отладки веб-приложений. Наиболее полезные вкладки:

1. Elements – инспектор DOM и CSS.

   • Для чего: Просмотр и live-редактирование HTML/CSS, проверка computed styles, эмуляция состояний (:hover, :focus).
   • Пример: Быстро найти, почему flexbox не выравнивает элементы как ожидалось.

2. Console – JavaScript-консоль.

   • Для чего: Логирование (console.log, .warn, .error), выполнение JS-кода в контексте страницы, отладка через debugger.

     // Отладка события клика
     document.querySelector('#submitBtn').addEventListener('click', (e) => {
     console.log('Кликнули!', e.target);
     debugger; // Остановка выполнения для инспекции
     });

3. Network – анализ сетевой активности.

   • Для чего: Мониторинг HTTP-запросов, проверка статусов, заголовков, времени ответа, размера ресурсов. Критично для отладки API-интеграций и оптимизации загрузки.
   • Фильтры: XHR/JS, WS (WebSockets), Media.

4. Sources – отладчик JavaScript.

   • Для чего: Пошаговая отладка (breakpoints), работа с source maps, редактирование файлов.

5. Application – работа с клиентским хранилищем.

   • Для чего: Просмотр и управление LocalStorage, SessionStorage, IndexedDB, Cookies, манифестом PWA.

6. Performance (бывш. Timeline) – профилирование производительности.

   • Для чего: Запись и анализ загрузки страницы, поиск «узких мест» (jank, long tasks).

7. Lighthouse – аудит качества.

   • Для чего: Автоматическая проверка производительности, доступности (a11y), SEO и best practices. Генерирует отчет с рекомендациями.

Совет: Используйте горячие клавиши Ctrl+Shift+I (или Cmd+Opt+I на Mac) и F12 для быстрого открытия.