Chrome DevTools для QA | QArtel
tools
Chrome DevTools для QA
id: 08-01
Категория: Инструменты тестировщика
Chrome DevTools — встроенный набор инструментов разработчика в Google Chrome, который является незаменимым помощником для QA-инженера. DevTools позволяют анализировать сетевые запросы, проверять DOM-структуру, отлаживать JavaScript, эмулировать мобильные устройства и многое другое.
1. Открытие DevTools
Способ Горячая клавиша Windows / Linux F12 или Ctrl + Shift + ImacOS Cmd + Option + IЧерез меню Chrome → Дополнительные инструменты → Инструменты разработчика Инспектор элемента
ПКМ на элементе → «Просмотреть код»
2. Вкладка Network (Сеть) Вкладка Network — одна из самых важных для тестировщика. Она показывает все HTTP-запросы, которые страница делает при загрузке и взаимодействии с пользователем.
Что можно проверять
Статус-коды ответов — ищем ошибки 4xx (клиентские) и 5xx (серверные)Время ответа — выявление медленных запросовТело запроса и ответа — проверка отправляемых и получаемых данныхЗаголовки (Headers) — Content-Type, авторизация, CORSПараметры запроса — query string, POST-параметры
Основные возможности Функция Описание Фильтрация Фильтр по типу: XHR, JS, CSS, Img, Media, Font, Doc, WS Поиск Поиск по URL, содержимому запросов и ответов Preserve log Сохранять лог при переходе между страницами Disable cache Отключение кеширования (имитация первого посещения) Throttling Эмуляция медленной сети (3G, Slow 4G, offline) Повтор запроса ПКМ → Replay XHR — повторная отправка запроса Копирование как cURL ПКМ → Copy → Copy as cURL — для воспроизведения в терминале
Практический сценарий для QA
Откройте вкладку Network
Включите Preserve log
Выполните действие на сайте (отправка формы, авторизация)
Найдите нужный запрос (фильтр XHR / Fetch)
Проверьте статус-код, тело запроса и ответ
Убедитесь, что в ответе нет лишних данных (утечка информации)
Проверьте корректность заголовков безопасности
Типичные баги, которые ловит Network tab
API возвращает 200, но с текстом ошибки в теле
Отсутствующие или неправильные CORS-заголовки
Повторные (дублирующиеся) запросы
Запросы уходят на неправильный endpoint
Утечка токенов/паролей в URL (query string)
3. Вкладка Elements (Элементы) Позволяет просматривать и редактировать DOM-дерево и CSS-стили страницы в реальном времени.
Возможности
Просмотр HTML-структуры — навигация по DOM-деревуРедактирование HTML — двойной клик по элементу → изменение тега, атрибутов, содержимогоПросмотр и изменение CSS — изменение свойств, добавление новых, отключение существующихПросмотр computed-стилей — итоговые вычисленные стили с учётом наследования и каскадаBox Model — визуализация margin, border, padding, content
Что проверять через Elements Проверка Как Наличие элемента Поиск по селектору (Ctrl + F в Elements) Видимость элемента Проверка display, visibility, opacity, hidden Размеры элемента Box Model внизу панели Состояние элемента ПКМ → Force state → :hover, :focus, :active, :disabled Доступность (a11y) Панель Accessibility в правой части Атрибуты Проверка data-*, aria-*, alt, title
Сценарий для QA
Найдите элемент, который не отображается
Проверьте CSS: display: none? visibility: hidden? opacity: 0?
Проверьте computed-стили — возможно, стили перезаписаны из другого источника
Проверьте размеры — элемент может быть за пределами viewport
Проверьте z-index — элемент может быть перекрыт другим
4. Вкладка Console (Консоль) Консоль показывает JavaScript-ошибки, предупреждения и позволяет выполнять произвольный JS-код.
Что выводится в консоли Тип Значение 🔴 Error Критические ошибки JS — сломанный функционал 🟡 Warning Предупреждения — потенциальные проблемы 🔵 Info Информационные сообщения ⚪ Log Отладочные сообщения разработчиков
Полезные команды в консоли // Найти элемент по селектору
document.querySelector('.my-class')
// Найти все элементы
document.querySelectorAll('button')
// Проверить, виден ли элемент
document.querySelector('#modal').offsetHeight > 0
// Получить значение cookie
document.cookie
// Проверить localStorage
localStorage.getItem('token')
// Очистить консоль
clear()
// Мониторинг событий
monitorEvents(document.querySelector('button'), 'click')
// Проверка производительности
performance.now()
Что проверять
JavaScript-ошибки, которые ломают функциональность
Необработанные промисы (Unhandled Promise Rejection)
Депрекейшн-предупреждения
XSS-уязвимости (внедрение скриптов)
Проверка состояния через JavaScript
5. Вкладка Application (Приложение) Показывает данные, хранящиеся в браузере: cookies, localStorage, sessionStorage, IndexedDB, Service Workers, кеш.
Хранилища данных Хранилище Описание Типичные проверки Cookies Куки для текущего домена HttpOnly, Secure, SameSite, срок годности Local Storage Локальное хранилище (до 5–10 МБ) Токены авторизации, настройки пользователя Session Storage Хранилище на сессию Временные данные, состояние форм IndexedDB NoSQL-база в браузере Данные PWA, офлайн-кеш Cache Storage Кеш Service Workers Офлайн-ресурсы
Практические проверки
Авторизация — проверить, что токен сохраняется в cookie (HttpOnly) или localStorageВыход из аккаунта — убедиться, что данные очищаются (cookies, localStorage, sessionStorage)Конфиденциальность — нет ли паролей или номеров карт в localStorage в открытом видеСрок жизни cookie — проверить expires/max-ageService Workers — проверить, корректно ли работает офлайн-режим
6. Вкладка Performance (Производительность) Позволяет записывать и анализировать производительность страницы.
Как использовать
Откройте вкладку Performance
Нажмите кнопку записи (круг) или Ctrl + E
Выполните действия на странице
Остановите запись
Анализируйте результат
Что смотреть Метрика Описание Норма FPS Кадры в секунду ≥ 30 fps (≥ 60 идеально) CPU Загрузка процессора Чем ниже, тем лучше Network Сетевые запросы Время загрузки ресурсов Main thread Основной поток Длинные задачи (> 50 мс) — проблема LCP Largest Content Paint < 2.5 с FID First Input Delay < 100 мс CLS Cumulative Layout Shift < 0.1
Типичные проблемы
Долгий рендеринг из-за тяжёлых скриптов
Layout shifts (прыжки элементов при загрузке)
Blocking-ресурсы, которые задерживают отрисовку
Утечки памяти при длительном использовании
7. Эмуляция устройств (Device Emulation) Позволяет тестировать адаптивность и мобильную версию сайта без реального устройства.
Как включить
Нажмите Ctrl + Shift + M (или иконку телефона/планшента в левой верхней части DevTools)
Выберите устройство из выпадающего списка
Настраиваемые параметры Параметр Описание Разрешение экрана Ширина × высота (например, 375 × 812 для iPhone X) DPR (Device Pixel Ratio) Плотность пикселей (1x, 2x, 3x) User Agent Строка User-Agent (имитация браузера/ОС) Touch emulation Эмуляция touch-событий вместо мыши Throttling Эмуляция медленного CPU и сети Ориентация Портретная / альбомная
Популярные устройства для тестирования Устройство Разрешение DPR iPhone SE 375 × 667 2 iPhone 14 Pro 393 × 852 3 iPhone 14 Pro Max 430 × 932 3 Samsung Galaxy S23 360 × 780 3 iPad Air 820 × 1180 2 iPad Mini 768 × 1024 2 Pixel 7 412 × 915 2.625
Что проверять
Вёрстка не ломается на разных разрешениях
Кнопки и ссылки достаточно крупные для нажатия пальцем (≥ 44 × 44 px)
Нет горизонтальной прокрутки
Touch-события работают корректно
Медиа-запросы (media queries) срабатывают правильно
8. Допол��ительные полезные инструменты
Вкладка Lighthouse
Автоматический аудит: производительность, доступность, SEO, PWA
Генерирует отчёт с рекомендациями
Запуск: вкладка Lighthouse → Generate report
Вкладка Accessibility
Проверка дерева доступности
Контрастность цветов
ARIA-атрибуты
Вкладка Security
Проверка SSL/TLS сертификатов
Смешанный контент (HTTP на HTTPS-странице)
Вкладка Memory
Профилирование памяти
Поиск утечек памяти
9. Горячие клавиши DevTools Действие Windows/Linux macOS Открыть DevTools F12 / Ctrl+Shift+ICmd+Option+IОткрыть Console Ctrl+Shift+JCmd+Option+JОткрыть Elements Ctrl+Shift+CCmd+Option+CToggle Device Mode Ctrl+Shift+MCmd+Shift+MПоиск в Elements Ctrl+FCmd+FПоиск по файлам Ctrl+Shift+FCmd+Shift+FБыстрый поиск команд Ctrl+Shift+PCmd+Shift+PПерезагрузка страницы F5 / Ctrl+RCmd+RЖёсткая перезагрузка Ctrl+Shift+RCmd+Shift+RПереключение вкладок DevTools Ctrl+] / Ctrl+[Cmd+] / Cmd+[
10. Чеклист для QA-тестирования с DevTools
Перед каждым тестом:
Функциональное тестирование:
Безопасность:
Адаптивность:
Производительность:
Итоги Chrome DevTools — мощный инструмент для QA-инженера. Основные вкладки для повседневной работы:
Вкладка Главная цель для QA Network Проверка API-запросов и ответов Elements Инспекция вёрстки и CSS Console Поиск JS-ошибок Application Проверка cookies и хранилищ Performance Анализ производительности Device Emulation Тестирование адаптивности
Регулярное использование DevTools в тестировании позволяет находить баги, которые невозможно обнаружить простым визуальным осмотром интерфейса.