В прошлых уроках этой главы вы разобрали клиент и сервер, сеть, HTTP-методы, коды ответа и cookies — но всё это оставалось теорией: увидеть эти вещи своими глазами было негде. На самом деле каждое из этих понятий можно рассмотреть вживую в одном инструменте, встроенном в любой браузер. Открывается он одной клавишей — F12 (или через меню браузера: «Дополнительные инструменты» → «Инструменты разработчика») — и называется DevTools.
Чему научишься за этот урок:
— находить нужную вкладку DevTools для конкретного типа проблемы;
— читать во вкладке Network метод, код ответа и содержимое запроса и ответа;
— собирать по DevTools доказательства конкретного дефекта для баг-репорта.
Четыре вкладки DevTools
DevTools — это панель с несколькими вкладками, каждая из которых показывает свой срез происходящего на странице. Тестировщику для повседневной работы нужны четыре из них.
Elements — показывает структуру HTML страницы и применённые к ней CSS-стили. Здесь можно найти конкретный элемент интерфейса (например, кнопку «Применить промокод») и посмотреть его атрибуты: задизейблена ли кнопка, какой у неё класс, какой текст внутри.
Console — показывает сообщения и ошибки JavaScript. Если скрипт страницы упал с ошибкой, она появится здесь красным текстом вместе с местом в коде, где это произошло. Это первое место, куда смотрят при подозрении на JS-баг — например, если кнопка вообще не реагирует на клик.
Network — показывает все запросы, которые браузер отправил серверу: метод (GET, POST и другие — из урока про HTTP-методы), код ответа (из урока про коды ответа), время выполнения, а также полное содержимое запроса и ответа. Это основной источник доказательств для баг-репорта: здесь видно, что реально ушло на сервер и что реально пришло обратно, а не что показалось интерфейсу.
Application — показывает cookies, Local Storage и Session Storage текущего сайта (из урока про cookies и хранилища). Здесь можно проверить, сохранился ли токен авторизации, не протухла ли сессионная cookie, что именно лежит в хранилище браузера.
+-----------+-----------+-------------+--------------+ | Elements | Console | Network | Application | +-----------+-----------+-------------+--------------+ | HTML+CSS | JS-ошибки | все запросы:| cookies, | | элемента | (красным) | метод, код, | Local/Session| | | | тело | Storage | +-----------+-----------+-------------+--------------+
Вкладка Network — источник доказательств для баг-репорта; как его оформлять, разберёте в главе про тестовую документацию: скриншот конкретного запроса с кодом ответа и телом — куда более убедительное доказательство, чем «у меня не работает».
Практический сценарий: промокод не применяется
На полигоне ученик вводит промокод при оплате курса, нажимает «Применить», но скидка не появляется. Разберём, как DevTools помогает найти доказательства.
- Открываем вкладку Network и оставляем её открытой перед тем, как нажать «Применить».
- Нажимаем «Применить промокод» и находим в списке соответствующий запрос.
- Смотрим код ответа: если это 500, проблема на стороне сервера — упала логика проверки промокода.
- Если код ответа 200, но скидка всё равно не применилась, смотрим тело ответа: если сервер прислал подтверждение скидки, а на экране её нет — проблема в интерфейсе (клиенте); если сервер сам прислал отказ — проблема в логике проверки промокода на сервере.
- Прикладываем скриншот этого запроса (метод, код, тело ответа) к баг-репорту как доказательство.
Итог:
— DevTools открывается клавишей F12 и показывает то, что иначе увидеть нельзя;
— Elements — для вёрстки и атрибутов элементов, Console — для ошибок JavaScript;
— Network — самая частая вкладка для баг-репортов: метод, код ответа, тело запроса и ответа;
— Application — для cookies и хранилищ браузера.
Контрольный вопрос. Какая вкладка DevTools показывает HTML-структуру страницы и применённые к элементам CSS-стили?
Подсказка: Это вкладка про разметку и стили, а не про запросы к серверу и не про ошибки скрипта.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Скрипт страницы упал с ошибкой, из-за которой кнопка вообще не реагирует на клик. В какой вкладке DevTools вы увидите текст этой ошибки?
Подсказка: Ищи вкладку, которая показывает сообщения и ошибки JavaScript красным текстом.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Какая вкладка DevTools показывает все запросы, которые браузер отправил серверу, включая метод и код ответа?
Подсказка: Это вкладка, которую чаще всего открывают, чтобы собрать доказательства для баг-репорта.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Нужно проверить, сохранился ли в браузере токен авторизации после входа в личный кабинет. Какую вкладку DevTools открыть?
Подсказка: Это вкладка, где показаны cookies и хранилища браузера, а не запросы или ошибки скрипта.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Какую клавишу нажимают, чтобы быстро открыть DevTools в браузере? Ответь без пробелов, например: F5.
Подсказка: Это функциональная клавиша с номером в верхнем ряду клавиатуры, названная в самом начале урока.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. На полигоне кнопка «Оплатить» стала серой, и на неё нельзя нажать. Вы хотите проверить, есть ли у этой кнопки атрибут disabled в разметке. В какой вкладке DevTools это смотреть? Ответь одним словом — названием вкладки.
Подсказка: Это вкладка про структуру страницы и атрибуты конкретного элемента, а не про сеть или скрипты.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. Ученик ввёл промокод и нажал «Применить», скидка не появилась. Чтобы увидеть код ответа сервера именно на этот запрос, какую вкладку DevTools нужно открыть? Ответь одним словом — названием вкладки.
Подсказка: Нужна вкладка, где виден список всех отправленных запросов вместе с кодом ответа на каждый из них.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Какие данные можно увидеть во вкладке Network при анализе запроса на применение промокода (выбери все подходящие)?
Выберите все верные варианты.
Подсказка: Сверь каждый вариант по отдельности с определением вкладки Network из урока.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. Во вкладке Network запрос на применение промокода вернул код ответа 500. На какой стороне, судя по этому коду, возникла проблема? Ответь одним словом.
Подсказка: Код ответа, начинающийся с цифры 5, по уроку про коды ответа означает ошибку на определённой из двух сторон.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. Во вкладке Network запрос на применение промокода вернул код 200, но скидка на экране не появилась. Опиши в 2-3 предложениях, как ты будешь дальше разбираться: что посмотришь в теле ответа сервера и в какой ещё вкладке DevTools проверишь, что произошло с этими данными на экране.
Критерий приёмки: указано, что нужно посмотреть содержимое (тело) ответа сервера; если сервер подтвердил скидку — назван переход в Elements, чтобы проверить, применилась ли скидка визуально на странице; если сервер сам прислал отказ (например, промокод истёк) — сделан вывод, что дефекта на клиенте нет, дело в данных/логике на сервере. Общие фразы вроде «проверю всё» не засчитываются.
Подсказка: Код 200 говорит только о том, что сервер ответил без ошибки — а вот что именно он ответил и что показал экран, это два разных вопроса, которые нужно сверить.
✅ Готово, если: ответ раскрывает то, что просит критерий приёмки в задании выше.
Онлайн-проверка ответа появится позже
Задание. Во вкладке Network тело ответа на запрос применения промокода содержит: {«discount_applied»: true, «discount»: 500}, но на экране оплаты сумма осталась прежней, без скидки. Судя по этим данным, на какой стороне дефект? Ответь одним словом.
Подсказка: Сервер в ответе уже подтвердил скидку — подумай, что должно произойти дальше, чтобы эти данные отобразились на экране, и на какой стороне это происходит.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Что дальше
DevTools показывает, что происходит в браузере и что реально было отправлено на сервер и получено обратно. Но иногда доказательства нужно искать ещё глубже — в текстовых логах самого сервера и в истории изменений кода. Разберём это в следующем уроке — командная строка, логи и Git для ручного тестировщика.
