Тренажёр DevTools для тестировщиков
Network, Application, Console и Elements. Открываешь стенд, жмёшь F12 и находишь то, что видно только там: статус, заголовок, значение из ответа.
- Задач
- 60
- Среда
- Учебные стенды и твой браузер
- Тариф
- Базовый на выбор или Pro
Что тренируем
- Network: метод, адрес, query-параметры, заголовки, тело запроса и ответа, тайминги
- Application: cookies, localStorage и sessionStorage, кэш, состояние и сессии
- Console и Elements: ошибки движка, стили, вёрстка, белый экран
- Троттлинг сети, ожидание и повторы, сервер под нагрузкой, нестабильность и производительность
- Баг-репорт из DevTools: скопировать запрос как cURL и приложить факты
Как устроена проверка
В каждой задаче — учебный стенд в отдельной вкладке: открой его, нажми F12 и найди ответ в DevTools своего браузера. Ответ — факт, который видно только там: статус, заголовок, значение из ответа; «Новый вариант» меняет значения стенда. Нужен Chrome, Edge или Яндекс Браузер на компьютере.
Среда: Учебные стенды и твой браузер. Всё работает в браузере, устанавливать ничего не нужно.
Уровни и число задач
Четыре уровня. Следующий открывается, когда решена треть задач предыдущего (30 %).
| Уровень | Задач | Открывается |
|---|---|---|
| Простой | 15 | сразу |
| Средний | 15 | после 5 из 15 задач уровня «Простой» |
| Сложный | 15 | после 5 из 15 задач уровня «Средний» |
| Продвинутый | 15 | после 5 из 15 задач уровня «Сложный» |
Примеры задач
По задаче с простого и продвинутого уровней и две со среднего, с условием как в тренажёре. Проверка, подсказки и справочник открываются после регистрации.
- Простой
Метод запроса
На стенде форма с кнопкой «Сохранить». Выясни, каким методом и на какой адрес уходит запрос, когда ты нажимаешь кнопку.
Открой стенд, открой DevTools (F12, Cmd+Opt+I на macOS) на вкладке Network и только потом нажми «Сохранить».
- Средний
Фильтр каталога
Требование: фильтр «Категория» в каталоге показывает только товары выбранной категории.
Открой стенд, перейди в Каталог и выбери категорию «Наушники». Проверь требование и, если есть баг, определи, на чьей он стороне. Для доказательства укажи
X-Request-Idответа сервера на запрос товаров с фильтром (последний запросproducts). - Средний
Пагинация
Требование: вторая страница каталога показывает другие товары, не те, что на первой.
Открой Каталог и нажми «→». Проверь требование и определи сторону бага, если он есть. Доказательство —
X-Request-Idответа на запрос второй страницы (последний запросproducts). - Продвинутый
Белый экран в профиле
Жалоба: у одного из клиентов после входа страница «Профиль» превращается в белый экран. У остальных всё в порядке.
В магазине три учётки:
anna@shop.test/shop-anna-1,oleg@shop.test/shop-oleg-1иempty@shop.test/shop-empty-1. Войди под каждой учёткой и после входа перезагрузи страницу профиля (F5, Cmd+R на macOS): падение видно только на запросеGET /api/meпосле перезагрузки. Найди, у кого профиль ломается. Чтобы сменить учётку, удали cookieshop_sid(Application → Cookies) или открой страницу…/loginстенда. Затем выясни, кто виноват — по контракту на странице «API» (ссылка в подвале): фронтенд или бэкенд. Нужен X-Request-Id запросаGET /api/meу пострадавшего клиента.
В каком тарифе
DevTools входит в три тренажёра на выбор в Базовом и во все тренажёры в Pro. Демо открывает всё.
Демо0 ₽
3 дня бесплатно после регистрации, без карты: все тренажёры и справочник
Базовый399 ₽ за 30 дней
Три тренажёра на выбор на 30 дней
Pro999 ₽ за 30 дней
Все тренажёры и Йова