Chrome DevTools — это встроенный в браузер набор инструментов для веб-разработки и отладки.
Основные панели:
- Elements: Просмотр и рефакторинг HTML-структуры страницы и стилей CSS в реальном времени.
- Console: Вывод логов, выполнение JavaScript-кода, отладка.
- Sources: Отладка JavaScript-кода с помощью точек останова, профилирование производительности.
- Network: Мониторинг сетевых запросов (HTTP/HTTPS), анализ их времени выполнения и содержимого.
- Performance: Анализ производительности загрузки и выполнения кода страницы.
- Memory: Профилирование использования памяти, выявление утечек.
- Application: Исследование ресурсов приложения — хранилище (Local Storage, Session Storage, IndexedDB), куки, кэш.
- Security: Анализ безопасности страницы, включая проверку сертификатов SSL.
- Lighthouse: Аудит веб-страницы по критериям производительности, доступности, SEO и передовым практикам.
Использование в QA:
- Проверка UI/UX: Анализ стилей (Elements), адаптивности (Toggle device toolbar).
- Отладка фронтенда: Выявление ошибок в JavaScript (Console, Sources).
- Анализ API-взаимодействий: Мониторинг запросов и ответов (Network).
- Проверка производительности: Оценка времени загрузки и выполнения скриптов (Performance).
- Исследование хранилищ: Проверка Local Storage, куки и т.д. (Application).
- Симуляция устройств: Тестирование на разных размерах экрана и сетевых условиях (Network – Throttling).