Chrome DevTools MCP — Claude Code MCP 서버

Chrome DevTools 팀 공식 MCP 서버. 실제 Chrome을 제어해 네트워크/콘솔 검사, 성능 트레이스, 입력 자동화 등 브라우저 디버깅을 수행한다.

Chrome DevTools MCP는 Chrome DevTools 팀이 공식으로 제공하는 MCP(Model Context Protocol) 서버로, AI 코딩 에이전트(Claude Code 등)가 실제로 구동 중인 Chrome 브라우저를 제어하고 검사할 수 있게 해 준다. 즉 LLM이 "화면을 보지 못해 추측으로만 프런트엔드 버그를 다루는" 한계를 풀어 준다. 에이전트가 직접 페이지를 열고, 네트워크 요청과 콘솔 메시지를 읽고(소스맵 기반 스택 트레이스 포함), 성능 트레이스를 기록하며, Lighthouse 감사와 메모리 힙 스냅샷까지 수행할 수 있다.

핵심 기능은 크게 세 갈래다. (1) 입력 자동화: 클릭·타이핑·폼 입력·파일 업로드, 페이지 생성/이동/종료, 뷰포트 리사이즈와 디바이스 에뮬레이션. (2) 디버깅·분석: 스크린샷·스냅샷 캡처, 콘솔 메시지 검사, 네트워크 요청 모니터링, JavaScript를 브라우저 컨텍스트에서 직접 실행. (3) 성능: 퍼포먼스 트레이스 기록과 DevTools 기반 인사이트, CrUX(실사용자 경험) 데이터 연계. 실험적으로 스크린캐스트 녹화, Chrome 확장 관리 등도 지원한다.

대상 브라우저는 Google Chrome(현재 안정 버전 이상)이며 Chrome for Testing이 공식 지원된다. 다른 Chromium 계열은 동작할 수 있으나 보장되지 않는다. Node.js LTS와 npm, 그리고 Chrome 설치가 전제다.

프런트엔드 개발자, QA·E2E 자동화 담당자, 성능/접근성 회귀를 잡으려는 팀, 그리고 "실제로 렌더된 결과를 보고 고쳐 달라"고 에이전트에 시키고 싶은 사람에게 적합하다. 재현 가능한 버그 조사, 네트워크 실패 진단, Core Web Vitals 점검 같은 작업에서 특히 강하다. 정확한 도구 목록·옵션은 공식 문서 확인을 권장한다.

언제 쓰나

프런트엔드 버그를 "실제 렌더 결과·네트워크·콘솔"을 보고 고치게 하고 싶을 때, 성능 트레이스·Lighthouse로 Core Web Vitals나 회귀를 점검할 때, 폼 입력·클릭 같은 브라우저 동작을 자동화해 재현·검증할 때 적합하다. 추측 기반 디버깅 대신 에이전트가 직접 페이지를 열어 확인해야 하는 시나리오에 쓴다.

설치

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

Node.js LTS와 npm, 그리고 Google Chrome(현재 안정 버전 이상, Chrome for Testing 공식 지원)이 설치돼 있어야 한다. npx로 매번 최신 패키지를 받아 실행하는 형태라 첫 실행 시 다운로드가 발생한다. 다른 Chromium 계열은 동작이 보장되지 않는다. 사용 통계 수집은 기본 활성이며 플래그로 끌 수 있고 npm 업데이트 점검도 기본 동작한다. 정확한 옵션·플래그는 공식 문서 확인을 권장한다.

보안 주의

이 서버는 브라우저에 보이는 콘텐츠 전체를 MCP 클라이언트에 노출한다. 즉 에이전트가 현재 Chrome 세션에서 보이는 데이터(로그인 상태, 쿠키 기반 페이지, DevTools에 드러난 정보)를 읽고 수정할 수 있으므로, 민감한 계정이 로그인된 프로필로 붙이지 말고 격리된 프로파일/Chrome for Testing 사용을 권장한다. 임의 페이지를 열어 JavaScript를 실행하므로 신뢰할 수 없는 사이트의 콘솔·DOM 내용이 프롬프트 인젝션 경로가 될 수 있다. 사용 통계는 기본 수집(플래그로 비활성)되니 정책 확인 권장. 별도 API 키는 요구하지 않는다.

자주 묻는 질문

어떤 브라우저를 제어하나요?

Google Chrome(현재 안정 버전 이상)을 제어하며 Chrome for Testing이 공식 지원됩니다. 다른 Chromium 계열은 동작할 수 있으나 보장되지 않습니다. 별도 헤드리스 라이브러리가 아니라 실제 Chrome 인스턴스를 다룹니다.

무엇을 할 수 있나요?

네트워크 요청·콘솔 메시지 검사, 성능 트레이스 기록, Lighthouse 감사, 스크린샷/스냅샷, 클릭·타이핑·폼 입력 등 입력 자동화, 브라우저 컨텍스트에서 JavaScript 실행, 메모리 힙 스냅샷 등을 수행합니다.

설치에 무엇이 필요한가요?

Node.js LTS와 npm, 그리고 Chrome 설치가 필요합니다. API 키는 요구하지 않습니다. 민감 정보가 로그인된 프로필 대신 격리된 프로파일 사용을 권장합니다.