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 최신 안정 버전

실제 사용 시나리오

1. UI 변경 후 스크린샷을 찍어 시각적으로 확인하고, 문제가 있으면 바로 코드 수정
2. 페이지 로딩 성능을 추적하여 병목 지점을 찾고 최적화 방안 제안
3. 폼 입력, 버튼 클릭 등 사용자 시나리오를 자동화하여 E2E 테스트 수행