블로우백

Vite MCP 서버가 이제 Blowback입니다.

Blowback은 Vite뿐만 아니라 다양한 FE 개발 서버를 지원하는 것을 목표로 합니다.

커서와의 통합을 지원하기 위해 FE 개발 서버에 MCP(Model Context Protocol) 서버를 추가합니다.

주요 특징

• FE 개발 서버와 MCP 서버 통합
• MCP를 통한 브라우저 콘솔 로그 캡처 및 전송
• 체크포인트 기반 로그 관리

설치

Cursor MCP 구성에 서버를 추가합니다.

지엑스피1

자원

콘솔 로그

브라우저 콘솔 로그를 검색하기 위한 리소스입니다.

참고: MCP 리소스 기능은 현재 Cursor에서 지원되지 않습니다. 대신 get-console-logs 도구를 사용하세요.

스크린샷

스크린샷을 캡처하고 관리하기 위한 리소스입니다.

참고: 다른 리소스와 마찬가지로 이 기능은 현재 Cursor에서 직접 지원되지 않습니다. 대신 capture-screenshot 도구를 사용하세요.

도구

HMR 도구

브라우저 도구

도구 사용 방법

로그 관리 시스템

로그 관리 방법

• 모든 브라우저 콘솔 로그는 로그 파일에 저장됩니다.
• get-console-logs 도구를 사용하여 특정 체크포인트에 대한 로그를 쿼리할 수 있습니다.

체크포인트 시스템

체크포인트 운영 방식

• 체크포인트는 특정 버전의 스냅샷, 로그, 스크린샷 등을 관리하는 데 사용됩니다.
• <meta name="__mcp_checkpoint" data-id="">``head 에 삽입되면 data-id 속성을 식별자로 사용하여 데이터가 별도로 기록됩니다.

아키텍처 및 데이터 흐름

핵심 구성 요소

1. MCP 서버 : MCP 클라이언트에 도구를 제공하는 Model Context Protocol SDK 기반의 중앙 모듈입니다.
2. 브라우저 자동화 : Puppeteer를 사용하여 Chrome을 제어하여 변경 사항을 시각적으로 검사합니다.
3. 체크포인트 시스템 : 비교 및 테스트를 위해 브라우저 상태의 스냅샷을 유지합니다.

데이터 소스 및 상태 관리

서버는 여러 가지 중요한 데이터 저장소를 유지 관리합니다.

• HMR 이벤트 기록 : Vite에서 발생한 최근 HMR 이벤트(업데이트, 오류)를 추적합니다.
• 콘솔 메시지 로그 : 디버깅을 위해 브라우저 콘솔 출력을 캡처합니다.
• 체크포인트 저장소 : DOM 스냅샷을 포함한 브라우저 상태의 명명된 스냅샷을 저장합니다.

커뮤니케이션 흐름

1. MCP 클라이언트 → 개발 서버 :
   • MCP 클라이언트가 소스 코드를 변경하고 개발 서버가 변경 사항을 감지합니다.
   • 개발 서버는 브라우저를 업데이트하거나 HMR 이벤트를 자동으로 내보냅니다.
2. 웹 브라우저 → MCP 서버 :
   • HMR 이벤트와 콘솔 로그는 Puppeteer를 통해 캡처됩니다.
   • MCP 서버는 브라우저의 현재 상태를 쿼리하거나 스크린샷을 캡처합니다.
3. MCP 서버 → MCP 클라이언트 :
   • 서버는 HMR 이벤트를 구조화된 응답으로 변환합니다.
   • MCP 클라이언트가 HMR 상태를 조회하고 스크린샷을 캡처할 수 있는 도구를 제공합니다.

국가 유지 관리

서버는 다음에 대한 참조 객체를 유지 관리합니다.

• 현재 브라우저 및 페이지 인스턴스
• 최근 HMR 이벤트