ChromeDevTools/chrome-devtools-mcp

Chrome DevTools for Agents (chrome-devtools-mcp)는 코딩 에이전트(예: Gemini, Claude, Cursor 또는 Copilot)가 실제 Chrome 브라우저를 제어하고 검사할 수 있게 해줍니다. 이 도구는 Model-Context-Protocol (MCP) 서버 역할을 하여 AI 코딩 어시스턴트가 신뢰할 수 있는 자동화, 심층 디버깅 및 성능 분석을 위해 Chrome DevTools의 모든 기능을 사용할 수 있도록 합니다. 또한 MCP 없이 사용하기 위한 CLI도 제공됩니다.

성능 통찰력 확보: Chrome DevTools를 사용하여 트레이스를 기록하고 실행 가능한 성능 통찰력을 추출합니다.
고급 브라우저 디버깅: 네트워크 요청을 분석하고, 스크린샷을 찍으며, 브라우저 콘솔 메시지(소스 매핑된 스택 트레이스 포함)를 확인합니다.
신뢰할 수 있는 자동화: puppeteer를 사용하여 Chrome에서 작업을 자동화하고 작업 결과를 자동으로 기다립니다.

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

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 환경 변수가 설정되면 수집이 비활성화됩니다.

기본적으로 서버는 npm 레지스트리에서 업데이트를 주기적으로 확인하고 새 버전이 사용 가능할 때 알림을 기록합니다.

CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS 환경 변수를 설정하여 이러한 업데이트 확인 기능을 비활성화할 수 있습니다.

Node.js v20.19 또는 그 이후의 최신 유지보수 LTS 버전.
Chrome 현재 안정 버전 이상.
npm

다음 구성을 MCP 클라이언트에 추가하세요:

