이 저장소는 ChromeDevTools/chrome-devtools-mcp의 개인 학습용 포크입니다. Chrome, DevTools, MCP 또는 CLI에 대한 사전 지식이 전혀 없는 상태에서 도구를 처음부터 끝까지 익힐 수 있도록 평이한 영어로 된 튜토리얼과 실제 데모를 추가했습니다.

처음이신가요? demo-health-check/부터 시작하세요 ↓

✦ 이 포크에 추가된 기능: 두 가지 엔드투엔드 데모

MCP 서버, Chrome DevTools Protocol, 성능 추적(performance trace) 또는 Lighthouse와 같은 용어가 생소하시더라도 걱정하지 마세요. 이곳이 바로 시작하기 좋은 곳입니다.

이 포크에는 두 개의 독립적인 데모가 포함되어 있으며, 이 데모들은 chrome-devtools-mcp 도구 29개 중 26개를 다룹니다.

데모 1 — demo-health-check/ — 웹사이트 상태 감사 (CNN.com)

데모 2 — demo-shopping/ — 에이전트 기반 쇼핑 워크플로우 (saucedemo.com)

AI 에이전트가 로그인 → 탐색 → 다중 탭 비교 → 장바구니 → 모바일 에뮬레이션 → 결제 → 주문 확인으로 이어지는 전체 전자상거래 구매 흐름을 자율적으로 실행합니다. 데모 1에서 사용되지 않은 18개의 상호작용 도구를 다룹니다.

이 도구로 무엇을 더 만들 수 있을까요? → use-cases.md

QA, 성능, SEO, 전자상거래, 연구, 보안 및 개인 생산성 전반에 걸친 50개 이상의 에이전트 워크플로우 — 각 워크플로우가 사용하는 특정 도구와 CDP가 대안보다 나은 이유를 설명합니다.

이 도구의 실제 기능

chrome-devtools-mcp는 AI 어시스턴트(Claude, Gemini, Cursor, Copilot 등)에게 실제 Chrome 브라우저를 제어하고 검사할 수 있는 능력을 부여합니다. 단순히 텍스트 파일을 읽고 쓰는 것을 넘어, AI는 다음을 수행할 수 있습니다:

• 웹 페이지를 열고 스크린샷 찍기

• 스크린 리더처럼 페이지 구조 읽기

• 실시간 콘솔 오류 및 네트워크 요청 수집

• Lighthouse 감사 실행 (접근성, SEO, 모범 사례)

• 성능 추적 기록 및 Core Web Vitals 측정 (LCP, CLS, INP)

사용자는 평이한 영어로 상호작용하며 — "이 페이지의 성능을 확인해줘" — AI는 29개의 도구 중 어떤 것을 호출할지 결정합니다.

경험 불필요

이 데모는 Chrome DevTools를 한 번도 열어본 적이 없고, MCP 서버를 사용해 본 적이 없으며, AI 코딩 어시스턴트를 이제 막 사용하기 시작한 사람을 위해 설계되었습니다. 모든 개념은 사용되기 전에 기본 원리부터 설명됩니다.

Chrome DevTools MCP

chrome-devtools-mcp를 사용하면 코딩 에이전트(Gemini, Claude, Cursor 또는 Copilot 등)가 실시간 Chrome 브라우저를 제어하고 검사할 수 있습니다. 이 도구는 MCP(Model-Context-Protocol) 서버 역할을 하여 AI 코딩 어시스턴트가 안정적인 자동화, 심층 디버깅 및 성능 분석을 위해 Chrome DevTools의 모든 기능을 활용할 수 있도록 합니다.

도구 참조 | 변경 로그 | 기여하기 | 문제 해결 | 설계 원칙

주요 기능

• 성능 통찰력 확보: Chrome DevTools를 사용하여 추적을 기록하고 실행 가능한 성능 통찰력을 추출합니다.

• 고급 브라우저 디버깅: 네트워크 요청을 분석하고, 스크린샷을 찍고, 브라우저 콘솔 메시지(소스 맵 스택 추적 포함)를 확인합니다.

• 안정적인 자동화: puppeteer를 사용하여 Chrome에서의 작업을 자동화하고 작업 결과를 자동으로 기다립니다.

면책 조항

chrome-devtools-mcp는 브라우저 인스턴스의 콘텐츠를 MCP 클라이언트에 노출하여 브라우저나 DevTools의 모든 데이터를 검사, 디버그 및 수정할 수 있도록 합니다. MCP 클라이언트와 공유하고 싶지 않은 민감하거나 개인적인 정보는 공유하지 마십시오.

