rxjs-spy-mcp

Экспериментальный прототип отладки RxJS во время выполнения для Chrome DevTools MCP.

Этот репозиторий развивает идею, лежащую в основе rxjs-spy Николаса Джеймисона, для рабочего процесса отладки с помощью ИИ: события RxJS во время выполнения захватываются в структурированный реестр кучи, предоставляются через небольшой отладочный API и становятся читаемыми для агентов Chrome DevTools MCP.

Примечание об основном авторе

ChatGPT является основным автором этого проекта.

Архитектура, стартовая реализация на TypeScript, пользовательские отладочные операторы RxJS, MVU-демо, реестр кучи с перемещением во времени и мост Chrome DevTools MCP были созданы и доработаны с помощью ChatGPT на основе требований пользователя к отладке RxJS.

Related MCP server: Kaboom Browser AI Devtools MCP

Цель проекта

Цель пока не состоит в том, чтобы полностью заменить rxjs-spy. Это первая экспериментальная реализация модели отладки RxJS, совместимой с MCP.

Текущий прототип сосредоточен на:

• типизированные отладочные операторы RxJS

• демо MVU в стиле Elm

• история состояний с перемещением во времени

• пассивная инспекция на основе кучи

• безопасное создание снимков и редактирование конфиденциальных данных

• обнаружение сторонних инструментов Chrome DevTools

• отладочные кадры, читаемые ИИ

Долгосрочное направление — современный рантайм rxjs-spy-mcp, который может инспектировать:

• тегированные потоки

• уведомления: next, error, complete

• подписки и отписки

• переходы MVU: Msg -> Model

• поведение внутренних подписок из switchMap, mergeMap, concatMap, exhaustMap

• трассировки времени с учётом планировщика

Ментальная модель

Observable      = static dataflow description
Subscription    = runtime execution
Notification    = runtime event: next | error | complete
Scheduler       = runtime time policy
Heap registry   = durable debug memory
Chrome MCP      = AI-readable inspection bridge

Отладчик превращает быстрые асинхронные события RxJS в долговечные отладочные кадры:

Msg / next / error / complete / unsubscribe
        ↓
spyOnHeap / spyOnMvuLoop
        ↓
window.__RXJS_SPY_MCP__
        ↓
Chrome DevTools MCP / console / debug panel

Установка

npm install

Запуск демо

npm run dev

Откройте локальный URL Vite, выведенный в терминале, обычно:

http://127.0.0.1:5173

Пример: использование отладочной функции вручную

1. Запустите приложение с помощью npm run dev.

2. Откройте консоль DevTools в браузере.

3. Приложение уже должно было записать начальный переход INIT.

4. Изучите отслеживаемые потоки:

window.__RXJS_SPY_MCP__.listStreams()

5. Изучите основной поток состояния MVU:

window.__RXJS_SPY_MCP__.inspectStream('main-app-state')

6. Прочитайте только кадры временной шкалы:

window.__RXJS_SPY_MCP__.getTimeline('main-app-state', 10)

7. Прочитайте компактную историю выполнения:

window.__RXJS_SPY_MCP__.story('main-app-state', 20)

В виде таблицы:

console.table(window.__RXJS_SPY_MCP__.story('main-app-state', 20))

Вывод истории превращает сырые отладочные кадры в строки, например:

INIT -> query="", active="", loading=false, results=0
SET_QUERY -> query="rxjs", active="", loading=false, results=0
START_SEARCH -> query="rxjs", active="rxjs", loading=true, results=0
SEARCH_SUCCESS -> query="rxjs", active="rxjs", loading=false, results=3

8. Введите поисковый запрос, например rxjs, и нажмите Search.

9. Имитируйте сбойный асинхронный эффект, введя:

error

Затем нажмите Search.

10. Снова изучите историю:

console.table(window.__RXJS_SPY_MCP__.story('main-app-state', 20))

Вы должны увидеть последовательность, похожую на:

INIT
SET_QUERY
START_SEARCH
SEARCH_FAILURE

Каждый кадр mvu-transition хранит:

{
  action: Msg,
  resultingState: Model
}

Это даёт читаемую историю выполнения:

The user changed the query.
A search request started.
The async effect failed.
The model moved into an error state.
The view rendered the error.

Если getTimeline('main-app-state', 20) возвращает []

Сначала выполните:

window.__RXJS_SPY_MCP__.diagnose()

Затем выполните:

window.__RXJS_SPY_MCP__.listStreams()

