Какие возможности предоставляет DevTools для тестирования веб-приложений?

Question

DevTools позволяет инспектировать DOM, стили, сетевые запросы, ошибки, performance, симулировать устройства, тестировать JS, отлаживать и профилировать веб-приложения прямо в браузере.

YeaHub · Accepted Answer

Основные вкладки DevTools:Elements:Просмотр и изменение DOMИнтерактивное редактирование стилейConsole:Вывод ошибок и логовВвод JS-кодаNetwork:Анализ HTTP-запросовЗаголовки, коды ответа, тело, таймингPerformance:Замер времени загрузки и рендерингаПоиск bottleneck'овApplication:Хранилища: LocalStorage, cookies, IndexedDBРабота с сервис-воркерами и push-уведомлениямиDevice Emulation:Переключение на iPhone/PixelСимуляция touch, throttle сети и CPUAccessibility, Lighthouse:Проверка доступностиОценка производительности и SEOПример:Открыть DevTools → F12 → Network → посмотреть XHR или fetch запросSimulate: Slow 3G → проверить загрузку