ChromeDevTools/chrome-devtools-mcp

해결하는 문제

이 프로젝트는 AI 코딩 에이전트가 실시간으로 라이브 Chrome 브라우저와 상호작용하고 제어할 수 있는 방법을 제공합니다. AI가 코드를 작성하는 능력과 실제 웹 애플리케이션의 런타임 동작을 실시간으로 관찰하고 디버깅할 수 있는 능력 사이의 격차를 메웁니다.

작동 방식

이 프로젝트는 Model-Context-Protocol (MCP) 서버로 작동합니다. Claude, Cursor, Copilot과 같은 MCP 호환 AI 클라이언트에 연결되면, AI가 브라우저 작업을 수행할 수 있는 도구 세트를 노출합니다. 신뢰성 있는 자동화를 위해 Puppeteer를 사용하고, Chrome DevTools Protocol을 활용하여 디버깅 및 성능 분석을 위한 브라우저 내부 정보에 접근합니다.

대상 사용자

브라우저 상호작용을 자동화하고, 심층적인 디버깅 및 웹 성능 분석을 AI 인터페이스를 통해 직접 수행해야 하는 웹 개발자 및 AI 지원 코딩 에이전트에게 적합합니다.

주요 기능

• 브라우저 자동화: 클릭, 입력, 폼 채우기, 페이지 이동 등 완전한 입력 및 탐색 도구 세트.
• 세부 디버깅: 네트워크 요청 분석, 스크린샷 촬영, 소스맵이 적용된 스택 트레이스를 포함한 브라우저 콘솔 메시지 읽기.
• 성능 인사이트: 트레이스 기록 및 실행 가능한 성능 데이터 추출 도구.
• 광범위한 클라이언트 지원: Claude Code, Cursor, VS Code, Gemini 등 다양한 AI IDE 및 CLI 도구용 사전 구성 설정 제공.
• 유연한 모드: 기본 브라우저 작업용 --slim 모드 포함.