DevTools для тестировщика

Draft

Как использовать браузерные DevTools в ежедневной работе QA: network, console, elements, storage и debugging.

Содержание

DevTools — один из самых недооценённых инструментов QA. Он позволяет видеть, что происходит в браузере на самом деле: какие запросы ушли, какие ресурсы не загрузились, какие ошибки появились в console и что хранится в browser storage.

С чего начинать

  • Elements — смотреть DOM, атрибуты, скрытые элементы и applied styles.
  • Network — анализировать запросы, ответы, headers, payload, timing и caching.
  • Console — замечать JS-ошибки, warnings и runtime-аномалии.
  • Application — проверять cookies, localStorage, sessionStorage и service workers.

Что DevTools даёт QA

  • Быстрее отделять UI-проблему от backend-проблемы.
  • Точнее воспроизводить баг и описывать шаги.
  • Находить неожиданные запросы, повторы, redirects и ошибки авторизации.
  • Видеть, почему элемент неактивен, не виден или ведёт себя нестабильно.

Лучшая привычка

Открывать DevTools не после того, как “ничего не работает”, а во время нормального тестирования. Тогда ты быстрее замечаешь странные сигналы ещё до явного дефекта.

🛠️

QA, который уверенно пользуется DevTools, почти всегда локализует дефекты быстрее и спорит с командой меньше, потому что приносит факты, а не ощущения.