Вкладка Network в DevTools: как смотреть запросы браузера

Вкладка Network превращает «у меня что-то не работает» в «сервер вернул 500 на POST /api/order». Это главный инструмент, отличающий тестировщика от пользователя, который жалуется.

Как открыть и что настроить сразу

DevTools открывается по F12 или Ctrl+Shift+I (на Mac — Cmd+Option+I). Вкладка Network пустая, пока страница не перезагружена: она пишет только то, что происходит при открытых инструментах.

Первым делом включите две галочки, без них половина находок теряется:

• Preserve log — не очищать список при переходе на другую страницу. Без неё запрос, после которого произошёл редирект, исчезает вместе с историей.
• Disable cache — не брать файлы из кэша, пока DevTools открыт. Иначе вы проверяете старую версию и не понимаете, почему правка «не приехала».

Что означают колонки

Колонка	Что показывает	На что смотреть
Name	Адрес запроса	Ищите свой метод API среди статики
Status	Код ответа	4xx — проблема в запросе, 5xx — на сервере
Type	Тип содержимого	Фильтр Fetch/XHR оставляет только обращения к API
Size	Размер ответа	«(from disk cache)» значит, что ответ не с сервера
Time	Длительность	Ищите то, что висит секундами

Фильтр Fetch/XHR — первое, что стоит нажать: он убирает картинки, шрифты и скрипты, оставляя обмен данными с сервером. Именно там живут интересные дефекты.

Что смотреть внутри запроса

Клик по строке открывает вкладки, каждая отвечает на свой вопрос.

• Headers — куда, каким методом, с какими заголовками. Здесь виден токен авторизации и Content-Type.
• Payload — что именно отправили. Классика: интерфейс показывает одно, а уходит другое.
• Response — что вернул сервер, до обработки скриптами. Здесь ловится «200 с ошибкой внутри тела».
• Timing — из чего сложилось время ответа: ожидание сервера или загрузка данных.

Copy as cURL — приём, экономящий часы

Правый клик по запросу → Copy → Copy as cURL. В буфере оказывается готовая команда, которая повторяет запрос целиком: метод, заголовки, тело, куки. Её можно вставить в терминал или импортировать в Postman.

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

1. Повторить запрос без интерфейса и понять, чья ошибка — фронтенда или сервера.
2. Поменять одно поле и посмотреть, есть ли проверка на сервере (изменить цену, подставить чужой идентификатор).
3. Приложить к репорту точный способ воспроизведения, не зависящий от кликов.

HAR-файл: снимок всего обмена

Кнопка «Export HAR» сохраняет весь список запросов со всеми деталями в один файл. Разработчик открывает его у себя и видит ровно то, что видели вы. Незаменимо для дефектов, которые воспроизводятся только у одного пользователя.

Та же оговорка про безопасность: HAR содержит заголовки авторизации. Для внешней передачи их вычищают.

Приёмы, о которых редко рассказывают

• Фильтр по коду ответа. В строке фильтра можно написать status-code:500 и сразу увидеть все упавшие запросы, не листая список.
• Блокировка запроса. Правый клик → Block request URL. Так проверяется, что интерфейс делает, когда конкретный метод недоступен, — обычно выясняется, что ничего хорошего.
• Режим Offline в списке троттлинга. Быстрый способ увидеть, есть ли у продукта человеческое поведение без сети.
• Сортировка по Time. Один клик по колонке показывает самые медленные запросы — часто это выгрузка или поиск без ограничения.
• Колонка Initiator. Показывает, какой скрипт отправил запрос. Помогает, когда непонятно, откуда взялось обращение к серверу.

Троттлинг: проверка на медленной сети

Выпадающий список No throttling позволяет притвориться медленным интернетом. Это не экзотика: на «Slow 3G» вылезают дефекты, которых не видно на офисном Wi-Fi.

• Индикаторы загрузки, которых нет, — интерфейс просто замирает.
• Двойные отправки: пользователь не понял, что запрос идёт, и нажал ещё раз.
• Гонки данных: экран отрисовался раньше, чем пришли данные.
• Таймауты, которые никто не обработал.

Коды ответов, которые вы будете здесь видеть, разобраны в шпаргалке по HTTP, а потренироваться на живом учебном сервере можно в тренажёре «клиент API».