DevTools: Ваш самый мощный инструмент тестирования

DevTools браузера — самый ценный инструмент в арсенале веб-тестировщика. Он позволяет видеть всё, что происходит под поверхностью — сетевые запросы, ошибки JavaScript, изменения DOM, данные хранилищ, метрики производительности и многое другое.

Каждый крупный браузер включает DevTools: Chrome DevTools (F12), Firefox Developer Tools, Safari Web Inspector и Edge DevTools. Этот урок фокусируется на Chrome DevTools, так как он используется наиболее широко, но концепции применимы ко всем браузерам.

Открытие DevTools

Есть несколько способов открыть DevTools:

  • F12 или Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac)
  • Правый клик на любом элементе и выбор «Исследовать элемент»
  • Меню Chrome > Дополнительные инструменты > Инструменты разработчика

После открытия DevTools можно прикрепить к нижней, правой, левой части экрана или вынести в отдельное окно. Для тестирования прикрепление справа часто самое практичное, потому что вы видите страницу и инструменты одновременно.

Вкладка Elements

Вкладка Elements показывает живое дерево DOM и все CSS-стили, применённые к каждому элементу.

Инспекция элементов

Кликните правой кнопкой на любой элемент страницы и выберите «Исследовать элемент», чтобы перейти к нему в дереве DOM. Отсюда вы можете:

  • Просматривать HTML-структуру — видеть отношения родитель-потомок, атрибуты и текстовое содержимое
  • Редактировать HTML в реальном времени — двойной клик на любом атрибуте или тексте для временного изменения
  • Удалять элементы — выделить и нажать Delete для удаления элементов и наблюдения перекомпоновки страницы
  • Искать по DOM — нажать Ctrl+F в панели Elements для поиска по имени тега, атрибуту, тексту или CSS-селектору

Инспекция стилей

Панель Styles справа показывает все CSS-правила, применённые к выбранному элементу, в порядке специфичности. Вы можете:

  • Переключать свойства — клик на чекбокс для отключения/включения любого CSS-свойства
  • Редактировать значения — клик на любое значение для его изменения в реальном времени
  • Добавлять новые свойства — клик в пустом пространстве внутри правила для добавления нового CSS
  • Видеть вычисленные значения — переключиться на вкладку «Computed» для просмотра финальных рассчитанных значений
  • Принудительно включать состояния элемента — кнопка :hov для переключения состояний :hover, :active, :focus, :visited

Визуализация блочной модели

Внизу панели Styles (или во вкладке Computed) вы видите визуальное представление блочной модели — content, padding, border и margin с точными значениями в пикселях. Это необходимо для диагностики багов вёрстки.

Вкладка Console

Console — место, где появляются ошибки JavaScript и где вы можете выполнять команды JavaScript.

Чтение сообщений консоли

Сообщения выделены цветом:

  • Красные (Ошибки): Исключения JavaScript, неудачные сетевые запросы, нарушения безопасности
  • Жёлтые (Предупреждения): Уведомления об устаревании, предупреждения о производительности, некритичные проблемы
  • Синие (Инфо): Информационные сообщения приложения
  • Серые (Подробные): Детальные сообщения отладки

Каждое красное сообщение об ошибке потенциально является багом, достойным расследования.

Полезные команды консоли для тестирования 

// Подсчитать все элементы определённого типа
document.querySelectorAll('button').length

// Найти элементы по текстовому содержимому
[...document.querySelectorAll('*')].filter(el =>
  el.textContent.includes('Искомый текст')
)

// Проверить видимость элемента
const el = document.querySelector('.my-element');
const style = window.getComputedStyle(el);
console.log('Display:', style.display, 'Visibility:', style.visibility);

// Мониторить события на элементе
monitorEvents(document.querySelector('#myButton'), 'click');

// Сделать скриншот всей страницы
// Ctrl+Shift+P > "Capture full size screenshot"

// Очистить консоль
console.clear()

Фильтрация консоли

Используйте фильтры в выпадающем списке для отображения только ошибок, предупреждений, информации или подробных сообщений. Также можно фильтровать по тексту через поле поиска. При тестировании начинайте с фильтрации только ошибок — они имеют наивысший приоритет.

Вкладка Network

Вкладка Network — место мониторинга всего HTTP-трафика между браузером и серверами.

Понимание списка запросов

Каждая строка представляет один HTTP-запрос. Ключевые столбцы:

  • Name: URL-путь или имя файла
  • Status: Код статуса HTTP (200, 404, 500 и т.д.)
  • Type: Document, Script, Stylesheet, XHR/Fetch, Image и т.д.
  • Size: Размер передачи и фактический размер
  • Time: Сколько занял запрос
  • Waterfall: Визуальная временная шкала запроса

Фильтрация запросов

Используйте кнопки фильтра для отображения определённых типов запросов:

  • XHR/Fetch: API-вызовы — здесь видно большинство backend-багов
  • JS: JavaScript-файлы
  • CSS: Файлы стилей
  • Img: Изображения
  • Doc: HTML-документы

Инспекция запроса

Кликните на любой запрос для просмотра деталей:

  • Headers: Заголовки запроса и ответа, включая cookies, тип контента и токены аутентификации
  • Payload: Данные, отправленные в POST/PUT-запросах (form data или JSON)
  • Preview: Отформатированное представление ответа (JSON в виде дерева)
  • Response: Сырое тело ответа
  • Timing: Разбивка времени DNS, подключения, TLS, ожидания и загрузки

Сетевой throttling

Выпадающий список throttle позволяет имитировать медленные соединения. Тестируйте с:

  • Fast 3G: Типичное мобильное соединение
  • Slow 3G: Плохое мобильное соединение
  • Offline: Полное отсутствие связи

