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

Раздел 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	Остановка записи трафика в журнал.

Если правила breakpoint или mock response приостановлены глобально (см. ниже), чипы bp и mock по-прежнему показывают количество правил, но отображаются приглушённо — до повторного включения соответствующие правила не применяются.

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

Глобальное включение breakpoint и mock (панель Network)

Рядом с Pause (запись журнала) и очисткой списка на панели есть два значка, которые управляют всеми настроенными правилами каждого типа (без удаления из настроек):

Элемент	Вид (когда включено)	Смысл
Правила breakpoint	Иконка «пауза в круге» (янтарная, если правила включены)	Вкл.: активные правила могут останавливать совпадающие запросы. Клик: приостановить breakpoints — правила остаются в Options → Network → Breakpoints, но запросы не задерживаются, пока снова не включите. Подсказка: Breakpoints on (click to suspend) / Breakpoints suspended (click to enable).
Mock responses	Иконка shuffle (фиолетовая, если mock включены)	Вкл.: активные mock-правила могут подменять ответы. Клик: приостановить mock — правила остаются в Options → Network → Mock Responses, но выполняются обычные сетевые запросы. Подсказка: Mock responses on (click to suspend) / Mock responses suspended (click to enable).

Те же флаги задаются чекбоксами Enable breakpoint rules и Enable mock responses рядом со списками в Options → Network; изменение в одном месте отражается в другом.

Важно: приостановка правил — это не то же самое, что Pause (пауза записи). Пауза снимает перехватчик со страницы и останавливает пополнение журнала; глобальные переключатели только отключают обработку breakpoint или mock, пока перехват активен (если вы не включили паузу записи). Подробнее: подмена трафика.

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 запросах такие заголовки обычно доступны, если их не скрывает другая политика.

В расширении Vue Inspector для Chrome / Edge при включённом Advanced mode (режим захвата в Options → Network) заголовки запроса и ответа могут дополняться данными уровня браузера без ограничений «видимости для страницы». Подробности, закрепление заголовков, Header links и связанные настройки — в разделе Расширенный режим захвата (Advanced mode).

Тела ответов большого размера могут обрезаться (в коде лимит порядка 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
}