{
"mcpServers": {
"chrome-devtools": {
...

참고

chrome-devtools-mcp@latest를 사용하면 MCP 클라이언트가 항상 Chrome DevTools MCP 서버의 최신 버전을 사용하도록 보장합니다.

기본적인 브라우저 작업만 수행하는 데 관심이 있다면 --slim 모드를 사용하세요:

{
"mcpServers": {
"chrome-devtools": {
...

Slim 도구 참조를 확인하세요.

Amp

https://ampcode.com/manual#mcp를 따라하고 위에 제공된 구성을 사용하세요. CLI를 사용하여 Chrome DevTools MCP 서버를 설치할 수도 있습니다:
amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Antigravity

Chrome DevTools MCP 서버를 사용하려면 Antigravity의 문서를 참조하여 사용자 지정 MCP 서버를 설치하는 지침을 따르세요. 다음 구성을 MCP 서버 구성에 추가하세요:

{
"mcpServers": {
"chrome-devtools": {
...

이렇게 하면 Chrome DevTools MCP 서버가 Antigravity가 사용 중인 브라우저에 자동으로 연결됩니다. 포트 9222를 사용하지 않는 경우, 적절하게 조정했는지 확인하세요.

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

Claude Code

CLI를 통해 설치 (MCP 전용)

Claude Code CLI를 사용하여 Chrome DevTools MCP 서버를 추가하세요 (가이드):
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

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

[!NOTE] 이전에 Claude Code용으로 Chrome DevTools MCP를 설치한 적이 있다면, 먼저 설치 및 구성 파일에서 제거해야 합니다.

스킬과 함께 Chrome DevTools MCP를 설치하려면, Claude Code에 마켓플레이스 레지스트리를 추가하세요:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

그런 다음 플러그인을 설치하세요:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

MCP 서버와 스킬을 로드하려면 Claude Code를 다시 시작하세요 (/skills로 확인 가능).

[!TIP] 플러그인 설치가 Failed to clone repository 오류로 실패하는 경우

오류가 발생할 수 있습니다 (예: 기업 방화벽 뒤의 HTTPS 연결 문제). 해결 방법은 [문제 해결 가이드]를 참조하거나, 대신 위에 설명된 CLI 설치 방법을 사용하세요.

Codex

위에 있는 표준 설정을 사용하여 MCP 구성을 따르세요. 또한 Codex CLI를 사용하여 Chrome DevTools MCP 서버를 설치할 수도 있습니다:
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 = [
...

Command Code

Command Code CLI를 사용하여 Chrome DevTools MCP 서버를 추가하세요 (MCP 가이드):
cmd mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Copilot CLI

Copilot CLI를 시작합니다:

copilot

다음 명령을 실행하여 새 MCP 서버를 추가하는 대화형 세션을 시작하세요:

/mcp add

다음 필드를 구성하고 CTRL+S를 눌러 설정을 저장하세요:

서버 이름: chrome-devtools

서버 유형: [1] Local

명령어: npx -y chrome-devtools-mcp@latest

Copilot / VS Code

플러그인으로 설치 (권장)

가장 쉽게 시작하는 방법은 chrome-devtools-mcp를 에이전트 플러그인으로 설치하는 것입니다. 이것은 MCP 서버와 모든 **스킬(skills)**을 함께 묶어 제공하므로, 사용자의 에이전트가 도구뿐만 아니라 이를 효과적으로 사용하는 데 필요한 전문가 지침까지 모두 얻게 됩니다.

명령 팔레트(Command Palette)(Cmd+Shift+P (macOS) 또는 Ctrl+Shift+P (Windows/Linux))를 엽니다. - Chat: Install Plugin From Source 명령을 검색하여 실행합니다. - 다음 리포지토리 URL을 붙여넣습니다:
https://github.com/ChromeDevTools/chrome-devtools-mcp

이것으로 끝입니다! 이제 사용자의 에이전트는 Chrome DevTools 기능을 갖추고 강력해졌습니다.

MCP 서버로 설치 (MCP 전용)

설치 버튼 클릭:

또는 수동으로 설치:

위에 있는 표준 설정을 사용하여 VS Code MCP 구성 가이드를 따르거나, CLI를 사용하세요:

macOS 및 Linux의 경우:
`code --add-mcp '{

Factory CLI를 사용하여 Chrome DevTools MCP 서버를 추가하세요 (가이드):
droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"

Gemini CLI

Gemini CLI를 사용하여 Chrome DevTools MCP 서버를 설치합니다. 프로젝트 전체:

# MCP만 추가하는 경우:
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
# 또는 Gemini 확장 기능으로 추가하는 경우 (MCP+Skills):
...

전역적으로:

gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

alternatively, MCP 가이드를 따르고 위에 있는 표준 설정을 사용하세요.

JetBrains AI Assistant & Junie

Kiro

Kiro 설정에서 Configure MCP로 이동합니다.

Open Workspace or User MCP Config
위에 제공된 구성 스니펫을 사용합니다.

또는 IDE Activity Bar > Kiro

MCP Servers
Click Open MCP Config
. 위에 제공된 구성 스니펫을 사용합니다.

Katalon Studio

Chrome DevTools MCP 서버는 MCP 프록시를 통해 Katalon StudioAssist와 함께 사용할 수 있습니다.

1단계: MCP 프록시 설정 가이드를 따라 MCP 프록시를 설치합니다.

2단계: 프록시를 사용하여 Chrome DevTools MCP 서버를 시작합니다:
mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latest

참고: 8080 포트가 이미 사용 중인 경우 다른 포트를 선택해야 할 수 있습니다.

3단계: Katalon Studio에서 다음 설정을 사용하여 서버를 StudioAssist에 추가합니다:

Connection URL:http://127.0.0.1:8080/mcp

Transport type:HTTP

연결되면 Chrome DevTools MCP 도구가 StudioAssist에서 사용할 수 있게 됩니다.

Mistral Vibe

~/.vibe/config.toml에 추가합니다:

[[mcp_servers]]
name = 

전역적으로(Globally):

`qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest`

## Warp

`Settings | AI | Manage MCP Servers`로 이동합니다.

-> `+ Add`

을 사용하여 MCP 서버를 추가합니다. 위에 제공된 구성을 사용하세요.

MCP 클라이언트에서 다음 프롬프트를 입력하여 모든 것이 작동하는지 확인하십시오:

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


사용자의 MCP 클라이언트는 브라우저를 열고 성능 추적(performance trace)을 기록해야 합니다.

참고

The MCP 서버는 MCP 클라이언트가 실행 중인 브라우저 인스턴스가 필요한 도구를 사용할 때 자동으로 브라우저를 시작합니다. Chrome DevTools MCP 서버에 단독으로 연결하는 것은 브라우저를 자동으로 시작하지 않습니다.

문제가 발생하면 문제 해결 가이드(troubleshooting guide)를 확인하십시오.

**입력 자동화 (Input automation)** (10개 도구)**탐색 자동화 (Navigation automation)** (6개 도구)**에뮬레이션 (Emulation)** (2개 도구)**성능 (Performance)** (3개 도구)**네트워크 (Network)** (2개 도구)**디버깅 (Debugging)** (8개 도구)**메모리 (Memory)** (4개 도구)**확장 프로그램 (Extensions)** (5개 도구)**타사 (Third-party)** (2개 도구)**WebMCP** (2개 도구)

Chrome DevTools MCP 서버는 다음 구성 옵션을 지원합니다:

- 
지정된 경우, 채널 매개변수(channel param)로 식별되는 사용자 데이터 디렉토리에서 로컬로 실행 중인 브라우저(Chrome 144+)에 자동으로 연결합니다 (기본 채널은 stable). 원격 디버깅 서버가 `chrome://inspect/#remote-debugging.`을 통해 Chrome 인스턴스에서 시작되도록 요구합니다. `--autoConnect`

/`--auto-connect`
**유형(Type):** boolean **기본값(Default):** `false`

- 
실행 중인 디버그 가능한 Chrome 인스턴스에 연결합니다 (예: `--browserUrl`

/`--browser-url`
,`-u`
`http://127.0.0.1:9222`)
). 자세한 내용은 다음을 참조하십시오: https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance.**유형(Type):** string

- 
실행 중인 Chrome 인스턴스에 연결하기 위한 WebSocket 엔드포인트입니다 (예: ws://127.0.0.1:9222/devtools/browser/). --browserUrl의 대안입니다.**--wsEndpoint`

/`--ws-endpoint`
,`-w`
**유형(Type):** string

- 
JSON 형식으로 WebSocket 연결을 위한 사용자 지정 헤더입니다 (예: '{