Это выявляет баги, проявляющиеся только при медленной сети — загрузочные спиннеры, которые никогда не исчезают, гонки данных, обработка таймаутов.

Сохранение логов

Включите «Preserve log» для сохранения сетевых запросов при переходах между страницами. Это критически важно для тестирования:

  • Потоков авторизации (редиректы очищают лог по умолчанию)
  • Отправок форм с редиректом
  • Многошаговых мастеров

Вкладка Application

Вкладка Application (называется Storage в Firefox) показывает клиентское хранилище данных.

Cookies

Просмотр, редактирование и удаление cookies текущего домена. Что важно проверять:

  • Сессионные cookies: Истекают ли при закрытии браузера?
  • Постоянные cookies: Разумно ли время истечения?
  • Флаг Secure: Помечены ли чувствительные cookies как Secure (только HTTPS)?
  • Флаг HttpOnly: Являются ли cookies аутентификации HttpOnly (недоступны для JavaScript)?
  • SameSite: Установлен ли атрибут SameSite для предотвращения CSRF?

Local Storage и Session Storage

Просмотр пар ключ-значение, хранящихся в браузере:

  • localStorage: Сохраняется до явной очистки
  • sessionStorage: Очищается при закрытии вкладки

Протестируйте, что происходит при ручном удалении элементов хранилища — корректно ли приложение обрабатывает отсутствующие данные?

Service Workers

Если приложение использует service workers (для офлайн-поддержки или push-уведомлений), их можно инспектировать здесь. Проверьте:

  • Работает ли приложение офлайн?
  • Обновляются ли кэшированные ресурсы при появлении новых версий на сервере?
  • Корректно ли приходят push-уведомления?

Вкладка Performance

Запись трейса производительности для анализа загрузки страницы и runtime-производительности.

Запись трейса

  1. Нажмите кнопку Record (или Ctrl+E)
  2. Выполните действие, которое хотите измерить
  3. Остановите запись

Трейс показывает:

  • Кадры в секунду (FPS): Падения ниже 60 указывают на подтормаживания
  • Использование CPU: Пики означают тяжёлую обработку
  • Сетевые запросы: Временная шкала всех запросов во время записи
  • Активность основного потока: Выполнение JavaScript, layout, paint и compositing

Сценарии тестирования производительности

Используйте запись производительности для тестирования:

  • Время загрузки страницы: Запись от начальной навигации
  • Производительность скроллинга: Запись при прокрутке длинных списков
  • Плавность анимаций: Запись во время CSS- или JavaScript-анимаций
  • Отправка формы: Запись полного цикла от отправки до ответа

Продвинутые техники DevTools

Эмуляция устройств

Нажмите Ctrl+Shift+M для переключения эмуляции устройств. Это позволяет:

  • Выбирать профили конкретных устройств (iPhone, Pixel, iPad)
  • Устанавливать произвольные размеры экрана
  • Имитировать сенсорные события
  • Менять device pixel ratio
  • Эмулировать геолокацию
  • Имитировать ориентацию устройства

Breakpoints во вкладке Sources

Хотя это в основном для разработчиков, знание о breakpoint помогает QA:

  • DOM breakpoints: Правый клик на элементе > «Break on» > модификации поддерева, модификации атрибутов или удаление узлов. Отладчик останавливается при изменении DOM, помогая отлавливать динамические баги.
  • XHR breakpoints: Во вкладке Sources добавьте breakpoint, срабатывающий при запросе к определённому URL. Полезно для отладки проблем с API-вызовами.
  • Event listener breakpoints: Пауза на определённых типах событий (click, submit, keypress) для понимания поведения приложения.

Упражнение: Полное расследование с DevTools

Выберите веб-приложение и выполните этот чеклист расследования:

  1. Вкладка Elements: Найдите основную навигацию. Используются ли семантические теги <nav>? Проверьте все ссылки на валидные атрибуты href.
  2. Вкладка Console: Отметьте все сообщения об ошибках. Для каждой ошибки определите — реальный баг или проблема стороннего скрипта.
  3. Вкладка Network: Отфильтруйте по XHR/Fetch. Определите все API-endpoint, которые вызывает страница. Отметьте неудачные запросы (4xx/5xx).
  4. Вкладка Application: Проверьте cookies на флаги безопасности (Secure, HttpOnly, SameSite). Проверьте localStorage на наличие чувствительных данных.
  5. Вкладка Performance: Запишите загрузку страницы. Отметьте общее время загрузки и время Largest Contentful Paint (LCP).

Задокументируйте находки в таблице:

ВкладкаНаходкаСерьёзностьБаг?
ConsoleTypeError: Cannot read property ‘map’ of undefinedВысокаяДа
NetworkGET /api/user возвращает 401 при авторизованном пользователеВысокаяДа
ApplicationТокен аутентификации в localStorage (должен быть httpOnly cookie)СредняяДа (Безопасность)

Ключевые выводы

  • DevTools — самый мощный инструмент для веб-тестирования, изучайте его глубоко
  • Вкладка Elements показывает живой DOM и CSS; используйте для расследования визуальных багов
  • Console показывает ошибки JavaScript, которые пользователи не видят, но которые указывают на реальные баги
  • Вкладка Network раскрывает всю API-коммуникацию — фильтруйте по XHR для фокуса на backend-вызовах
  • Вкладка Application показывает клиентское хранилище; проверяйте cookies на флаги безопасности
  • Эмуляция устройств позволяет тестировать адаптивное поведение без физических устройств
  • Сохраняйте логи при переходах между страницами при тестировании многошаговых потоков