Skip to main content
Glama
deenesjakoruzh
hansschenker

rxjs-spy-mcp

by hansschenker
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

rxjs-spy-mcp

用于 Chrome DevTools MCP 的实验性 RxJS 运行时调试 原型。

本仓库将 Nicholas Jamieson 的 rxjs-spy 背后的理念现代化，以适应 AI 辅助调试工作流：RxJS 运行时事件被捕获到结构化的堆注册表中，通过小型调试 API 暴露，并可供 Chrome DevTools MCP 代理读取。

主要贡献者说明

ChatGPT 是本项目的主要贡献者。

架构、TypeScript 入门实现、RxJS 自定义调试操作符、MVU 演示、时间旅行堆注册表以及 Chrome DevTools MCP 桥接器，都是根据用户的 RxJS 调试需求，由 ChatGPT 生成并完善的。

Related MCP server: Kaboom Browser AI Devtools MCP

项目目标

目标还不是完全取代 rxjs-spy。这是面向 MCP 的 RxJS 调试模型的第一个实验性实现。

当前原型专注于：

  • 类型化的 RxJS 调试操作符

  • 类似 Elm 的 MVU 演示

  • 时间旅行状态历史

  • 基于堆的被动检查

  • 安全快照和编辑

  • Chrome DevTools 第三方工具发现

  • AI 可读的调试帧

长期方向是构建一个现代的 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

打开终端中打印的本地 Vite URL，通常是：

http://127.0.0.1:5173

示例：手动使用调试功能

  1. 使用 npm run dev 启动应用。

  2. 打开浏览器 DevTools 控制台。

  3. 应用应该已经记录了初始的 INIT 转换。

  4. 检查跟踪的流：

window.__RXJS_SPY_MCP__.listStreams()

  1. 检查主 MVU 状态流：

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

  1. 仅读取时间线帧：

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

  1. 读取紧凑的运行时故事：

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

  1. 输入搜索查询，例如 rxjs，然后按 搜索。

  2. 通过输入以下内容模拟失败的异步效果：

error

然后按 搜索。

  1. 再次检查故事：

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 消息源，因此在 main.ts 中订阅 runtime.appState$ 时，应立即记录 INIT 转换。

示例：可视化时间旅行

右侧的调试面板显示堆时间线。

点击任何帧以将 UI 视觉回退到该帧中存储的 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 工作流

本项目通过页面级 devtoolstooldiscovery 事件注册了 Chrome DevTools 第三方开发者工具桥接器。

当 Chrome DevTools MCP 在启用实验性第三方工具类别的情况下连接时，AI 代理可以发现诸如以下工具：

rxjs_list_streams
rxjs_inspect_stream
rxjs_get_timeline
rxjs_story

典型的 AI 代理提示：

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)

对原始原型应用的修正

维度

应用的修正

概念

将 MCP 重新定义为检查桥接器，而不是 RxJS 运行时插桩的替代品。

MVU 时间旅行教学价值

添加了显式的 Msg -> Model 转换跟踪和可视化时间线面板。

TypeScript 正确性

拆分应用和调试类型，修复无效导入，移除基于 any 的 INITIALIZE，添加严格类型化操作符。

Chrome MCP API 正确性

用 devtoolstooldiscovery 桥接器替换了虚构的 navigator.developerTools.registerTool 想法，用于 Chrome DevTools 第三方工具。

rxjs-spy 替代完整性

为标记流、通知帧、订阅 ID、拆除跟踪和流摘要添加了基础。仍然不是完整的 rxjs-spy 替代品。

AI 代理可用性

添加了 JSON 友好的 diagnose、listStreams、inspectStream、getTimeline 和 story 方法。

生产安全

仅开发环境安装、对类似密钥的键进行编辑、安全快照序列化、循环值容忍度和大小限制快照。

当前限制

这是一个实验性原型。它尚未实现完整的 rxjs-spy 行为。

缺失或未来的工作：

  • 与 rxjs-spy 标签相当的无猴子补丁标记 API

  • 全局 Observable 订阅图

  • 父/子订阅图

  • 高阶操作符可视化

  • 用于 switchMap、mergeMap、concatMap、exhaustMap 的专用调试操作符

  • 用于 asyncScheduler、animationFrameScheduler、虚拟时间和漂移的调度器感知跟踪

  • 基于真正重放的时间旅行

  • 测试

  • 包发布

安全说明

调试注册表在开发模式下通过 window.__RXJS_SPY_MCP__ 暴露运行时状态。请勿通过调试流暴露敏感的生产数据。

快照层会编辑常见的类似密钥的键并限制序列化负载大小，但这并不是完整的安全边界。

许可证

MIT

This server cannot be deployed

Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers