chrome-devtools-mcp

에이전트를 위한 Chrome DevTools

에이전트를 위한 Chrome DevTools(chrome-devtools-mcp)를 사용하면 코딩 에이전트(예: Antigravity, Claude, Cursor, Copilot)가 실행 중인 Chrome 브라우저를 제어하고 검사할 수 있습니다. 이는 MCP(Model-Context-Protocol) 서버와 CLI로 제공됩니다. 두 방식 모두 AI 코딩 어시스턴트에게 Chrome DevTools의 모든 기능에 대한 접근 권한을 부여하여 안정적인 자동화, 심층 디버깅, 성능 분석을 가능하게 합니다.

도구 레퍼런스 | CLI | 스킬 | 변경 로그 | 기여하기 | 문제 해결 | 설계 원칙

주요 기능

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

면책 조항
chrome-devtools-mcp는 브라우저 인스턴스의 콘텐츠를 MCP 클라이언트에 노출하여, 클라이언트가 브라우저나 DevTools의 모든 데이터를 검사, 디버깅, 수정할 수 있게 합니다. MCP 클라이언트와 공유하고 싶지 않은 민감하거나 개인적인 정보는 공유하지 마세요.

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

성능 도구는 실제 사용자 경험 데이터를 가져오기 위해 트레이스 URL을 Google CrUX API로 전송할 수 있습니다. 이는 실험실 데이터와 함께 필드 데이터를 제시하여 종합적인 성능 그림을 제공하는 데 도움이 됩니다. 이 데이터는 Chrome 사용자 경험 보고서(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 LTS 버전.
Chrome 최신 안정 버전 이상.
npm

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

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

chrome-devtools-mcp@latest를 사용하면 MCP 클라이언트가 항상 최신 버전의 Chrome DevTools MCP 서버를 사용하게 됩니다.

MCP 클라이언트 구성
편집기나 에이전트(예: Antigravity, Claude Code, Cursor, VS Code)에 특화된 설정 지침은 클라이언트 구성 가이드를 참조하세요.

첫 번째 프롬프트
모든 것이 제대로 작동하는지 확인하려면 MCP 클라이언트에 다음 프롬프트를 입력하세요:

https://developers.chrome.com 의 성능을 확인해줘

MCP 클라이언트가 브라우저를 열고 성능 트레이스를 기록해야 합니다.

참고

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

CLI
이 패키지에는 chrome-devtools CLI도 포함되어 있습니다. MCP 없이 터미널에서 브라우저를 제어하려면 사용하세요:

npm i chrome-devtools-mcp@latest -g
chrome-devtools navigate_page 1 --url " https://developers.chrome.com "
chrome-devtools take_screenshot 1 --filePath screenshot.png
chrome-devtools stop
모든 명령과 옵션은 CLI 가이드를 참조하세요.

스킬
이 패키지에는 에이전트에게 Chrome DevTools 사용 방법을 가르치는 스킬이 포함되어 있습니다:

스킬
사용 용도

chrome-devtools
MCP 도구로 페이지를 디버깅하고 자동화합니다.

chrome-devtools-cli
CLI를 실행하고 이를 사용하여 셸 스크립트를 작성합니다.

a11y-debugging
접근성 문제를 감사하고 수정합니다.

cookie-debugging
쿠키, 세션, 인증을 디버깅합니다.

debug-optimize-lcp
Largest Contentful Paint를 디버깅하고 개선합니다.

memory-leak-debugging
메모리 누수를 찾아 수정합니다.

troubleshooting
MCP와 Chrome 간의 연결 문제를 해결합니다.

스킬을 플러그인으로 설치
플러그인은 MCP 서버와 CLI 스킬을 포함한 모든 스킬을 설치합니다:

Claude Code: /plugin marketplace add ChromeDevTools/chrome-devtools-mcp 를 실행한 다음 /plugin install chrome-devtools-mcp@chrome-devtools-plugins 를 실행합니다.
Copilot / VS Code: Chat: Install Plugin From Source 를 실행하고 ChromeDevTools/chrome-devtools-mcp 를 입력합니다.
Gemini CLI: gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp 를 실행합니다.

자세한 내용은 클라이언트 구성 가이드를 참조하세요.

스킬 수동 설치
에이전트가 플러그인을 지원하지 않는 경우 스킬 폴더를 에이전트의 스킬 디렉터리에 복사하세요. npm 패키지에 스킬이 포함되어 있습니다:

npm i chrome-devtools-mcp@latest -g
# Claude Code 예시. 에이전트의 스킬 디렉터리를 사용하세요.
mkdir -p ~ /.claude/skills
cp -R " $( npm root -g ) /chrome-devtools-mcp/skills/chrome-devtools-cli " ~ /.claude/skills/
중요

chrome-devtools-cli 스킬은 CLI를 필요로 합니다. 스킬을 사용하기 전에 패키지를 전역으로 설치하세요.

스킬을 최신 상태로 유지
스킬은 특정 버전의 도구를 설명합니다. MCP 서버나 CLI를 업데이트할 때마다 스킬도 업데이트하세요. 오래된 스킬은 에이전트에게 변경된 도구나 매개변수를 사용하도록 지시할 수 있습니다.

플러그인: 에이전트의 플러그인 관리자 업데이트 명령을 사용하세요. 위의 Gemini CLI 명령은 --auto-update 로 자동 업데이트를 활성화합니다.
수동 설치: 패키지를 업데이트한 다음 스킬 폴더를 다시 복사하세요:

npm i chrome-devtools-mcp@latest -g
mkdir -p ~ /.claude/skills
cp -R " $( npm root -g ) /chrome-devtools-mcp/skills/chrome-devtools-cli " ~ /.claude/skills/
도구
문제가 발생하면 문제 해결 가이드를 확인하세요.
지원되는 모든 MCP 기능의 전체 목록은 전체 도구 레퍼런스를 참조하세요.

구성
서버 매개변수(예: --headless, --isolated, --slim)의 전체 목록과 WebSocket 연결 구성 방법은 구성 가이드에서 확인하세요.

기본 브라우저 작업만 필요한 경우 --slim 플래그는 축소된 도구 세트를 노출합니다. Slim 도구 레퍼런스를 참조하세요.

고급 사용법
동시 세션 처리, 영구 사용자 데이터 디렉터리, 새 인스턴스를 시작하는 대신 실행 중인 Chrome 인스턴스에 연결, Android에서의 디버깅 등 고급 기능은 고급 사용법 가이드를 참조하세요.

브라우저 서브에이전트로 통합
에이전트 도구를 개발 중이며 제품의 일부로 통합된 브라우저 서브에이전트를 제공하려는 경우, 에이전트를 위한 Chrome DevTools 위에 구축할 것을 권장합니다.

참조 구현은 Gemini CLI 브라우저 에이전트 문서를 참조하세요.