chrome-devtools-mcp는 공식적으로 Google Chrome 및 Chrome for Testing만 지원합니다. 다른 Chromium 기반 브라우저도 작동할 수 있지만 보장되지 않으며 예상치 못한 동작이 발생할 수 있습니다. 사용자의 재량에 따라 사용하십시오. 저희는 Extended Stable Chrome 최신 버전에 대한 수정 사항과 지원을 제공하기 위해 최선을 다하고 있습니다.

성능 도구는 실제 사용자 경험 데이터를 가져오기 위해 Google CrUX API로 추적 URL을 보낼 수 있습니다. 이는 필드 데이터를 실험실 데이터와 함께 제시하여 전체적인 성능 그림을 제공하는 데 도움이 됩니다. 이 데이터는 Chrome User Experience Report (CrUX)에 의해 수집됩니다. 이를 비활성화하려면 --no-performance-crux 플래그를 사용하여 실행하십시오.

사용 통계

Google은 Chrome DevTools MCP의 안정성과 성능을 개선하기 위해 사용 통계(도구 호출 성공률, 지연 시간 및 환경 정보 등)를 수집합니다.

데이터 수집은 기본적으로 활성화되어 있습니다. 서버를 시작할 때 --no-usage-statistics 플래그를 전달하여 거부할 수 있습니다:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google은 Google 개인정보처리방침에 따라 이 데이터를 처리합니다.

Chrome DevTools MCP에 대한 Google의 사용 통계 수집은 Chrome 브라우저의 사용 통계와 독립적입니다. Chrome 메트릭을 거부한다고 해서 이 도구의 수집이 자동으로 거부되지는 않으며, 그 반대도 마찬가지입니다.

CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 또는 CI 환경 변수가 설정된 경우 수집이 비활성화됩니다.

요구 사항

• Node.js v20.19 또는 그 이상의 최신 유지보수 LTS 버전.

• Chrome 현재 안정 버전 이상.

• npm

시작하기

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"]
    }
  }
}

Slim 도구 참조를 참조하십시오.

MCP 클라이언트 구성

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

Chrome DevTools MCP 서버를 사용하려면 Antigravity 문서의 지침에 따라 사용자 지정 MCP 서버를 설치하십시오. MCP 서버 구성에 다음 구성을 추가하십시오:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222",
        "-y"
      ]
    }
  }
}

이렇게 하면 Chrome DevTools MCP 서버가 Antigravity가 사용 중인 브라우저에 자동으로 연결됩니다. 포트 9222를 사용하지 않는 경우 그에 맞게 조정하십시오.

이 접근 방식을 사용하면 Chrome DevTools MCP가 브라우저 인스턴스를 자동으로 시작하지 않습니다. Chrome DevTools MCP 서버가 Antigravity의 내장 브라우저에 연결되기 때문입니다. 브라우저가 아직 실행 중이 아니라면 오른쪽 상단 모서리에 있는 Chrome 아이콘을 클릭하여 먼저 시작해야 합니다.

CLI를 통한 설치 (MCP 전용)

Claude Code CLI를 사용하여 Chrome DevTools MCP 서버를 추가하십시오 (가이드):

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

플러그인으로 설치 (MCP + Skills)

Skills와 함께 Chrome DevTools MCP를 설치하려면 Claude Code에 마켓플레이스 레지스트리를 추가하십시오:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

그런 다음 플러그인을 설치하십시오:

/plugin install chrome-devtools-mcp

Claude Code를 다시 시작하여 MCP 서버와 Skills가 로드되도록 하십시오 (/skills로 확인).

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

Windows 11의 경우

.codex/config.toml을 업데이트하고 다음 env 및 startup_timeout_ms 매개변수를 추가하여 Chrome 설치 위치를 구성하고 시작 시간 제한을 늘리십시오:

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

Copilot CLI를 시작하십시오:

copilot

다음 명령을 실행하여 새 MCP 서버를 추가하는 대화 상자를 시작하십시오:

/mcp add

다음 필드를 구성하고 CTRL+S를 눌러 구성을 저장하십시오:

• Server name: chrome-devtools

• Server Type: [1] Local

• Command: npx -y chrome-devtools-mcp@latest

버튼을 클릭하여 설치:

또는 수동으로 설치:

위의 표준 구성을 사용하여 MCP 설치 <a href="https