Skip to main content
Glama
deenesjakoruzh
hansschenker

rxjs-spy-mcp

by hansschenker
OverviewSchemaRelated ServersScoreDiscussions
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 installed

F
license - not found
Not graded
quality - not tested
B
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

View all related MCP servers

Related MCP Connectors

  • sncro

    Live browser debugging for AI assistants — DOM, console, network via MCP.

  • chromedevtoolsmcp-mcp

    A paid remote MCP for AI agent browser DevTools MCP, built to return verdicts, receipts, usage logs,

  • agent-replay-debugger-mcp

    Agent Replay Debugger MCP — record every agent step + deterministic replay. Step-debugger for

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/hansschenker/rxjs-spy-mcp-old'

If you have feedback or need assistance with the MCP directory API, please join our Discord server