vercel-labs/dev3000

해결하는 문제

웹 애플리케이션 개발은 서버 로그, 브라우저 콘솔 에러, 네트워크 요청, 브라우저 상태 등 여러 개별적인 정보 스트림을 동시에 관리해야 하는 경우가 많습니다. AI 코드 에이전트에게는 환경에 대한 통합된 시각이 없기 때문에 더욱 어려운 문제입니다. d3k는 모든 신호를 하나의 타임라인으로 통합하는 에이전트 중심의 로컬 웹 디버깅 런타임을 제공하며, 애플리케이션용 안정적인 포트 없는 URL을 제공합니다.

작동 방식

d3k는 개발 서버와 모니터링 대상 브라우저를 관리하는 역할을 합니다. 개발 서버를 시작하고, 프로젝트 전용 지속 프로파일을 사용해 Chrome 브라우저를 엽니다 (쿠키와 로그인 상태를 유지). 이후 서버 출력, 브라우저 콘솔 메시지, 네트워크 활동, 사용자 상호작용을 통합된 증거 스트림으로 캡처합니다.

"포트리스(Portless)" 시스템을 사용하여, 개발 포트가 변경되어도 변하지 않는 안정적인 HTTPS URL(예: https://my-app.localhost)을 제공하여, 깨진 콜백과 상태 손실을 방지합니다.

대상 사용자

주로 AI 코드 에이전트를 사용하는 개발자에게 적합합니다. 에이전트가 브라우저를 자율적으로 제어하고, 통합된 로그를 검사하며 문제를 디버깅할 수 있도록 합니다. 또한, 대시보드 뷰를 선호하는 인간 개발자를 위한 독립형 터미널 사용자 인터페이스(TUI)도 제공합니다.

주요 기능

• 통합 증거 스트림: 서버 로그, 브라우저 에러, 네트워크 요청을 하나의 타임라인으로 통합하여 디버깅을 용이하게 합니다.
• 에이전트 중심 설계: 에이전트가 런타임과 상호작용하고, 브라우저를 제어하며 로그를 분석하는 방법을 가르치는 "d3k 스킬"을 포함합니다.
• 안정적인 포트리스 URL: 개발 서버 포트가 변경되어도 변하지 않는 안정적인 HTTPS URL을 제공합니다.
• 지속적인 브라우저 프로필: 로그인 상태와 로컬 스토리지가 세션 간에 유지되는 프로젝트 전용 Chrome 프로필을 유지합니다.
• 광범위한 프레임워크 지원: Next.js, Vite, React, Vue, Svelte, Astro, Django, Flask, FastAPI, Rails 등 일반적인 웹 프레임워크를 자동 감지 및 지원합니다.