ChromeDevTools/chrome-devtools-mcp View GitHub Homepage for Latest Official Releases

AI 프로그래밍 도우미가 Chrome 브라우저의 MCP 서버를 제어하고 검사하여 자동화, 디버깅 및 성능 분석 기능을 제공합니다.

Apache-2.0TypeScriptchrome-devtools-mcpChromeDevTools 14.5k Last Updated: November 12, 2025

크롬 개발자 도구 MCP - AI 프로그래밍 도우미를 위한 브라우저 제어 도구

프로젝트 개요

크롬 개발자 도구 MCP는 공식 Model Context Protocol (MCP) 서버로, Gemini, Claude, Cursor 또는 Copilot과 같은 AI 프로그래밍 도우미가 실시간으로 실행 중인 크롬 브라우저를 제어하고 검사할 수 있도록 합니다. 이 도구는 AI 코딩 도우미에게 크롬 개발자 도구의 모든 기능을 제공하여 안정적인 자동화, 심층 디버깅 및 성능 분석을 가능하게 합니다.

GitHub 주소: https://github.com/ChromeDevTools/chrome-devtools-mcp

핵심 기능

1. 성능 통찰

  • 크롬 개발자 도구를 사용하여 성능 추적 기록
  • 실행 가능한 성능 최적화 권장 사항 추출
  • AI 도우미가 성능 병목 현상을 식별하도록 지원

2. 고급 브라우저 디버깅

  • 네트워크 요청 분석
  • 스크린샷 캡처
  • 브라우저 콘솔 출력 검사
  • CORS 문제 및 콘솔 오류 감지

3. 안정적인 자동화

  • Puppeteer 기반 브라우저 자동화 구현
  • 작업 결과 자동 대기
  • 양식 채우기, 페이지 탐색, 요소 상호작용 지원

주요 기능 분류

크롬 개발자 도구 MCP 서버는 다음 범주로 분류된 26가지 도구를 제공합니다:

입력 자동화 (7가지 도구)

  • 클릭, 양식 채우기, 텍스트 입력
  • 호버, 키보드 조작 등 상호작용 기능

탐색 자동화 (7가지 도구)

  • 페이지 탐색, 앞으로/뒤로 이동
  • 새로고침, 로딩 완료 대기

시뮬레이션 기능 (3가지 도구)

  • 장치 시뮬레이션
  • 지리적 위치 시뮬레이션
  • 네트워크 조건 시뮬레이션

성능 분석 (3가지 도구)

  • 성능 추적 기록
  • 성능 지표 분석
  • 최적화 권장 사항 생성

네트워크 모니터링 (2가지 도구)

  • 네트워크 요청 목록
  • 요청 세부 정보 보기

디버깅 도구 (4가지 도구)

  • 콘솔 메시지 보기
  • JavaScript 실행
  • 스크린샷 기능
  • DOM 검사

시스템 요구 사항

  • Node.js: 20 또는 최신 LTS 버전
  • Chrome: 현재 안정 버전 또는 최신 버전
  • npm: 패키지 관리자

설치 및 구성

일반 구성

MCP 클라이언트 구성 파일에 다음 내용을 추가합니다:

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

지원되는 AI 프로그래밍 도우미

Claude Code

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Cursor

Cursor 설정 인터페이스를 통해: Settings -> MCP -> New MCP Server에서 위 구성을 사용합니다.

Gemini CLI

# 프로젝트 수준
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

# 전역 설치
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

VS Code Copilot

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

Cline

Cline의 MCP 구성 가이드에 따라 표준 구성을 사용합니다.

구성 옵션

크롬 개발자 도구 MCP는 다음 구성 매개변수를 지원합니다:

매개변수 유형 기본값 설명
--headless boolean false 헤드리스 모드(UI 없음)로 실행할지 여부
--isolated boolean false 임시 사용자 데이터 디렉터리 생성, 종료 시 자동 정리
--channel string stable 크롬 버전 채널 (stable/canary/beta/dev)
--viewport string - 초기 뷰포트 크기, 예: 1280x720
--executablePath / -e string - 사용자 지정 크롬 실행 파일 경로
--browserUrl / -u string - 실행 중인 크롬 인스턴스에 연결
--proxyServer string - 프록시 서버 구성
--acceptInsecureCerts boolean false 자체 서명 및 만료된 인증서 오류 무시 (주의해서 사용)
--logFile string - 디버그 로그 파일 경로

구성 예시

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

사용 예시

기본 테스트

설치 완료 후, AI 도우미에 다음 프롬프트를 입력하여 테스트합니다:

Check the performance of https://developers.chrome.com

AI 도우미는 자동으로 다음을 수행합니다:

  1. 크롬 브라우저 열기
  2. 지정된 웹사이트로 이동
  3. 성능 추적 기록
  4. 성능 최적화 권장 사항 분석 및 제공

