rxjs-spy-mcp

Experimenteller RxJS-Laufzeit-Debugging-Prototyp für Chrome DevTools MCP.

Dieses Repository modernisiert die Idee hinter Nicholas Jamiesons rxjs-spy für einen KI-gestützten Debugging-Workflow: RxJS-Laufzeitereignisse werden in einem strukturierten Heap-Registry erfasst, über eine kleine Debug-API zugänglich gemacht und für Chrome DevTools MCP-Agenten lesbar gemacht.

Hinweis zum Hauptbeitragenden

ChatGPT ist der Hauptbeitragende dieses Projekts.

Die Architektur, die TypeScript-Startimplementierung, die benutzerdefinierten RxJS-Debug-Operatoren, die MVU-Demo, das Time-Travel-Heap-Registry und die Chrome DevTools MCP-Brücke wurden mit ChatGPT aus den RxJS-Debugging-Anforderungen des Benutzers generiert und verfeinert.

Related MCP server: Kaboom Browser AI Devtools MCP

Projektziel

Das Ziel ist es, rxjs-spy noch nicht vollständig zu ersetzen. Dies ist eine erste experimentelle Implementierung eines MCP-freundlichen RxJS-Debugging-Modells.

Der aktuelle Prototyp konzentriert sich auf:

• typisierte RxJS-Debug-Operatoren

• eine Elm-ähnliche MVU-Demo

• Time-Travel-Zustandsverlauf

• passive heap-basierte Inspektion

• sicheres Snapshotting und Redaktion

• Chrome DevTools Third-Party-Tool-Erkennung

• KI-lesbare Debug-Frames

Die langfristige Richtung ist eine moderne rxjs-spy-mcp-Laufzeit, die Folgendes inspizieren kann:

• getaggte Streams

• Benachrichtigungen: next, error, complete

• Subscriptions und Unsubscriptions

• MVU-Übergänge: Msg -> Model

• Inner-Subscription-Verhalten von switchMap, mergeMap, concatMap, exhaustMap

• Scheduler-bewusste Timing-Traces

Mentales Modell

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

Der Debugger verwandelt schnelle asynchrone RxJS-Ereignisse in dauerhafte Debug-Frames:

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

Installation

npm install

Demo ausführen

npm run dev

Öffnen Sie die lokale Vite-URL, die im Terminal ausgegeben wird, normalerweise:

http://127.0.0.1:5173

Beispiel: Verwendung der Debug-Funktion manuell

1. Starten Sie die App mit npm run dev.

2. Öffnen Sie die DevTools-Konsole des Browsers.

3. Die App sollte bereits eine anfängliche INIT-Transition aufgezeichnet haben.

4. Inspizieren Sie die verfolgten Streams:

window.__RXJS_SPY_MCP__.listStreams()

5. Inspizieren Sie den Haupt-MVU-Zustandsstream:

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

6. Lesen Sie nur die Timeline-Frames:

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

7. Lesen Sie die kompakte Laufzeit-Story:

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

Als Tabelle:

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

Die Story-Ausgabe verwandelt rohe Debug-Frames in Zeilen wie:

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. Geben Sie eine Suchanfrage ein, zum Beispiel rxjs, und klicken Sie auf Suchen.

9. Simulieren Sie einen fehlschlagenden asynchronen Effekt, indem Sie Folgendes eingeben:

error

Klicken Sie dann auf Suchen.

10. Inspizieren Sie die Story erneut:

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

Sie sollten eine Sequenz ähnlich der folgenden sehen:

INIT
SET_QUERY
START_SEARCH
SEARCH_FAILURE

Jeder mvu-transition-Frame speichert:

{
  action: Msg,
  resultingState: Model
}

Dies ergibt eine lesbare Laufzeit-Story:

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.

Wenn getTimeline('main-app-state', 20) [] zurückgibt

Führen Sie zuerst Folgendes aus:

window.__RXJS_SPY_MCP__.diagnose()

Dann führen Sie Folgendes aus:

window.__RXJS_SPY_MCP__.listStreams()

Erwartet nach einem frischen Seitenaufruf:

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

Überprüfen Sie auch, dass Sie den exakten globalen Namen mit zwei Unterstrichen vor und nach RXJS_SPY_MCP verwenden:

window.__RXJS_SPY_MCP__

nicht:

window._RXJS_SPY_MCP_

Wenn die Timeline immer noch leer ist:

git pull
npm install
npm run dev

Dann aktualisieren Sie den Browser-Tab hart und führen Sie Folgendes aus:

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

Die aktuelle Implementierung verwendet ein geseedetes BehaviorSubject<Msg> als MVU-Nachrichtenquelle, sodass eine INIT-Transition sofort aufgezeichnet werden sollte, wenn runtime.appState$ in main.ts abonniert wird.

Beispiel: visuelles Time-Travel

Das Debug-Panel auf der rechten Seite zeigt die Heap-Timeline.

Klicken Sie auf einen beliebigen Frame, um die UI visuell auf den in diesem Frame gespeicherten resultingState zurückzuspulen.

Sie können auch aus der DevTools-Konsole springen:

window.jumpToStep(2)

Wichtig: Dies ist derzeit visuelles Zurückspulen, keine vollständige Replay-basierte Zustandswiederherstellung. Der interne scan-Akkumulator wird nicht zurückgespult. Eine zukünftige Version kann echtes Event-Replay hinzufügen.

Beispiel: Verwendung der benutzerdefinierten Operatoren

Generische Stream-Inspektion

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

Dann in der Konsole inspizieren:

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

MVU-Transition-Inspektion

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

Dies ist der wichtigste Lehr-/Debugging-Anwendungsfall:

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

Beispiel: Chrome DevTools MCP-Workflow

Dieses Projekt registriert eine Chrome DevTools Third-Party-Developer-Tools-Brücke über das Seiten-Level-devtoolstooldiscovery-Ereignis.

Wenn Chrome DevTools MCP mit der experimentellen Third-Party-Tools-Kategorie verbunden ist, kann ein KI-Agent Tools wie die folgenden entdecken:

rxjs_list_streams
rxjs_inspect_stream
rxjs_get_timeline
rxjs_story

Ein typischer KI-Agent-Prompt:

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.

Erwartetes Agentenverhalten:

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.

Ein Fallback-MCP-Ansatz ist die Skriptauswertung:

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

Korrekturen am ursprünglichen Prototyp

Aktuelle Einschränkungen

Dies ist ein experimenteller Prototyp. Er implementiert noch nicht das vollständige rxjs-spy-Verhalten.

Fehlende oder zukünftige Arbeiten:

• Monkey-Patch-freie Tagging-API vergleichbar mit rxjs-spy-Tags

• globaler Observable-Subscriptions-Graph

• Eltern/Kind-Subscriptions-Graph

• Higher-Order-Operator-Visualisierung

• dedizierte Debug-Operatoren für switchMap, mergeMap, concatMap, exhaustMap

• Scheduler-bewusste Traces für asyncScheduler, animationFrameScheduler, virtuelle Zeit und Drift

• echtes Replay-basiertes Time-Travel

• Tests

• Paketveröffentlichung

Sicherheitshinweise

Das Debug-Registry macht Laufzeitstatus über window.__RXJS_SPY_MCP__ im Entwicklungsmodus zugänglich. Setzen Sie keine sensiblen Produktionsdaten über Debug-Streams aus.

Die Snapshot-Ebene redigiert häufige geheimnisähnliche Schlüssel und begrenzt die Größe serialisierter Payloads, aber dies ist keine vollständige Sicherheitsgrenze.

Lizenz

MIT