Ожидаемый результат после свежей загрузки страницы:

streamCount >= 1
streamTags includes "main-app-state"
mainStateHistorySize >= 1

Также проверьте, что вы используете точное глобальное имя с двумя подчёркиваниями до и после RXJS_SPY_MCP:

window.__RXJS_SPY_MCP__

а не:

window._RXJS_SPY_MCP_

Если временная шкала всё ещё пуста:

git pull
npm install
npm run dev

Тогда выполните жёсткое обновление вкладки браузера и запустите:

window.__RXJS_SPY_MCP__.diagnose()
window.__RXJS_SPY_MCP__.getTimeline('main-app-state', 20)

Текущая реализация использует инициализированный BehaviorSubject<Msg> в качестве источника сообщений MVU, поэтому переход INIT должен записываться сразу при подписке на runtime.appState$ в main.ts.

Пример: визуальное перемещение во времени

Панель отладки справа показывает временную шкалу кучи.

Нажмите на любой кадр, чтобы визуально перемотать интерфейс к resultingState, сохранённому в этом кадре.

Вы также можете перейти из консоли DevTools:

window.jumpToStep(2)

Важно: сейчас это визуальная перемотка, а не полное восстановление состояния на основе воспроизведения. Внутренний аккумулятор scan не перематывается. Будущая версия может добавить настоящее воспроизведение событий.

Пример: использование пользовательских операторов

Инспекция общего потока

import { interval, map, take } from 'rxjs';
import { spyOnHeap } from './debug/operators';

const counter$ = interval(1000).pipe(
  take(5),
  map(n => ({ count: n })),
  spyOnHeap('counter-stream', { maxFrames: 10 })
);

counter$.subscribe();

Затем изучите его в консоли:

window.__RXJS_SPY_MCP__.inspectStream('counter-stream')

Инспекция переходов MVU

const msg$ = new BehaviorSubject<Msg>({ type: 'INIT' });

const transition$ = msg$.pipe(
  scan(
    (acc, msg) => ({ msg, model: update(acc.model, msg) }),
    { msg: { type: 'INIT' }, model: initialModel }
  ),
  spyOnMvuLoop('main-app-state', { maxFrames: 80 })
);

Это ключевой учебный/отладочный сценарий использования:

Msg flows in over time.
update calculates the next Model.
spyOnMvuLoop stores Msg + Model as a debug frame.

Пример: рабочий процесс Chrome DevTools MCP

Этот проект регистрирует мост сторонних инструментов разработчика Chrome DevTools через событие devtoolstooldiscovery на уровне страницы.

Когда Chrome DevTools MCP подключён с включённой экспериментальной категорией сторонних инструментов, ИИ-агент может обнаруживать такие инструменты, как:

rxjs_list_streams
rxjs_inspect_stream
rxjs_get_timeline
rxjs_story

Типичный запрос для ИИ-агента:

Inspect the active browser tab with Chrome DevTools MCP. Use the rxjs-spy-mcp tools to list RxJS streams, read the main-app-state story, and explain why the latest search failed.

Ожидаемое поведение агента:

1. list_3p_developer_tools
2. execute_3p_developer_tool: rxjs_list_streams
3. execute_3p_developer_tool: rxjs_story { tag: 'main-app-state', limit: 20 }
4. Explain the Msg -> Model transition that caused the bad state.

Запасной подход MCP — оценка скрипта:

() => globalThis.__RXJS_SPY_MCP__.story('main-app-state', 20)

Исправления, применённые к исходному прототипу

Текущие ограничения

Это экспериментальный прототип. Он пока не реализует полное поведение rxjs-spy.

Отсутствующая или будущая работа:

• API тегирования без monkey-patch, сопоставимый с тегами rxjs-spy

• глобальный граф подписок Observable

• граф родительских/дочерних подписок

• визуализация операторов высшего порядка

• выделенные отладочные операторы для switchMap, mergeMap, concatMap, exhaustMap

• трассировки с учётом планировщика для asyncScheduler, animationFrameScheduler, виртуального времени и дрейфа

• настоящее перемещение во времени на основе воспроизведения

• тесты

• публикация пакета

Примечания по безопасности

Отладочный реестр открывает состояние выполнения на window.__RXJS_SPY_MCP__ в режиме разработки. Не передавайте чувствительные производственные данные через отладочные потоки.

Слой снимков редактирует распространённые ключи, похожие на секреты, и ограничивает размер сериализованных данных, но это не полная граница безопасности.

Лицензия

MIT