Конспект — Урок 15: DevTools

Зачем тестировщику DevTools

DevTools — встроенные инструменты браузера (Chrome, Firefox, Safari, Edge). Они нужны QA не чтобы писать код, а чтобы видеть то, что не видно в интерфейсе: ошибки JavaScript, сетевые запросы, куки и локальное хранилище.

Открыть панель: F12, Ctrl+Shift+I (Windows/Linux), Cmd+Option+I (Mac). После включения вкладки Network имеет смысл отмечать Disable cache, чтобы каждый раз подгружались актуальные JS/CSS/картинки.

Elements — дерево страницы

Inspect / «Посмотреть код» (правый клик по элементу) сразу открывает нужный узел в дереве — не нужно искать вслепую.

Стрелка выбора в углу панели Elements: наводишь на элемент страницы, в дереве подсвечивается соответствующий HTML.
По дереву понятна вложенность: структура форм, списков, кнопок без доступа к репозиторию.
В стилях можно увидеть, какие CSS-свойства реально применились и откуда (в т.ч. отключённые «зачёркнутые»).

Для автотестов полезно проверять стабильные атрибуты, например data-testid — если его нет, автоматизация и ручная проверка локаторов усложняются.

Console — ошибки и логи

Красные строки — ошибки JavaScript: тип ошибки (TypeError, ReferenceError, SyntaxError), файл и строка. Это уже материал для баг-репорта (скрин + текст).

Жёлтые — предупреждения (warnings); их тоже стоит фиксировать, если они связаны со сбоем функциональности или шумят на ключевых сценариях.

Не полагаться на «у меня работает»: если у коллеги в Console ошибка воспроизводится при тех же шагах — нужно указать её в описании дефекта.

Network — запросы и ответы

При загрузке и работе страницы браузер отправляет множество запросов; вкладка Network показывает их все.

Полезные колонки: Status (HTTP-код), Type, Size, Time. Фильтр Fetch/XHR быстро отделяет API-от статических файлов.

По каждому запросу можно открыть:

Headers — метод, URL, статус, заголовки запроса и ответа;
Payload / тело запроса;
Preview / Response — тело ответа (в т.ч. JSON).

Код 2xx обычно означает успешный ответ API (точнее — смотри контракт: иногда ошибка описана телом при 200). Коды 4xx / 5xx — классический сигнал для бага или нештатной ситуации.

Local Overrides (в Chrome-подобных браузерах): возможность подменить ответ сервера локальным файлом — проверять UI при «ломаных» или граничных данных без изменения backend.

С Network связана команда Copy as cURL — удобно передавать запрос в Postman или в чат разработчикам.

Application — куки и хранилища

Cookies

Сервер выставляет куку через заголовок Set-Cookie; браузер потом отправляет её в следующих запросах к домену. В разделе Application → Cookies видны имя, значение, срок жизни, флаги.

HttpOnly — кука недоступна из JavaScript (снижает риск кражи через XSS-сценарии на странице).
Secure — отправка только по HTTPS.

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

localStorage и sessionStorage

	localStorage	sessionStorage
Срок жизни	После закрытия вкладки/браузера данные сохраняются (пока не очистят вручную)	Живёт пока открыта вкладка

В них не должно лежать пароли, полные секретные токены в открытом виде без необходимости — любая XSS может прочитать то, что доступно скриптам страницы (куки без HttpOnly — тоже риск).

Связка с доказательной базой дефекта

Для качественного баг-репорта часто нужны скрины или выписки из:

Console (ошибка);
Network (упавший или «странный» запрос — метод, URL, статус, фрагмент ответа);
Application (неверное состояние cookie или storage после шага).

Ключевые выводы урока

Четыре опоры ежедневной работы: Elements, Console, Network, Application.
Console и Network дают объективные артефакты для репорта.
Куки и storage — три разных источника состояния и типичных дефектов; важно понимать HttpOnly, Secure и жизненный цикл данных.
При отладке в Network включать Disable cache, чтобы не гоняться за устаревшими скриптами.

Домашнее задание

Открой Пиццаед (/base/shop).
Открой DevTools (F12).
Добавь «Маргариту» в корзину.
Ответь в чате марафона по четырём пунктам:
- Elements — тег и текст с названием магазина на странице.
- Console — есть ли красные/жёлтые сообщения и что они говорят.
- Network → Fetch/XHR — метод, URL (можно коротко) и статус запроса на добавление в корзину.
- Application → Local Storage — есть ли ключ, связанный с магазином; как он называется.

Дополнительно (бонус): в Headers этого запроса посмотреть наличие X-Course-Session и кратко сформулировать, зачем он нужен (изоляция сессии песочницы).

Практика на тренажёре под урок есть на aiqa.su/base/devtools — закрепляй вкладки на заданиях Elements, Console, Network и Application.

Урок 15. DevTools

Темы урока

Видео урока

Конспект урока