Chrome DevTools MCP
업데이트
AI 에이전트가 Chrome 브라우저를 실시간으로 제어하고 검사할 수 있게 해주는 MCP 서버. 성능 분석, 디버깅, 브라우저 자동화 지원.
/plugin install chrome-devtools-mcp 왜 필요한가?
프론트엔드 개발 중 UI 버그를 디버깅하거나 성능을 분석하려면 브라우저와 에디터를 번갈아 확인해야 합니다. Chrome DevTools MCP를 사용하면 Claude Code에서 직접 스크린샷 촬영, 네트워크 분석, 성능 추적, 브라우저 자동화를 수행할 수 있습니다.
주요 기능
- 성능 분석 — Chrome DevTools 성능 추적(trace) 시작/중단, 인사이트 분석, 메모리 스냅샷
- 디버깅 — 스크린샷 촬영, 콘솔 메시지 검사, Lighthouse 감사, 스크립트 실행
- 네트워크 — 네트워크 요청 목록 조회 및 상세 분석
- 브라우저 자동화 — 클릭, 입력, 폼 작성, 파일 업로드, 키 입력 등 Puppeteer 기반 자동화
- 네비게이션 — 페이지 이동, 새 탭 열기, 탭 전환, 페이지 대기
- 에뮬레이션 — 디바이스 에뮬레이션, 페이지 리사이즈
Before / After
Before: 코딩 → 브라우저에서 확인 → DevTools 열기 → 수동으로 네트워크/성능 분석 → 에디터로 돌아와 수정
After: Claude Code에서 “이 페이지 스크린샷 찍고 성능 분석해줘” → 즉시 분석 결과 확인 → 코드 수정까지 한 흐름
설치 안내
두 가지 방식 중 하나만 선택하여 설치합니다. 중복 설치하면 안 됩니다.
- MCP 방식 — MCP 서버만 연결하는 가벼운 설치
- Plugin 방식 — MCP + Skills + 슬래시 커맨드가 포함된 풀 패키지
이전에 MCP 방식으로 설치한 경우, Plugin으로 전환하려면 기존 MCP 설정을 먼저 제거해야 합니다.
요구사항
- Node.js v20.19 이상 (maintenance LTS)
- Chrome 최신 안정 버전
실제 사용 시나리오
- UI 변경 후 스크린샷을 찍어 시각적으로 확인하고, 문제가 있으면 바로 코드 수정
- 페이지 로딩 성능을 추적하여 병목 지점을 찾고 최적화 방안 제안
- 폼 입력, 버튼 클릭 등 사용자 시나리오를 자동화하여 E2E 테스트 수행
자주 묻는 질문
Chrome DevTools MCP는 무엇인가요?
AI 에이전트가 Chrome 브라우저를 실시간으로 제어·검사할 수 있게 해주는 MCP 서버입니다. 스크린샷 촬영, 네트워크·성능 분석, Lighthouse 감사, Puppeteer 기반 브라우저 자동화 등을 지원합니다.
어떤 환경에서 동작하나요?
Claude Code, Claude Desktop, VS Code, Cursor에서 동작합니다.
어떻게 설치하나요?
MCP 방식과 Plugin 방식 중 하나만 선택해 설치합니다(중복 설치 금지). Plugin 방식은 Claude Code에서 `/plugin install chrome-devtools-mcp`로 설치하며, MCP+Skills+슬래시 커맨드가 함께 제공됩니다.
사전 요구 사항은 무엇인가요?
Node.js v20.19 이상(maintenance LTS)과 Chrome 최신 안정 버전이 필요합니다.
주요 기능은 무엇인가요?
성능 추적(시작/중단·인사이트·메모리 스냅샷), 디버깅(스크린샷·콘솔·Lighthouse·스크립트 실행), 네트워크 요청 분석, 브라우저 자동화(클릭·입력·폼·파일 업로드), 페이지 네비게이션, 디바이스 에뮬레이션을 제공합니다.
MCP 방식과 Plugin 방식 사이를 전환하려면?
이전에 MCP 방식으로 설치한 경우, Plugin으로 전환하려면 기존 MCP 설정을 먼저 제거해야 합니다.