DevTools — инструмент для тестирования веб-приложений

DevTools — инструмент для тестирования веб-приложений

Введение

DevTools (Developer Tools) — это набор встроенных инструментов браузера для разработки и отладки веб-приложений. Для тестировщика это самый мощный бесплатный инструмент: он позволяет видеть все сетевые запросы, ошибки JavaScript, хранилище браузера и многое другое. Открывается нажатием F12 или Ctrl+Shift+I / Cmd+Option+I.

Ключевые вкладки DevTools для тестировщика

Elements (Элементы)

Позволяет инспектировать HTML-структуру и CSS-стили страницы.

Что делать:

• Навести курсор на элемент → правая кнопка → "Inspect" — откроется нужный элемент в дереве
• Увидеть реальную структуру DOM (может отличаться от исходного HTML, если JS изменил страницу)
• Проверить, правильно ли расставлены классы и атрибуты
• Временно изменить стили или HTML прямо в браузере (без изменения кода) — удобно для проверки гипотез

Пример: кнопка кажется кликабельной, но фактически перекрыта прозрачным элементом — это видно в Elements.

Console (Консоль)

Выводит JavaScript-ошибки, предупреждения и log-сообщения.

Что проверять:

• ❌ Ошибки (красный цвет) — сломан JS, запрос упал, синтаксическая ошибка
• ⚠️ Предупреждения (жёлтый) — deprecated API, потенциальные проблемы
• ℹ️ Логи — отладочная информация от разработчиков

Правило: открывай Console после каждого действия в приложении. Ошибки в консоли — часто первый сигнал о баге, даже если интерфейс выглядит нормально.

Network (Сеть)

Показывает все HTTP-запросы, которые браузер делает со страницы.

Что делать:

• Фильтровать по типу: XHR / Fetch — API-запросы; JS — скрипты; Img — картинки
• Кликнуть на запрос → увидеть:
  • Headers: заголовки запроса и ответа (токен авторизации, Content-Type)
  • Payload/Body: тело запроса (что отправлено на сервер)
  • Response: что сервер вернул в ответ
  • Status: код ответа (200, 401, 500)
  • Timing: сколько времени занял запрос

Практический workflow — найти API-запрос от кнопки:

1. Открой Network, убедись, что запись включена
2. Нажми кнопку в интерфейсе
3. В Network появится новый запрос → кликни на него
4. Смотри URL, метод (GET/POST), тело и ответ

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

Доступ к хранилищу браузера.

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

Позволяет записать и проанализировать производительность страницы: время загрузки, рендеринга, выполнения JS.

Для тестировщика: используй при тестировании требований к производительности. Нажми "Record" → выполни действие → "Stop" → смотри фреймы и узкие места.

Lighthouse

Автоматический аудит страницы по критериям:

• Performance: время загрузки, LCP, CLS
• Accessibility: доступность для людей с ограниченными возможностями
• SEO: оптимизация для поисковиков
• Best Practices: безопасность, консольные ошибки

Как запустить: DevTools → Lighthouse → Generate report. Полезно включить в тест-план для любого релиза.

Практические DevTools-сценарии

Сценарий 1: Проверить авторизационный заголовок

Network → фильтр Fetch/XHR → кликнуть любой API-запрос → 
Headers → Request Headers → найти Authorization: Bearer <token>

Сценарий 2: Что возвращает сервер на ошибку

Network → найти красный (failed) запрос → Response → 
скопировать тело ответа в баг-репорт

Сценарий 3: Проверить содержимое cookie

Application → Cookies → example.com → 
убедиться что токен есть, атрибут HttpOnly стоит

Сценарий 4: Симуляция медленной сети

Network → выпадающий список "No throttling" → 
выбрать "Slow 3G" → перезагрузить страницу → 
проверить поведение при медленной загрузке

Частые ошибки понимания

• ❌ "DevTools — только для разработчиков" → тестировщик использует их ежедневно
• ❌ "Ошибки в Console — не моё дело" → ошибки JS часто указывают на реальный баг в функциональности
• ❌ "Network пустой — значит запросов нет" → проверь, включена ли запись (красная точка)

Что мы запомним

• DevTools открывается по F12 — основной инструмент тестировщика веб-приложений
• Elements: инспекция DOM и CSS структуры страницы
• Console: JS-ошибки после каждого действия — обязательная проверка
• Network: все HTTP-запросы, их заголовки, тело и ответ сервера
• Application: cookies, localStorage, sessionStorage
• Lighthouse: автоматический аудит производительности и доступности
• Симуляция медленной сети: Network → Throttling → Slow 3G