일반적인 사용 시나리오

1. 성능 분석

example.com의 로딩 성능을 분석하고 최적화 권장 사항을 제공해 주세요.

2. 네트워크 문제 디버깅

my-website.com에 CORS 오류가 있는지 확인해 주세요.

3. 자동화 테스트

demo.realworld.io로 이동하여 로그인 양식을 채우고 스크린샷을 찍어주세요.

4. 양식 채우기

로그인 페이지에 이메일 test@example.com과 비밀번호 testpass123을 입력해 주세요.

5. 콘솔 검사

현재 페이지의 콘솔 오류 메시지를 확인해 주세요.

작동 원리

크롬 개발자 도구 MCP는 Model Context Protocol (MCP) 표준을 기반으로 작동합니다:

  1. MCP 프로토콜: 대규모 언어 모델을 외부 도구 및 데이터 소스와 연결하기 위한 오픈 소스 표준
  2. 도구 노출: MCP 프로토콜을 통해 크롬 개발자 도구 기능을 도구로 노출
  3. AI 호출: AI 도우미가 사용자 요구에 따라 해당 도구 호출
  4. 자동화 실행: Puppeteer를 사용하여 크롬에서 작업 실행
  5. 결과 반환: 실행 결과를 AI 도우미에게 피드백

예시 흐름

AI 도우미에게 "웹사이트 성능 확인"을 요청할 때:

사용자: 내 웹사이트 성능을 확인해 줘.
  ↓
AI 도우미: performance_start_trace 도구 사용
  ↓
MCP 서버: 크롬 시작, 웹사이트 열기, 성능 추적 기록
  ↓
AI 도우미: 성능 데이터 분석
  ↓
사용자: 성능 분석 보고서 및 최적화 권장 사항 수신

데이터 디렉터리

크롬 개발자 도구 MCP는 다음 사용자 데이터 디렉터리를 사용합니다:

  • Linux / MacOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
  • Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

--isolated 옵션을 사용하지 않는 한, 데이터 디렉터리는 실행 간에 지워지지 않습니다.

보안 고려 사항

⚠️ 중요:

크롬 개발자 도구 MCP는 브라우저 인스턴스의 내용을 MCP 클라이언트에 노출하여 브라우저 또는 개발자 도구의 모든 데이터를 검사, 디버그 및 수정할 수 있도록 합니다.

MCP 클라이언트와 공유하고 싶지 않은 민감하거나 개인적인 정보는 공유하지 마십시오.

문제 해결

문제가 발생하면 공식 문제 해결 가이드를 참조하십시오.

일반적인 문제

  1. 브라우저가 자동으로 시작되지 않음: MCP 서버는 클라이언트가 브라우저가 필요한 도구를 사용할 때만 브라우저를 시작합니다.
  2. 샌드박스 권한 문제: MCP 클라이언트가 샌드박스를 활성화한 경우, 샌드박스를 비활성화하거나 --connect-url을 사용하여 수동으로 시작된 크롬 인스턴스에 연결해야 할 수 있습니다.
  3. 시작 시간 초과: Windows에서는 startup_timeout_ms 구성을 늘려야 할 수 있습니다.

기술 스택

  • 코어: Node.js
  • 브라우저 자동화: Puppeteer
  • 프로토콜: 크롬 개발자 도구 프로토콜 (CDP)
  • 표준: 모델 컨텍스트 프로토콜 (MCP)

프로젝트 특징

  1. 공식 지원: 크롬 개발자 도구 팀에서 공식적으로 개발 및 유지 관리
  2. 폭넓은 호환성: 다양한 주요 AI 프로그래밍 도우미 지원
  3. 포괄적인 기능: 자동화, 디버깅, 성능 분석을 포괄하는 26가지 도구 제공
  4. 쉬운 통합: npx를 사용하여 로컬 설치 없이 간단한 구성
  5. 활발한 개발: 기능의 지속적인 업데이트 및 개선

적용 시나리오

  • 웹 개발 디버깅: AI 도우미가 버그 식별 및 수정 지원
  • 성능 최적화: 자동화된 성능 분석 및 최적화 권장 사항
  • 자동화 테스트: 브라우저 자동화 테스트 작성 및 실행
  • 웹사이트 모니터링: 웹사이트 기능 및 성능 확인
  • 개발 검증: 브라우저에서 코드 변경 사항의 실제 효과 검증

피드백 및 기여

이 프로젝트는 공개 미리보기 단계에 있으며, 크롬 개발자 도구 팀은 커뮤니티 피드백을 적극적으로 찾고 있습니다:

  • 기능 요청이나 문제 발견 시 GitHub Issues에 제출해 주세요.
  • AI 프로그래밍 도우미를 사용하는 개발자든, 차세대 AI 개발 도구를 구축하는 공급업체든, 여러분의 통찰력은 매우 소중합니다.

Star History Chart