Какие основные вкладки есть в консоли разработчика браузера (Chrome DevTools) и для чего они используются?

Консоль разработчика (Chrome DevTools) содержит набор вкладок для отладки и анализа веб-приложений.

Основные вкладки и их назначение:

1. Elements (Элементы)

   • Для чего: Инспектирование и редактирование DOM-дерева и CSS-стилей в реальном времени.
   • Пример использования: Найти селектор элемента или отладить проблему с вёрсткой.

2. Console (Консоль)

   • Для чего: Вывод логов (console.log, console.error), выполнение JavaScript-кода, просмотр ошибок выполнения.
   • Пример:

     // Вывод в консоль
     console.log('Current user:', window.currentUser);
     // Быстрая проверка элемента
     document.querySelector('button.submit').click();

3. Sources (Источники)

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

4. Network (Сеть)

   • Для чего: Мониторинг всех сетевых запросов (XHR, Fetch, документы, стили, скрипты). Анализ заголовков, тела запроса/ответа, времени загрузки и статус-кодов.
   • Ключево: Для проверки работы API и оптимизации загрузки ресурсов.

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

   • Для чего: Запись и анализ производительности загрузки страницы и выполнения скриптов для поиска узких мест.

6. Memory (Память)

   • Для чего: Профилирование использования памяти, поиск утечек (memory leaks) в JavaScript.

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

   • Для чего: Работа с клиентским хранилищем: просмотр и редактирование Local Storage, Session Storage, Cookies, IndexedDB. Управление кэшем (Cache Storage) и манифестом веб-приложения (PWA).

8. Security (Безопасность)

   • Для чего: Проверка SSL-сертификатов, информации о безопасном соединении (HTTPS).

9. Lighthouse

   • Для чего: Автоматический аудит производительности, доступности, SEO и лучших практик (PWA) веб-страницы с выдачей отчёта и рекомендаций.