Breakpoints и Mock response

Во вкладке Network и в разделе Options → Network доступны два механизма перехвата запросов:

• Breakpoint — остановка запроса до отправки в сеть с возможностью изменить его параметры и затем продолжить выполнение;
• Mock response — возврат подготовленного ответа без обращения к серверу.

Оба механизма работают только для запросов, проходящих через fetch и XMLHttpRequest внутри текущей страницы.

Базовые ограничения перехвата (контекст страницы, CORS, scope перехвата и т.д.) описаны в Работа с запросами.

---

Breakpoints

Назначение

Breakpoint позволяет остановить исходящий запрос до его отправки.

Когда URL и метод совпадают с правилом:

• выполнение запроса приостанавливается;
• в панели становится доступно редактирование параметров;
• после подтверждения запрос отправляется уже с изменениями;
• либо выполнение можно отменить.

Фактически перехват происходит после того, как приложение сформировало запрос, но до вызова нативной отправки.

Что можно изменить

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

• HTTP-метод;
• URL (схема, хост, путь, query);
• заголовки;
• тело запроса.

После Apply запрос отправляется в сеть уже в изменённом виде.

Тело запроса: raw и form-data (breakpoint)

Для остановленного запроса редактор тела можно переключить в режим Raw (одно текстовое поле) или Form-data (строки по аналогии с таблицей в детализации Network).

Режим Form-data

В режиме Form-data каждая строка содержит:

• ключ;
• тип значения (Text или File);
• значение.

Для строк типа File кнопка Browse позволяет выбрать файл с диска. Выбранный файл добавляется в черновик обычно как data:-URI.

Источники файлов для File-полей

Для строк типа File в выпадающем списке доступны:

• оригинал — вернуть файл, который уже был в этом запросе (эквивалентно исходному (binary), пока для текущей паузы доступен исходный FormData);
• записи Saved Files в Options → General;
• обои (фоновые медиа) из Customize — то же общее хранилище медиа, что и оформление панели.

Автосохранение выбранных файлов

Параметр Auto-save new files selected via Browse (Options → General → Saved Files) управляет автосохранением файлов, выбранных в редакторе.

Если опция включена:

• файл копируется в Saved Files;
• сохранение происходит только если ещё нет файла с той же парой имя + размер.

Ограничения хранения совпадают с правилами раздела Персонализация:

• в расширении используется IndexedDB;
• в standalone действует лимит 30 МБ.

Как данные применяются после продолжения запроса

После продолжения запроса внедрённый скрипт собирает новый объект FormData:

• текстовые значения добавляются как обычные поля;
• значения в формате data: преобразуются в файловые части;
• (binary) восстанавливает исходный File из сохранённого запроса, пока исходные данные ещё доступны.

Ограничения восстановления файлов

Если значение осталось в виде:

• blob: URL;
• ссылки формата __fileId:…

страница не может восстановить содержимое файла самостоятельно.

В этом случае для такой части отправляется пустая заглушка, а в консоли появляется предупреждение.

Чтобы избежать этого, выберите файл заново через Browse или укажите сохранённый файл из списка.

Где настраивать

• Network — создание и изменение breakpoint на основе конкретного запроса.
• Options → Network → Breakpoints Requests — изменение существующего списка правил;

Особенности работы

При совпадении запроса с активным правилом breakpoint интерфейс автоматически переводится в режим редактирования:

• открывается карточка сработавшего breakpoint;
• при необходимости выполняется переход во вкладку Network;
• свернутый iframe инспектора автоматически разворачивается.

До подтверждения или отмены выполнение запроса остаётся приостановленным.

Mock response

Назначение

Mock response полностью заменяет сетевой запрос локальным ответом.

При совпадении правила:

• запрос в сеть не отправляется;
• создаётся синтетический ответ;
• страница получает его как обычный HTTP ответ.

Что задаётся в mock

Правило может содержать:

• status и statusText;
• headers;
• body;
• delay перед возвратом ответа.

Где настраивать

• Network — создание и изменение mock на основе конкретного запроса.
• Options → Network → Mocks Responses — изменение существующего списка правил;

Особенности работы

Если сработал mock:

• реальный запрос на сервер не выполняется;
• breakpoint для этого вызова уже не применяется.

Порядок проверки:

1. сначала mock;
2. если mock не подошёл — breakpoint;
3. затем обычный сетевой запрос.

То есть mock имеет приоритет над breakpoint.

---

Сравнение breakpoint и mock

Механизм	Отправка в сеть	Можно изменить запрос	Можно изменить ответ
Breakpoint	Да	Да	Нет
Mock response	Нет	Нет	Да

---

Ограничения

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

• fetch
• XMLHttpRequest

Не перехватываются:

• загрузка ресурсов через <img>, <script>, <link>;
• Service Worker вне текущего interception layer;
• нативные сетевые вызовы браузера вне JS-контекста страницы.

Запросы OPTIONS (preflight) также не участвуют в перехвате.

---

Сравнение с Charles Proxy

Charles (и аналогичные системные / внешние прокси: Fiddler, mitmproxy и др.) встаёт между клиентом и сервером на уровне ОС или отдельного приложения:

• видит трафик не только из браузера, но и из мобильных приложений, CLI, других программ (если направить их через прокси);
• для HTTPS обычно нужна установка доверенного сертификата и SSL Proxying — расшифровка TLS на прокси;
• Breakpoint и Map Local / Remote применяются ко всем подходящим запросам в этом канале.

Vue Inspector работает внутри вкладки браузера: подменяются глобальные fetch и XMLHttpRequest.

Аспект	Charles (типично)	Vue Inspector
Уровень	Прокси / вне процесса браузера	JavaScript на странице
Охват	Много клиентов, весь HTTP(S) через прокси	Только этот документ: вызовы fetch и XHR
HTTPS	Свой корень доверия, разбор TLS	Без отдельного «взлома» TLS — приложение и так отдаёт ответы в свой JS
Service Worker, нативные запросы	Можно перехватывать на пути	Не перехватываются этим механизмом
Удобство для SPA в браузере	Нужна настройка прокси и сертификатов	Включил правила в инспекторе — работает на текущем сайте

Итог: по смыслу Breakpoint и Mock в Inspector близки к Charles (остановить / подменить ответ), но по месту действия это не сетевой прокси, а инструмент разработчика веб-страницы на том же origin-жизненном цикле, что и ваше Vue‑приложение.

См. также

• Работа с запросами
• Экспорт коллекций