Chrome DevTools MCP – AI 에이전트를 위한 크롬 브라우저 제어 서버

주요 기능
빠른 시작
요구사항
보안 및 데이터 수집
사용 대상 및 케이스
설치 확인
관련 문서

Chrome DevTools MCP(chrome-devtools-mcp)는 Google Chrome DevTools 팀이 공식 배포하는 MCP(Model Context Protocol) 서버다. AI 코딩 에이전트(Claude, Gemini, Cursor, Copilot 등)가 실제 Chrome 브라우저를 직접 제어하고, 네트워크 요청 분석·성능 프로파일링·스크린샷 촬영·콘솔 메시지 확인 등 DevTools의 전 기능을 활용할 수 있게 한다.

주요 기능

성능 인사이트: Chrome DevTools로 트레이스 기록 후 실행 가능한 개선 제안 추출. CrUX(Chrome User Experience Report) 실사용자 데이터와 결합해 전체 그림 제공
고급 브라우저 디버깅: 네트워크 요청 분석, 스크린샷 촬영, 소스맵 스택 트레이스 포함 콘솔 메시지 확인
신뢰할 수 있는 자동화: Puppeteer 기반으로 액션 실행 및 결과 대기 자동 처리

빠른 시작

MCP 클라이언트 설정 파일에 다음 구성을 추가한다:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

기본 브라우저 작업만 필요하다면 경량 --slim 모드 사용:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

요구사항

Node.js v20.19 이상
Chrome 현재 안정 버전 이상
npm

공식 지원 브라우저는 Google Chrome과 Chrome for Testing. 다른 Chromium 기반 브라우저는 비공식 지원.

보안 및 데이터 수집

브라우저 인스턴스의 콘텐츠를 MCP 클라이언트에 노출하므로, 민감 정보가 포함된 탭에서는 주의 필요
기본으로 사용 통계(툴 호출 성공률·지연시간·환경 정보) 수집. 비활성화하려면 --no-usage-statistics 플래그 추가
성능 툴은 실사용자 데이터를 위해 CrUX API에 트레이스 URL 전송 가능. --no-performance-crux로 비활성화

사용 대상 및 케이스

프론트엔드 개발자: AI 에이전트에게 “이 페이지 성능 분석해줘” 또는 “폼 제출 후 네트워크 요청 확인해줘”를 자연어로 지시
QA 엔지니어: 브라우저 자동화 테스트 작성 시 에이전트가 실제 브라우저에서 직접 검증
풀스택 에이전트 구축자: 서버 코드 수정 → 브라우저 동작 검증 루프를 에이전트가 자동 반복

설치 확인

npx -y chrome-devtools-mcp@latest --version

AI Sparkup