Прежде чем писать свой первый запрос, посмотрим на чужие. В каждой вкладке браузера их летит десятки — и DevTools показывает их всех с подробностями. Это лучший способ закрепить теорию: открыли любую страницу — и сразу видны методы, статусы, заголовки, тела.

Как открыть Network

Откройте любой сайт. В Chrome или Edge нажмите F12 (либо правый клик → «Просмотреть код»), перейдите на вкладку Network. В Firefox — то же самое, но вкладка называется «Сеть». В Safari нужно сначала включить меню «Разработка» в настройках, потом открыть Web Inspector.

Если вкладка Network открылась пустой — обновите страницу (Ctrl/Cmd + R). В нижней части появится список запросов, которые сделала страница при загрузке.

Вкладка Network в Chrome DevTools — список API-запросов с методами, статусами и таймингами

Что в списке

Каждая строка — один HTTP-запрос. Колонки обычно такие:

  • Name — путь запроса. Можно увидеть posts, user.json, main.css, logo.png.
  • Status — статус-код ответа. Зелёный 200, оранжевый 304, красный 4xx/5xx.
  • Type — тип ресурса: document, script, stylesheet, image, fetch/xhr (для API-запросов).
  • Initiator — кто инициировал запрос: HTML-парсер, конкретная строка JS-кода.
  • Size — размер ответа. Если ответ пришёл из кэша, пишет (disk cache) или (memory cache).
  • Time — сколько занял запрос от отправки до получения ответа.

Фильтры

Вверху панели — набор переключателей: All / XHR / JS / CSS / Img / Media / Font / Doc / WS / Other. Для нас сейчас интересен Fetch/XHR — он оставит только API-запросы и спрячет загрузку картинок, шрифтов и скриптов. Откройте Twitter, Wikipedia, GitHub — почти на любой современной странице после клика по этому фильтру останется список симпатичных JSON-запросов.

DevTools → Network с фильтром Fetch/XHR на загруженной странице

Рядом есть поиск по имени и кнопки Preserve log (сохранять записи между переходами) и Disable cache (имитировать первую загрузку, без кэша).

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

Клик по строке открывает справа панель с вкладками. Самые важные:

  • Headers — стартовая строка запроса и ответа, плюс все заголовки с обеих сторон. Здесь видно URL, метод, статус, Content-Type, Authorization, всё-всё.
  • Payload (или Request) — тело запроса. Появляется для POST/PUT/PATCH. В этой вкладке видно, что именно отправилось — query-параметры в одном разделе, тело в другом.
  • Preview — красиво отрендеренный ответ. Для JSON — раскладной интерактивный объект, в который можно тыкать. Для HTML — рендер. Очень удобно для просмотра.
  • Response — сырое тело ответа как есть. Полезно, когда нужно скопировать JSON.
  • Initiator — стек вызовов, кто запустил запрос. Помогает найти источник запроса в коде.
  • Timing — разбивка тайминга по фазам: DNS, TCP, TLS, ожидание ответа, скачивание. Помогает понять, где запрос тормозит.

Панель Headers в DevTools: General-блок с URL и статусом, Response Headers, Request Headers одного запроса

Полезные действия правым кликом

Правый клик на запросе открывает контекстное меню. Из полезного:

  • Copy > Copy as fetch — копирует JS-код fetch(...), который воспроизводит этот запрос. Можно вставить в консоль и выполнить.
  • Copy > Copy as cURL — то же, но для терминальной утилиты curl. Удобно отправлять разработчикам или повторять из CLI.
  • Block request URL — временно блокирует этот URL, чтобы посмотреть, как сайт справится без этих данных. Хороший способ проверить обработку ошибок.

Маленькое упражнение

Откройте сейчас новую вкладку, зайдите, например, на Wikipedia или GitHub. Откройте DevTools → Network. Поставьте фильтр Fetch/XHR. Кликните по странице, перейдите на что-нибудь. Найдите хотя бы один API-запрос, посмотрите на:

  • его URL — есть ли там query-параметры? похож ли путь на REST?
  • метод и статус — что именно ушло и с каким кодом вернулось?
  • тело ответа в Preview — что это за данные?

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

Теперь — собственный первый запрос.