rxjs-spy-mcp

Prototipo experimental de depuración de RxJS en tiempo de ejecución para Chrome DevTools MCP.

Este repositorio moderniza la idea detrás de rxjs-spy de Nicholas Jamieson para un flujo de trabajo de depuración asistido por IA: los eventos de RxJS en tiempo de ejecución se capturan en un registro estructurado en el heap, se exponen a través de una pequeña API de depuración y se hacen legibles para los agentes de Chrome DevTools MCP.

Nota sobre el colaborador principal

ChatGPT es el principal colaborador de este proyecto.

La arquitectura, la implementación inicial en TypeScript, los operadores de depuración personalizados de RxJS, la demo de MVU, el registro de heap con viaje en el tiempo y el puente de Chrome DevTools MCP se generaron y refinaron con ChatGPT a partir de los requisitos de depuración de RxJS del usuario.

Related MCP server: Kaboom Browser AI Devtools MCP

Objetivo del proyecto

El objetivo no es reemplazar rxjs-spy por completo todavía. Esta es una primera implementación experimental de un modelo de depuración de RxJS compatible con MCP.

El prototipo actual se centra en:

• operadores de depuración de RxJS tipados

• una demo de MVU tipo Elm

• historial de estado con viaje en el tiempo

• inspección pasiva basada en el heap

• instantáneas seguras y redacción

• descubrimiento de herramientas de terceros de Chrome DevTools

• marcos de depuración legibles por IA

La dirección a largo plazo es un runtime moderno de rxjs-spy-mcp que pueda inspeccionar:

• flujos etiquetados

• notificaciones: next, error, complete

• suscripciones y desuscripciones

• transiciones de MVU: Msg -> Model

• comportamiento interno de las suscripciones de switchMap, mergeMap, concatMap, exhaustMap

• trazas de temporización sensibles al scheduler

Modelo mental

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

El depurador convierte los eventos asíncronos rápidos de RxJS en marcos de depuración persistentes:

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

Instalación

npm install

Ejecutar la demo

npm run dev

Abre la URL local de Vite que se imprime en el terminal, normalmente:

http://127.0.0.1:5173

Ejemplo: uso manual de la función de depuración

1. Inicia la aplicación con npm run dev.

2. Abre la consola de DevTools del navegador.

3. La aplicación ya debería haber registrado una transición inicial INIT.

4. Inspecciona los flujos rastreados:

window.__RXJS_SPY_MCP__.listStreams()

5. Inspecciona el flujo de estado principal del MVU:

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

6. Lee solo los marcos de la línea de tiempo:

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

7. Lee la historia de ejecución compacta:

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

Como tabla:

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

La salida de la historia convierte los marcos de depuración sin procesar en filas como:

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. Escribe una consulta de búsqueda, por ejemplo rxjs, y pulsa Buscar.

9. Simula un efecto asíncrono fallido escribiendo:

error

Después pulsa Buscar.

10. Inspecciona de nuevo la historia:

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

Deberías ver una secuencia similar a:

INIT
SET_QUERY
START_SEARCH
SEARCH_FAILURE

Cada marco mvu-transition almacena:

{
  action: Msg,
  resultingState: Model
}

Esto proporciona una historia de ejecución legible:

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.

Si getTimeline('main-app-state', 20) devuelve []

Ejecuta primero esto:

window.__RXJS_SPY_MCP__.diagnose()

Después ejecuta:

window.__RXJS_SPY_MCP__.listStreams()

Lo esperado después de una carga de página nueva:

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

Comprueba también que usas el nombre global exacto con dos guiones bajos antes y después de RXJS_SPY_MCP:

window.__RXJS_SPY_MCP__

no:

window._RXJS_SPY_MCP_

Si la línea de tiempo sigue vacía:

git pull
npm install
npm run dev

Entonces fuerza la recarga de la pestaña del navegador y ejecuta:

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

La implementación actual usa un BehaviorSubject<Msg> con semilla para la fuente de mensajes del MVU, por lo que una transición INIT debería registrarse inmediatamente cuando runtime.appState$ recibe una suscripción en main.ts.

Ejemplo: viaje en el tiempo visual

El panel de depuración de la derecha muestra la línea de tiempo del heap.

Haz clic en cualquier marco para rebobinar visualmente la interfaz hasta el resultingState almacenado en ese marco.

También puedes saltar desde la consola de DevTools:

window.jumpToStep(2)

Importante: actualmente esto es un rebobinado visual, no una restauración completa del estado basada en reproducción. El acumulador scan interno no se rebobina. Una versión futura puede añadir una verdadera reproducción de eventos.

Ejemplo: uso de los operadores personalizados

Inspección genérica de flujos

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();

Después inspecciónalo en la consola:

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

Inspección de transiciones de 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 })
);

Este es el caso de uso clave para la enseñanza/depuración:

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

Ejemplo: flujo de trabajo con Chrome DevTools MCP

Este proyecto registra un puente de herramientas de desarrollador de terceros de Chrome DevTools a través del evento devtoolstooldiscovery a nivel de página.

Cuando Chrome DevTools MCP está conectado con la categoría experimental de herramientas de terceros habilitada, un agente de IA puede descubrir herramientas como:

rxjs_list_streams
rxjs_inspect_stream
rxjs_get_timeline
rxjs_story

Un prompt típico para el agente de IA:

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.

Comportamiento esperado del agente:

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.

Un enfoque MCP alternativo es la evaluación de scripts:

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

Correcciones aplicadas al prototipo original

Limitaciones actuales

Este es un prototipo experimental. Todavía no implementa el comportamiento completo de rxjs-spy.

Trabajo pendiente o futuro:

• API de etiquetado sin monkey-patch comparable a las etiquetas de rxjs-spy

• grafo global de suscripciones de Observables

• grafo de suscripciones padre/hijo

• visualización de operadores de orden superior

• operadores de depuración dedicados para switchMap, mergeMap, concatMap, exhaustMap

• trazas sensibles al scheduler para asyncScheduler, animationFrameScheduler, tiempo virtual y deriva

• verdadero viaje en el tiempo basado en reproducción

• pruebas

• publicación de paquetes

Notas de seguridad

El registro de depuración expone el estado del runtime en window.__RXJS_SPY_MCP__ en modo desarrollo. No expongas datos sensibles de producción a través de los flujos de depuración.

La capa de instantáneas redacta claves comunes tipo secreto y limita el tamaño de la carga útil serializada, pero esto no es una barrera de seguridad completa.

Licencia

MIT