Как скопировать API-запросы из вкладки Network

Apr 29, 2026 · 4 min read

Как скопировать API-запросы из вкладки Network

Когда вы отлаживаете API-запросы в браузере и обнаруживаете ошибку 400 или 500, самый быстрый способ разобраться — скопировать этот запрос напрямую из вкладки Network и воспроизвести его в специализированном API-клиенте. Никакой настройки прокси не требуется. Вот как это сделать эффективно в Chrome, Edge и Firefox.

Ключевые моменты

Используйте Copy as cURL для тестирования в терминале, импорта в API-клиенты вроде Postman или Insomnia, а также для передачи воспроизводимых запросов коллегам.
Используйте Copy as fetch, когда нужно воспроизвести или создать шаблон запроса непосредственно в JavaScript-контексте, например, в консоли браузера или в Node.js-скрипте.
Фильтруйте по Fetch/XHR и включите Preserve log перед захватом запросов, чтобы не потерять записи при навигации.
Всегда очищайте скопированные запросы перед их передачей — они часто содержат токены авторизации, session-куки и API-ключи.

Стандартный рабочий процесс

Откройте DevTools (F12 или Cmd+Option+I на Mac), перейдите на вкладку Network и выполните действие, которое инициирует запрос. Как только запрос появится в списке, щёлкните по нему правой кнопкой мыши, чтобы получить доступ к опциям копирования.

Перед копированием стоит проверить две настройки:

Фильтр по Fetch/XHR — Нажмите кнопку фильтра “Fetch/XHR”, чтобы скрыть статические ресурсы и сосредоточиться только на API-вызовах. Это значительно упрощает поиск нужного запроса.
Preserve log — Включите эту опцию, если запрос происходит во время навигации по страницам или редиректа. Без неё вкладка Network очищается при навигации, и вы потеряете запись.

Чтобы быстро найти конкретный endpoint, используйте панель Search (Ctrl+F / Cmd+F во вкладке Network) и ищите по фрагменту URL или имени endpoint’а.

Copy as cURL vs. Copy as Fetch

При клике правой кнопкой мыши по запросу вы получаете несколько вариантов копирования. Два наиболее полезных — это Copy as cURL и Copy as fetch.

Copy as cURL

Это наиболее широко поддерживаемая опция в Chrome, Edge и Firefox. Она создаёт shell-команду, которую можно вставить непосредственно в терминал или импортировать в инструменты вроде Postman или Insomnia.

curl 'https://api.example.com/users' \
  -H 'Authorization: Bearer eyJhbGci...' \
  -H 'Content-Type: application/json' \
  --data-raw '{"page":1}'

Лучше всего подходит для: тестирования в терминале, передачи backend-разработчикам, импорта в API-клиенты или создания багрепортов с воспроизводимым запросом.

Copy as Fetch

Эта опция выводит JavaScript-вызов fetch(), который можно вставить непосредственно в консоль браузера или Node.js-скрипт.

fetch("https://api.example.com/users", {
  method: "POST",
  headers: {
    "Authorization": "Bearer eyJhbGci...",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ page: 1 })
});

Лучше всего подходит для: быстрого тестирования в консоли, воспроизведения проблем в JavaScript-окружениях или создания шаблонов fetch-вызовов в вашем коде.

Chrome и Edge также предлагают Copy as Node.js fetch и Copy as PowerShell для специфичных рабочих процессов в разных окружениях.

Когда скопированные запросы не воспроизводятся успешно

Копирование запроса фиксирует его состояние в конкретный момент времени, включая session-куки, токены авторизации и CSRF-заголовки. Воспроизведение позже может не сработать по нескольким причинам:

Истёкшие токены или сессии — JWT и session-куки имеют ограниченное время жизни (TTL). Скопированный час назад запрос может вернуть ошибку 401.
Привязанная к куки аутентификация — Некоторые процессы авторизации полагаются на HttpOnly-куки, которые не полностью видны в скопированном выводе.
Последовательность запросов — Некоторые API требуют предварительного запроса (например, получение CSRF-токена) перед тем, как целевой вызов будет успешным.

Если воспроизведённый запрос неожиданно не срабатывает, в первую очередь проверьте заголовки авторизации.

Экспорт нескольких запросов: HAR-файлы

Чтобы захватить и экспортировать несколько запросов одновременно, используйте опцию экспорта HAR во вкладке Network. В текущих версиях Chrome и Edge экспорт HAR по умолчанию очищается и может исключать чувствительные заголовки, такие как куки и данные авторизации, если вы явно не включите экспорт с конфиденциальными данными. Полученный .har-файл (в формате JSON) можно импортировать в инструменты вроде Postman или Insomnia, или обработать с помощью инструментов вроде jq для массового извлечения URL и payload’ов.

Замечание о безопасности

Скопированные запросы часто содержат конфиденциальные данные: токены авторизации, session-куки, API-ключи и тела запросов. Перед тем как поделиться cURL-командой или HAR-файлом с коллегой или в багрепорте, очистите их — замените реальные токены на плейсхолдеры вроде <TOKEN> и удалите любые персональные данные из payload’а.

Заключение

Копирование API-запросов из вкладки Network — это один из наиболее практичных приёмов отладки в арсенале frontend-разработчика. Используйте Copy as cURL, когда нужна переносимость и совместимость с инструментами. Используйте Copy as fetch, когда остаётесь в JavaScript-контексте. В любом случае вы в считанных секундах получите воспроизводимый, проверяемый запрос.

Часто задаваемые вопросы

Да, но только если вы включили Preserve log до того, как произошла навигация. Без этой опции вкладка Network очищает все записи при каждой загрузке страницы или редиректе. Возьмите за привычку включать Preserve log перед воспроизведением проблем, связанных с редиректами или полной перезагрузкой страницы.

Наиболее вероятная причина — истёкший токен аутентификации или session-куки. Скопированные запросы фиксируют учётные данные в том виде, в котором они существовали в тот момент. Если JWT или сессия с тех пор истекли, сервер отклонит запрос. Копируйте и воспроизводите запрос оперативно или обновите токен перед повторной попыткой.

Copy as cURL генерирует shell-команду, подходящую для терминалов и API-клиентов вроде Postman или Insomnia. Copy as fetch создаёт JavaScript fetch-вызов, который можно запустить в консоли браузера или Node.js-скрипте. Выбирайте cURL для переносимости между инструментами и командами, а fetch — для отладки на основе JavaScript.

HAR-файлы захватывают полные данные запросов и ответов, включая токены авторизации, куки и тела запросов. Они могут раскрыть конфиденциальную информацию при передаче без проверки. Всегда проверяйте содержимое файла и редактируйте учётные данные, API-ключи и персональные данные перед тем, как прикрепить HAR-файл к любому отчёту или сообщению.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.