Chrome DevTools for agents — AI 코딩 에이전트가 실제 개발자처럼 Chrome DevTools로 웹페이지를 검사하고, 디버깅하고, 최적화합니다.
2026년 상반기, GitHub에서 가장 핫했던 프로젝트 중 하나가 바로 ChromeDevTools/chrome-devtools-mcp(스타 45k+)입니다. 목표는 아주 명확해요: AI 코딩 에이전트(Claude Code, Cursor, Copilot, Codex 등)가 실제 Chrome 브라우저 인스턴스를 직접 제어하게 하자.
단순히 Puppeteer 스크립트를 감싼 게 아닙니다. MCP(Model Context Protocol) 프로토콜을 통해 DevTools의 전체 기능을 AI 에이전트에 공개합니다. DOM을 확인하고, 네트워크 요청을 분석하고, 스크린샷을 찍고, 콘솔 로그를 검사하고, 심지어 성능 트레이싱 데이터까지 가져올 수 있죠.
이 글에서는 이 프로젝트가 무엇인지, 왜 중요한지, 어떻게 설정하는지, 그리고 실전에서 어떻게 쓰는지 차근차근 알아보겠습니다.
Chrome DevTools MCP란?
Chrome DevTools MCP는 Google Chrome 팀이 공식 배포하는 MCP(Model Context Protocol) 서버입니다. AI 코딩 에이전트와 Chrome 브라우저 사이의 다리를 놓아주죠.
핵심 기능
| 기능 | 설명 |
|---|---|
| 🖥️ 브라우저 디버깅 | DOM 검사, 페이지 내용 읽기, 스크린샷 촬영 |
| 🌐 네트워크 분석 | 모든 HTTP 요청, 응답 헤더, 상태 코드 확인 |
| 📊 성능 추적 | Trace 기록, 성능 데이터 수집, CrUX 실제 사용자 데이터 |
| 💬 콘솔 검사 | JS 콘솔 출력 읽기(source-mapped 스택 추적 포함) |
| ⚡ 자동화 작업 | Puppeteer 기반의 안정적인 브라우저 자동화 |
| 🎯 정밀 대기 | 작업 완료까지 자동으로 대기, 비동기 타이밍 문제 방지 |
왜 필요한가?
이전에는 AI 코딩 에이전트가 브라우저를 조작할 때 주로 두 가지 방식을 썼습니다:
- Puppeteer/Playwright 스크립트: 자동화 코드를 직접 작성해야 합니다. AI가 만든 스크립트는 비동기 타이밍 문제 때문에 자주 실패하죠.
- Chrome DevTools Protocol(CDP) 직결: 프로토콜이 복잡합니다. AI 에이전트가 수십 개의 하위 API를 "이해"해야 해요.
Chrome DevTools MCP는 DevTools의 모든 고급 기능을 MCP tools로 감쌌습니다. AI 에이전트는 고수준 도구만 호출하면 작업을 완료할 수 있어서, 신뢰성과 효율성이 크게 높아졌죠.
사전 준비
설치 전에 다음 환경이 준비되어 있는지 확인하세요:
# 1. Node.js LTS 버전 (v20 또는 v22)
node -v # v20.0.0 이상 권장
npm -v # v10.0.0 이상 권장
# 2. Chrome 브라우저 (최신 안정판 또는 그 이상)
google-chrome --version
# 3. MCP를 지원하는 AI 코딩 에이전트
# Claude Code / Cursor / Copilot / Codex 등
설치 및 설정
기본 설치
Chrome DevTools MCP는 npm으로 배포되며, 한 줄 명령으로 설치할 수 있습니다:
# 전역 도구로 설치
npm install -g chrome-devtools-mcp
Claude Code 설정
Claude Code에 연결하는 방법은 두 가지입니다:
방법 1: CLI 설치 (MCP 도구)
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
방법 2: 플러그인으로 설치 (MCP + Skills)
# 플러그인 마켓플레이스 레지스트리 추가
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
# 플러그인 설치
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
# Claude Code를 재시작한 뒤 /skills로 로딩 성공 여부 확인
💡 팁: 회사 방화벽 때문에 플러그인 복사가 실패한다면(
Failed to clone repository), CLI 방식으로 설치하거나 공식 트러블슈팅 가이드를 참고하세요.
Cursor / VS Code Copilot 설정
MCP 설정 파일에 다음을 추가합니다:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
VS Code는 CLI로도 빠르게 추가할 수 있습니다:
# macOS / Linux
code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'
# Windows PowerShell
code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'
OpenAI Codex 설정
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Windows 11 사용자는 환경변수와 타임아웃을 추가로 설정해야 합니다:
# .codex/config.toml
[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
경량 모드 (Slim Mode)
기본적인 브라우저 조작만 필요하다면 --slim 모드로 리소스 사용을 줄일 수 있습니다:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
}
}
}
실전 시나리오
시나리오 1: AI 에이전트가 웹페이지 자동 디버깅
설정을 마치면, AI 에이전트에게 웹페이지를 열고 분석하라고 직접 요청할 수 있습니다:
나: https://dashen-tech.com 을 열고 메인 페이지 로딩 상태를 확인해 줘. 성능 문제는 없어?
AI 에이전트는 이렇게 작동합니다: 1. Puppeteer로 페이지를 엽니다 2. 스크린샷을 찍어 로딩 상태를 확인합니다 3. 네트워크 패널에서 리소스 로딩을 분석합니다 4. 콘솔 출력을 읽어 JS 에러를排查합니다 5. Trace를 기록해 Core Web Vitals를 분석합니다
시나리오 2: E2E 테스트 자동화
예전에는 E2E 테스트를 위해 Puppeteer 스크립트를 직접 작성해야 했습니다. 이제 AI 에이전트에게 테스트 의도만 알려주면 됩니다:
나: 테스트 케이스를 하나 작성해 줘:
1. 로그인 페이지 열기
2. 사용자 이름과 비밀번호 입력
3. 로그인 버튼 클릭
4. dashboard로 리다이렉션되는지 확인
5. 에러 로그가 있는지 확인
AI 에이전트가 이 작업을 자동으로 실행하고, DevTools로 각 단계의 결과를 검증합니다.
시나리오 3: 성능 분석 및 최적화
Chrome DevTools MCP가 가장 강력한 시나리오 중 하나입니다:
나: https://example.com 의 성능을 분석하고, 가장 큰 성능 병목 지점을 찾아줘
AI 에이전트는 이렇게 진행합니다: 1. Performance Trace를 기록합니다 2. Long Tasks, Layout Shifts, FCP, LCP 같은 지표를 분석합니다 3. CrUX 실제 사용자 데이터를 확인합니다 4. 구체적인 최적화 제안을 제공합니다
시나리오 4: 크로스 브라우저 호환성 검사
나: 이 페이지를 열고, 콘솔에 호환성 경고가 있는지,
네트워크 패널에서 실패한 요청이 있는지 확인해 줘
AI 에이전트가 동시에 검사할 수 있는 항목: - 콘솔의 warning/error 정보 - 네트워크 요청의 상태 코드와 응답 시간 - 페이지 렌더링是否正常
고급 설정
데이터 수집 끄기
Chrome DevTools MCP는 기본적으로 사용 통계를 수집합니다. 다음 방법으로 끌 수 있습니다:
# 방법 1: 시작 파라미터
npx chrome-devtools-mcp@latest --no-usage-statistics
# 방법 2: 환경변수
export CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1
# 방법 3: CI 환경에서 자동 (CI 변수가 있으면 자동으로 꺼짐)
CrUX 데이터 비활성화
성능 도구는 기본적으로 Google CrUX API로 Trace URL을 전송해 실제 사용자 데이터를 가져옵니다:
npx chrome-devtools-mcp@latest --no-performance-crux
업데이트 체크 비활성화
export CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS=1
기존 브라우저 인스턴스에 연결
Chrome DevTools MCP가 새 브라우저를 실행하는 대신 이미 실행 중인 브라우저에 연결하게 하려면 --browser-url을 지정하세요:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--browser-url=http://127.0.0.1:9222"
]
}
}
}
참고: 이 모드에서는 브라우저 인스턴스가 자동으로 시작되지 않습니다. Chrome을 수동으로 실행하고 원격 디버깅을 활성화(
--remote-debugging-port=9222)해 둬야 합니다.
지원하는 AI 코딩 에이전트
Chrome DevTools MCP는 현재 주류 AI 코딩 에이전트를 모두 지원합니다:
| 에이전트 | 설치 방식 | 비고 |
|---|---|---|
| Claude Code | CLI / Plugin | Plugin 방식 권장 (Skills 포함) |
| Cursor | MCP 설정 | JSON 설정 파일 |
| GitHub Copilot / VS Code | CLI / Plugin | 원클릭 설치 또는 수동 설정 |
| OpenAI Codex | CLI | Windows는 추가 설정 필요 |
| Cline | MCP 설정 | Cline 문서 참고 |
| Antigravity | MCP 설정 | 내장 브라우저 연결 |
| Command Code | CLI | cmd mcp add |
| Copilot CLI | 인터랙티브 설정 | /mcp add |
| Amp | CLI / 설정 | Amp 문서 참고 |
요약
Chrome DevTools MCP는 AI 코딩 에이전트 시대의 이정표 같은 프로젝트입니다. AI가 더 이상 "코드를 읽는" 수준에 머물지 않고, 실제로 브라우저를 조작하고, 네트워크를 분석하고, 성능을 디버깅할 수 있게 해줍니다 — 마치 실제 개발자처럼 말이죠.
dashen-tech.com 같은 기술 블로그에서는 이런 식으로 활용할 수 있습니다:
- ✅ 더 안정적인 E2E 테스트: AI 에이전트가 글 페이지가 정상 로딩되는지 자동으로 검증
- ✅ 자동화 성능 모니터링: 주기적으로 Trace를 기록, Core Web Vitals 변화 추적
- ✅ 빠른 문제排查: 브라우저에서 직접 렌더링 문제, JS 에러, 리소스 로딩 실패를 확인
GitHub: ChromeDevTools/chrome-devtools-mcp Stars: 45k+ (2026년 7월) License: Apache-2.0 기술 스택: TypeScript + Puppeteer + Chrome DevTools Protocol
AI 코딩 에이전트의 브라우저 자동화에 관심이 있다면, 이전 글도 확인해 보세요: Tabby 터미널 완벽 가이드, 터미널 에뮬레이터 비교 2026.