Перейти к содержимому

Панель

Панель живёт на /__vkma/ твоего dev-сервера (адрес печатается при старте) или открывается кнопкой FAB прямо на странице приложения. Это одна и та же SPA: светлая и тёмная темы следуют за системой, переключатель — в шапке. Три раздела — Timeline, Execute, Clients.

Журнал всего трафика моста в модели запрос/ответ/событие:

  • Запрос — строка с именем send’а и превью полезной нагрузки; внутри группы — парный ответ с длительностью round-trip и меткой ok/error.
  • Событие — unsolicited-события VK (например VKWebAppUpdateConfig) стоят отдельными строками.

Ряд разворачивается в сворачиваемое JSON-дерево с подсветкой типов, превью свёрнутых узлов и копированием. Внутренний транспортный шум (vk-connect) в журнал не попадает.

Над журналом — строка фильтров:

  • поиск по имени события;
  • переключатель All / Requests / Events;
  • селектор клиента (появляется, когда подключено больше одного);
  • пауза — вьюха замирает на точке паузы, новые события буферизуются и показываются счётчиком;
  • очистка — лента пустеет, новые события продолжают поступать.

Отдельный механизм — игнорируемые события: шум платформы по умолчанию не попадает в ленту (VKWebAppScrollTop, VKWebAppResizeWindow, SetSupportedHandlers, VKWebAppUpdateInsets, VKWebAppUpdateConfig, VKWebAppUpdateInfo). У каждого ряда есть действие «Ignore <имя>» — событие скрывается сразу и дальше (запрос вместе с парным ответом); редактор полного списка открывается из строки фильтров: добавляй имена, возвращай дефолтные тумблером или отключи фильтр целиком глазом.

История хранится на dev-сервере — последние 500 событий. Открой панель позже старта приложения: она проиграет буфер. Перезагрузка страницы приложения начинает новую сессию — история этого клиента сбрасывается на всех поверхностях.

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

  1. Выбери целевого клиента (в standalone-панели; во встроенной он закреплён).
  2. Начни печатать имя события — автодополнение предлагает каталог моста и имена, уже виденные в сессии. Выбор события из каталога подставляет заготовку params.
  3. Params — JSON с живой валидацией; отправка неактивна, пока JSON невалиден.

Результат приходит туда же: Response (ok) или Error response — полезной нагрузкой, Timeout — если за 60 секунд никто не ответил, No such client — если цель отключилась. Полезные нагрузки результата разворачиваются тем же JSON-деревом.

Каждый подключённый скрипт страницы — десктоп-таб, телефон в LAN, iframe, standalone — это карточка:

  • платформа, цветной короткий id и URL страницы (чувствительные query-параметры замаскированы);
  • User-Agent и время подключения («connected 5m ago»);
  • статус online/offline — офлайн-клиент приглушён, фокус на вкладке возвращает его онлайн;
  • launch params в сетке ключ-значение; чувствительные значения (sign, access_token, auth_key, sid, secret) размыты и нигде не подсвечиваются.

Офлайн-клиентов можно удалять по одному или кнопкой Remove offline — живых сервер не удалит, они перерегистрируются сами.

Панель, открытая из FAB, показывает только трафик своей страницы: цветной бейдж клиента в шапке, вкладка Clients скрыта, execute закреплён на этом клиенте. Чужой трафик в такую панель не приходит вовсе, а execute в чужого клиента вернёт forbidden. Отдельная вкладка /__vkma/ видит всё и переключается между клиентами фильтром.

Место самой кнопки меняется прямо из панели (контрол DevTools position): выбор сохраняется на origin dev-сервера и переживает перезапуски, начальное значение задаёт опция fabPosition плагина.