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 데모

  • 타임트래블 상태 이력

  • 수동적 힙 기반 검사

  • 안전한 스냅샷 및 리댁션(redaction)

  • 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)를 입력하고 Search를 누릅니다.

  2. 실패하는 비동기 효과를 시뮬레이션하려면 다음을 입력합니다:

error

그런 다음 Search를 누릅니다.

  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)

현재 구현은 MVU 메시지 소스에 시드된 BehaviorSubject<Msg>를 사용하므로, main.ts에서 runtime.appState$가 구독될 때 INIT 전환이 즉시 기록되어야 합니다.

샘플: 시각적 타임트래블

오른쪽의 디버그 패널에 힙 타임라인이 표시됩니다.

아무 프레임이나 클릭하면 해당 프레임에 저장된 resultingState로 UI가 시각적으로 되감깁니다.

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 정확성

앱 타입과 디버그 타입을 분리하고, 잘못된 import를 수정했으며, any 기반 INITIALIZE를 제거하고, 엄격한 타입 연산자를 추가했습니다.

Chrome MCP API 정확성

발명된 navigator.developerTools.registerTool 아이디어를 Chrome DevTools 서드파티 도구용 devtoolstooldiscovery 브리지로 대체했습니다.

rxjs-spy 대체 완전성

태그가 지정된 스트림, 알림 프레임, 구독 ID, 해제(teardown) 추적, 스트림 요약의 기반을 추가했습니다. 여전히 완전한 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