자료실
개발도구MCP 서버official
Chrome DevTools MCP
코딩 에이전트가 실제 Chrome 브라우저를 제어하고 검사하도록 연결하는 Chrome 공식 MCP 서버
2026년 7월 22일
연결
설치
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latestChrome DevTools MCP는 코딩 에이전트가 실행 중인 Chrome 브라우저를 제어하고 검사하게 해주는 MCP 서버입니다. 에이전트가 Chrome DevTools의 기능을 그대로 사용해 자동화와 심층 디버깅, 성능 분석을 수행합니다.
주요 기능
· 성능 인사이트: DevTools로 트레이스를 기록하고 실행 가능한 성능 개선점을 추출합니다
· 브라우저 디버깅: 네트워크 요청을 분석하고 스크린샷을 촬영하며 콘솔 메시지를 확인합니다
· 자동화: Puppeteer 기반으로 동작 결과를 자동으로 대기합니다
제공 도구는 입력 자동화 10종, 내비게이션 6종, 에뮬레이션 2종, 성능 3종, 네트워크 2종, 디버깅 8종, 메모리 12종, 확장 프로그램 5종, 서드파티 2종, WebMCP 2종으로 구분됩니다. 준비물은 Node.js LTS와 npm, 그리고 현재 안정 버전 이상의 Chrome입니다. Claude Code에서는 `claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest`로 등록하며, 기본 작업만 필요하면 `--slim --headless` 인자로 경량 모드를 사용합니다. 사용 통계가 기본 수집되므로 원하지 않으면 `--no-usage-statistics` 인자를 붙입니다. 문서에는 이 도구가 브라우저 인스턴스의 내용을 MCP 클라이언트에 노출한다는 주의 사항이 명시돼 있습니다.
웹 애플리케이션의 실제 렌더링 결과와 성능을 에이전트로 검증하려는 프론트엔드 개발자에게 맞습니다.
댓글 0
아직 댓글이 없습니다. 첫 댓글을 남겨보세요.