Урок 6. DevTools: найти нужный запрос
В предыдущих уроках метод, путь, строка запроса, тело, cookie и перенаправление были показаны на подготовленных HTTP-карточках. Теперь DevTools станет измерительным инструментом: вы самостоятельно найдёте те же элементы в обмене работающего браузера.
Одна страница загружает HTML, стили, сценарии и изображения. Поэтому нужный запрос редко оказывается единственной строкой в Network. Его ищут по действию, времени появления, методу и адресу.
Как подготовить Network
Откройте работающую лабораторию «Кружок». В Firefox или Chromium откройте инструменты разработчика и выберите Network. Если список пуст, обновите страницу.
1 — вкладка Network; 2 — запись трафика; 3 — фильтр списка.
Перед проверкой поиска:
- включите сохранение журнала только при необходимости;
- очистите текущий список;
- откройте раздел «Проекты»;
- введите
meteorи нажмите «Найти»; - выберите запрос, появившийся сразу после этого действия.
1 — выполненное действие; 2 — выбранный запрос, появившийся после него.
Не ориентируйтесь только на код 200: такой же код могут получить документ, CSS и JavaScript.
Найдите запрос поиска в Network
Уровень: базовое закрепление.
В работающем «Кружке» очистите Network, найдите проекты по слову meteor и выберите запрос, вызванный отправкой формы.
Заполните отдельные поля под заданием и выберите наблюдение, которое связывает запрос с отправкой формы.
Что показывают Headers и Response
В Headers находятся адрес, метод, код состояния и заголовки обмена. В Response находится тело ответа. Эти вкладки отвечают на разные вопросы: как браузер обратился к сайту и что сайт вернул.
1 — Headers; 2 — метод и код; 3 — Content-Type ответа.
У запроса поиска проверьте:
- метод и строку запроса;
- код ответа;
Content-Type;- заголовок найденного проекта в Response.
1 — Response; 2 — HTML найденной карточки в теле ответа.
Затем откройте вкладку Initiator. Она помогает понять, какое действие или сценарий вызвали запрос, но не заменяет проверку его адреса и ответа.
1 — Initiator; 2 — цепочка документа и загруженных им ресурсов.
Дополнительно: как увидеть cookie и redirect
Этот блок полезен для знакомства с интерфейсом DevTools, но не нужен для двух оцениваемых задач урока. Если Network пока непривычен, сначала выполните поиск и повтор через curl, а к наблюдению сессии вернитесь позднее.
Откройте /login и войдите как student с паролем student. В Network найдите ответ на отправку формы входа. Проследите перенаправление до настроек.
В Firefox откройте Storage, а в Chromium — Application, затем Cookies. Найдите имя kruzhok_session. Значение случайно создаётся для текущего запуска, поэтому не копируйте его в ответ и не сохраняйте на скриншоте.
1 — Application; 2 — origin лаборатории; 3 — имя cookie. Значение намеренно закрыто.
Модель cookie и серверной сессии уже разобрана в предыдущем уроке. Здесь дополнительная цель — найти Set-Cookie, следующий Cookie и цепочку перенаправлений в интерфейсе браузера, не раскрывая случайное значение.
Пока вы вошли, на странице настроек измените поле «Отображаемое имя». Очистите Network, нажмите «Сохранить через JSON» и выберите новый запрос POST /api/profile. В Headers проверьте метод, путь, код и Content-Type: application/json, в Payload — отправленное имя, а в Response — поля display_name и updated.
Завершив наблюдение, нажмите «Выйти». Найдите POST /logout, проследите переход на главную страницу и убедитесь в Application или Storage, что kruzhok_session больше не хранится. Значение cookie никуда не копируйте.
Как получить команду curl
Вернитесь к запросу поиска meteor. В контекстном меню выберите Copy as curl и вставьте команду в терминал. Перед запуском убедитесь, что адрес совпадает с вашей лабораторией.
1 — выбранный запрос; 2 — Copy as cURL в подменю Copy.
Выполните команду и сравните код, тип содержимого и заголовок проекта с Network. curl показывает HTTP-ответ, но не строит из него страницу и не выполняет JavaScript.
Повторите запрос через curl
Уровень: базовое закрепление.
Для запроса поиска meteor выберите Copy as curl, проверьте адрес лаборатории и выполните команду в терминале.
Заполните три отдельные поля под заданием по ответу curl.
Где это пригодится на олимпиаде
В задаче Web 10-2 для 10 класса на заключительном этапе ВсОШ 2026 года участник менял email, находил возникший PUT /user, читал JSON-поле запроса и проверял изменённый обмен (источник: официальный разбор задачи, стр. 2–3). В разборе запрос искали в HTTP history Burp Suite, а не в DevTools. Здесь DevTools тренирует тот же навык, но не выдаётся за инструмент из исторического решения.
Разбор задачи МОШ для 8 класса
«Web-2 выше выше» — отборочный этап МОШ, 8 класс
В этой задаче сервер отвечал на GET / и HEAD / по-разному. Обычный GET
возвращал страницу, а при HEAD сервер отправлял пустое тело и добавлял секрет
в заголовок X-FLAG. Поэтому достаточно было обратиться к выданному адресу
методом HEAD и посмотреть заголовки ответа:
export TASK_URL='[ЗАМЕНИТЕ: АДРЕС ЗАДАЧИ]'
curl -I "$TASK_URL/"
curl -i -X HEAD "$TASK_URL/"
Ключ -I сам выбирает метод HEAD и печатает заголовки. Ключ -i только
добавляет заголовки к выводу, поэтому без -X HEAD он отправил бы обычный GET и
в этой задаче секрета не получил бы.
При открытии адреса из строки браузера выполняется GET. Браузер строит страницу
из тела этого ответа, а сервер не помещает X-FLAG ни в HTML, ни в ответ на
GET. DevTools умеет показать заголовки реально выполненного запроса, но обычная
навигация не создаёт отдельный HEAD-запрос. Поэтому на самой странице этот
заголовок не виден: нужно явно отправить другой HTTP-метод.
Вывод
Связь действия с запросом удобнее всего подтверждать на чистом журнале Network: новая строка показывает метод и путь, Headers — детали обмена, Response — ответ, а Initiator — место запуска. Тот же безопасный запрос можно повторить через curl и сравнить устойчивые признаки ответа, не сохраняя случайное значение cookie.
Следующий урок переносит найденный запрос в Burp Suite: там вы сохраните историю, измените ровно один параметр и сравните два ответа.