React inspection과 profiler 분석을 에이전트/개발자가 재현 가능한 CLI 흐름으로 옮긴 agent-first 디버깅 도구
기간
2026.03 -
팀
개인 프로젝트
역할
CLI 설계 및 구현, Playwright 세션 전송 계층 구성, snapshot-aware React inspection과 profiler 워크플로우 설계
React DevTools UI만으로는 에이전트나 스크립트 기반 자동화 흐름에서 동일한 조사 과정을 재현하기 어렵습니다. React 트리 상태, source 힌트, profiler 신호를 명령형 인터페이스로 노출해 디버깅과 성능 분석을 자동화 가능한 형태로 만들 필요가 있었습니다.
session open/connect/attach부터 snapshot 기반 트리 조회, node inspect, 내장 interact 명령, commit 중심 profiler 분석까지 하나의 CLI 표면으로 제공해 로컬과 에이전트 환경 모두에서 재현 가능한 React 조사 흐름을 만드는 것이 목표였습니다.
후속 자동화는 안정적인 식별자와 신뢰 경계가 응답에 명확히 드러날 때만 안전하게 동작합니다. snapshot id, observation level, limitations, runtime warnings 같은 구조화된 필드가 필요했습니다.
`tree get`이 반환한 snapshot id를 후속 node 명령이 직접 재사용하도록 설계했습니다. 런타임에서 snapshot이 제거되면 `snapshot-expired`를 반환해 안전하지 않은 추측 대신 새 트리를 다시 수집하도록 유도했습니다.
node id는 그것을 생성한 snapshot 안에서만 의미가 있습니다. search, inspect, highlight, source reveal이 모두 같은 snapshot 문맥을 유지해야 했고, 만료 시에는 명확한 오류로 다시 수집을 유도해야 했습니다.
engine preference, selected engine, recommended engine, source capability, helper import strategy를 한 번에 노출해 현재 환경에서 interact, source reveal, profiler 명령을 어디까지 신뢰할 수 있는지 판단할 수 있게 했습니다.
local/global Playwright 해석, custom/devtools 엔진 전환, React 19 이후의 제한적인 source 지원 여부를 함께 다뤄야 했고, 사용자가 분석 신뢰도를 오해하지 않도록 안내해야 했습니다.
세션 transport 명령, 내장 interaction helper, commit 중심 profiler 분석을 하나의 CLI 표면에 묶어 source reveal부터 성능 triage까지 별도 도구 전환 없이 이어질 수 있도록 했습니다.
