В каждом браузере есть встроенные инструменты разработчика — DevTools. Открываются клавишей F12 (или правой кнопкой → «Просмотреть код»). Название пугает словом «разработчик», но тестировщику эти инструменты нужны почти так же, как разработчику: они превращают проверку из «снаружи, вслепую» в серый ящик, где видно, что реально происходит под капотом страницы.
Разбирать все вкладки не нужно. Тестировщику для старта хватает трёх: Console (консоль), Network (сеть) и Elements (элементы). Пройдёмся по каждой.
Console — ошибки страницы
Вкладка Console показывает сообщения, которые страница выводит для разработчиков, и — самое ценное для вас — ошибки. Они обычно выделены красным.
Зачем это тестировщику: если на странице что-то ведёт себя странно (кнопка не срабатывает, данные не грузятся), в консоли часто лежит красная ошибка, объясняющая причину. Даже если вы не понимаете её текст целиком, скриншот этой ошибки в баг-репорте — золото для разработчика: он сразу видит, куда смотреть.
Практическое правило: заметили баг — загляните в консоль перед тем, как заводить. Есть красная ошибка — приложите её.
Network — запросы к серверу
Вкладка Network показывает все обращения страницы к серверу: за данными, за картинками, при отправке формы. Каждая строка — один запрос. Чтобы увидеть их, откройте Network и обновите страницу или выполните действие (например, нажмите «Войти»).
Что здесь смотрит тестировщик:
- Статус запроса. Число вроде 200 — успех; 400/404 — что-то не так с запросом; 500 — ошибка на сервере. Красные строки со статусом 500 — верный признак серверного бага.
- Что ушло и что пришло. Кликнув по запросу, можно посмотреть, какие данные страница отправила серверу и что он ответил. Это помогает понять, где сломалось: на стороне страницы (отправила не то) или сервера (ответил неверно).
Пример пользы: форма «молча» не сохраняется. В Network видно: запрос ушёл, сервер ответил статусом 500. Значит, баг на сервере, а не в кнопке, — и это ценная деталь для репорта.
Elements — устройство страницы
Вкладка Elements показывает HTML-структуру страницы — из чего она собрана — и позволяет её временно поменять прямо в браузере (у себя, не для всех).
Чем полезно тестировщику:
- Посмотреть, что там на самом деле. Например, поле выглядит пустым, но в разметке видно, что значение есть, просто не отображается.
- Проверить тексты и подписи — точно ли совпадают с макетом.
- Быстро проверить длинный текст: временно вписать в поле очень длинную строку прямо в разметке, чтобы увидеть, не разъедется ли вёрстка.
Глубоко в Elements лезть новичку не нужно, но уметь заглянуть и увидеть структуру — полезный навык.
Ещё пара полезностей
- Эмуляция устройств. В DevTools есть режим, который показывает страницу как на телефоне разного размера, — удобно для быстрой проверки адаптивности, хотя настоящее устройство он не заменяет.
- Вкладка Application. Там видно, что страница хранит у себя (куки, локальное хранилище). Пригодится позже, для более глубоких проверок.
Где это применяется
DevTools — это переход от «тыкаю снаружи и гадаю» к «вижу, что произошло». Практически каждый нетривиальный баг стоит проверять с открытыми инструментами: красная ошибка в консоли или упавший запрос в Network часто сразу указывают на причину и делают ваш баг-репорт в разы полезнее. Это один из главных навыков, отличающих джуна, который «просто кликает», от того, кто понимает, что происходит.
Где спотыкаются начинающие:
- Не открывают DevTools вообще и заводят баги «форма не работает», хотя в консоли прямым текстом лежит причина.
- Пугаются незнакомого текста ошибок. Не нужно понимать всё — достаточно приложить скриншот, разработчик разберётся.
- Путают, где сломалось. Network помогает различить: страница отправила не то (клиент) или сервер ответил неверно (500).
Что учить дальше. Network показал, что страница общается с сервером запросами. Проверять эти запросы можно и напрямую, без интерфейса, — это основы API-тестирования в Postman.