Skip to content

browse-sent-event 기술 문서

browse-sent-event는 WebSocket, fetch ReadableStream, EventSource, XMLHttpRequest의 통신 흐름을 브라우저 안에서 관찰하기 위한 프론트엔드 개발 도구다.

현재 상태

Phase 1 DevTools MVP를 공개 alpha로 배포했다.

packagealphalatest
@browse-sent-event/core0.1.0-alpha.10.1.0-alpha.0
@browse-sent-event/plugin-vite0.1.0-alpha.20.1.0-alpha.1

Alpha

API와 화면 구성은 정식 릴리스 전에 바뀔 수 있다. 새 설치에서는 @browse-sent-event/plugin-vite@alpha를 사용한다. plugin-vite 0.1.0-alpha.0은 deprecated된 잘못된 배포다. latest는 이번 공개에서 이동하지 않았으므로 version이나 dist-tag를 생략하지 않는다.

사용자 가이드

  1. 시작하기에서 Vite project에 설치한다.
  2. 패널과 내보내기에서 timeline과 export를 익힌다.
  3. 설정과 제한 사항에서 alpha 경계를 확인한다.
  4. DevTools panel 예제에서 정적 demo를 직접 조작한다.

기준 문서

구현 범위

  • Vite 개발 서버 entry bootstrap 주입과 production build 제외
  • 브라우저 main thread의 WebSocket, streaming fetch, EventSource, XMLHttpRequest 관찰
  • Shadow DOM DevTools panel의 연결 목록, timeline, 검색과 방향 filter
  • JSONL/log export CustomEvent
  • Playwright 기반 Chromium desktop/mobile 검증
  • GitHub Pages 기반 기술 문서 배포

개발 명령

bash
pnpm install
pnpm docs:build
pnpm test
pnpm test:e2e
pnpm typecheck
pnpm lint
pnpm format:check
pnpm test:release