Работа с запросами

Раздел Network предназначен для просмотра сетевой активности приложения в runtime.

Верхняя панель управления

Поиск по запросам

Поле поиска поддерживает несколько режимов. Активный критерий выбирается в панели Search by рядом с полем ввода. Те же параметры доступны в разделе Options соответствующей вкладки, где можно заранее настроить используемые типы поиска.

Режим	Описание
Status code	Поиск по коду ответа
Method	Поиск по HTTP-методу
Path	Поиск по URL или части пути
Name	Поиск по имени запроса
Key	Поиск по ключам в JSON тел запроса/ответа
Value	Поиск по значениям в JSON тел запроса/ответа

Для режима поиска действует минимальная длина запроса (по умолчанию 2 символа; порог настраивается в параметрах поиска инспектора).

Частичное и точное совпадение. Если запрос не обёрнут в кавычки, по всем включённым режимам используется подстрока (без учёта регистра для текстовых полей) — по смыслу близко к LIKE '%текст%'. Точное совпадение со всей строкой целиком включается только когда весь текст в поле поиска обёрнут в двойные кавычки "...".

Для режимов поиска по ключам и значениям тело должно успешно распознаваться как JSON; иначе индекс для поиска по полям может быть пустым.

Индикаторы состояния

Справа в панели Network выводятся индикаторы состояния. Часть из них кликабельна и ведёт либо в соответствующий раздел Options, либо к нужной записи в журнале.

Элемент	Назначение
N или N/M	Число записей после фильтра; при активном поиске через дробь показывается общее число запросов в журнале.
pending	Количество запросов в состоянии ожидания (обмен ещё не завершён).
bp (подсвеченный, «пульс»)	Есть breakpoint-запросы, ожидающие действия в UI. Клик выделяет первую такую запись в списке.
bp (обычный янтарный)	Число активных breakpoint-правил. Клик открывает Options со списком всех breakpoints.
mock	Число активных правил mock response. Клик открывает Options → Network → Mock Responses.
Paused	Остановка записи трафика в журнал.

Управление журналом

Pause

Для временной остановки записи в список используется кнопка Pause (в интерфейсе может подписываться как приостановка записи).

В режиме паузы:

• новые запросы не попадают в список Vue Inspector Network до нажатия возобновления;
• перехватчик снимается: страница снова вызывает родные fetch и XMLHttpRequest, без подмены из сценария инспектора.

Из этого следует:

• во встроенной вкладке Network инструментов разработчика браузера те же запросы отображаются с оригинальным инициатором (цепочка вызовов из кода приложения), а не из файла внедрённого сценария (injected.js и т.п.);
• пока пауза включена, не действуют механизмы, завязанные на перехват: Mock response и Breakpoint (см. подмену трафика). После Resume перехват и эти правила снова включаются.

Clear

Для удаления накопленных данных используется кнопка очистки рядом с Pause.

После очистки список запросов полностью сбрасывается.

Export Collection

Export Collection экспортирует текущий отфильтрованный список запросов. (см. Экспорт коллекций)

Рабочая область

Список запросов

В левой части интерфейса отображается список полученных запросов.

Для каждого запроса доступны основные параметры:

• Name / Path — имя или путь запроса;
• Status — HTTP-статус ответа;
• Time — время выполнения;
• Size — размер получённых данных;

Набор отображаемых колонок можно изменять.

При необходимости отдельные столбцы можно скрыть или вернуть обратно через настройки таблицы.

Детализация запроса

Каждый запрос в списке можно открыть для просмотра подробной информации.

В детализации доступны основные данные обмена:

• Headers — заголовки запроса и ответа;
• Params — параметры строки запроса (query), разобранные по парам ключ/значение;
• Request — тело запроса (payload);
• Response — полученный ответ;

Если тело захвачено как структурированное multipart/form-data, вкладка Request показывает таблицу только для чтения: ключ поля, тип Text или File, значение (текст как есть; для файлов — имя и размер или (binary), если исходные байты не представлены как читаемый текст). Copy копирует видимый текст или имя файла — в зависимости от строки.

Заголовок X-Request-Id (и ряд других «служебных») в интерфейсе выделяется, если он присутствует в переданных с страницы данных.

Ограничения отображения

Ограничения чтения данных

Vue Inspector показывает только те заголовки и полезную нагрузку, которые доступны JavaScript-коду страницы после выполнения запроса.

Для cross-origin ответов браузер по правилам CORS отдаёт скрипту не все заголовки: часть видна только если сервер перечислил их в Access-Control-Expose-Headers.
Например, если ответ содержит X-Request-Id, но без строки вида:

Access-Control-Expose-Headers: X-Request-Id

(или без общего списка, куда этот заголовок входит), то в response.headers для страницы его не будет — и в Network он тоже не отобразится, хотя в «родной» вкладке Network браузера заголовок виден.

На same-origin запросах такие заголовки обычно доступны, если их не скрывает другая политика.

Тела ответов большого размера могут обрезаться (в коде лимит порядка 20 МБ на захваченный текст); для ряда бинарных типов содержимое намеренно не сериализуется в текст для таба.

Ограничение объёма хранения

Максимальное количество одновременно хранимых запросов — 500.

После достижения лимита новые записи начинают заменять самые старые, сохраняя наиболее актуальную сетевую активность.

Принципы работы

Когда начинается перехват

Сетевой модуль входит в тот же сценарий, что и остальной Vue Inspector, и внедряется в контекст вкладки вместе с ним — при открытии оверлея инспектора на странице или при подключении панели через Chrome DevTools. Пока этот сценарий не загружен, перехват fetch / XMLHttpRequest не выполняется.

Буфер запросов хранится в контексте страницы после загрузки сценария; вкладка Network отображает эти данные, когда панель инспектора подключена. Пока страница не перезагружалась, накопленная история доступна и при позднем открытии Network (с учётом лимита 500 записей см. выше).

Что попадает в мониторинг

Инструмент перехватывает вызовы, идущие через стандартные браузерные API:

• fetch
• XMLHttpRequest (XHR)

В список не попадают, среди прочего:

• запросы другого типа (navigator.sendBeacon, EventSource, WebSocket, загрузка ресурсов через <img> / <script> без XHR);
• префлайт OPTIONS (они намеренно отфильтрованы);
• обращения к URL расширений (chrome-extension://, moz-extension:// и аналоги).

Для каждой записи в данных указывается инициатор: fetch или xhr.

Как устроен перехват

Поведение отличается от вкладки Network в инструментах разработчика браузера: там виден полный обмен на уровне движка, а Vue Inspector работает внутри страницы — подменяет глобальные fetch и методы XHR, вызывает «настоящий» сетевой запрос, затем читает то, что странице позволено увидеть через объект ответа (заголовки, тело, статус, длительность).

Упрощённо идея для fetch такая:

// Иллюстрация: после реального запроса заголовки читаются из response.headers.
// Набор имён здесь ограничен политикой браузера (в т.ч. CORS), а не «всеми» заголовками ответа.
window.fetch = async function patchedFetch(input, init) {
  const response = await originalFetch.call(window, input, init)
  const headersForUi = []
  response.headers.forEach((value, name) => {
    headersForUi.push({ name, value })
  })
  // … передача метаданных и тела в интерфейс инспектора …
  return response
}