claudekit / tools / chrome-devtools
[ MCP · Development ]

Chrome DevTools MCP

AI 에이전트가 Chrome 브라우저를 실시간으로 제어하고 검사할 수 있게 해주는 MCP 서버. 성능 분석, 디버깅, 브라우저 자동화 지원.

ChromeDevTools/chrome-devtools-mcp ·updated
$ /plugin install chrome-devtools-mcp copy

왜 필요한가?

프론트엔드 개발 중 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 테스트 수행
§ 6

See also

same category · curated
[01]
[Tool] Paseo · 내 컴퓨터에 데몬을 띄우고 데스크톱, 폰, 웹, 터미널 어디서든 접속해 코딩 에이전트를 굴리는 자체 호스팅 오케스트레이터. Claude Code를 비롯한 여러 CLI 에이전트를 손대지 않고 그대로 실행하며, 모바일 앱은 데스크톱과 같은 기능을 제공한다.
tool · claudekit.io / tools / paseo
[02]
[Tool] Orca · 여러 코딩 에이전트를 병렬로 굴리는 ADE(Agent Development Environment) 데스크톱 앱. 각 에이전트를 격리된 git worktree에서 동시에 실행하고, 결과를 나란히 비교해 원하는 것을 골라 머지한다. Claude Code, Codex, Grok 등 30여 개 CLI 에이전트를 자신의 구독으로 그대로 사용한다.
tool · claudekit.io / tools / orca
[03]
[Skill] Matt Pocock's Skills · Matt Pocock이 자기 .claude 디렉토리에서 실제로 쓰는 Claude Code 스킬 모음. 정렬(grilling), 스펙, TDD, 코드 리뷰, 버그 진단, 아키텍처 개선 등 실전 엔지니어링 워크플로를 20여 개 스킬로 묶었다. skills.sh로 편집 가능하게 설치하거나 플러그인으로 읽기 전용 설치한다.
tool · claudekit.io / tools / mattpocock-skills
§ 7

자주 묻는 질문

자주 묻는 질문
§ 7.1
Chrome DevTools MCP는 무엇인가요?
AI 에이전트가 Chrome 브라우저를 실시간으로 제어·검사할 수 있게 해주는 MCP 서버입니다. 스크린샷 촬영, 네트워크·성능 분석, Lighthouse 감사, Puppeteer 기반 브라우저 자동화 등을 지원합니다.
§ 7.2
어떤 환경에서 동작하나요?
Claude Code, Claude Desktop, VS Code, Cursor에서 동작합니다.
§ 7.3
어떻게 설치하나요?
MCP 방식과 Plugin 방식 중 하나만 선택해 설치합니다(중복 설치 금지). Plugin 방식은 Claude Code에서 `/plugin install chrome-devtools-mcp`로 설치하며, MCP+Skills+슬래시 커맨드가 함께 제공됩니다.
§ 7.4
사전 요구 사항은 무엇인가요?
Node.js v20.19 이상(maintenance LTS)과 Chrome 최신 안정 버전이 필요합니다.
§ 7.5
주요 기능은 무엇인가요?
성능 추적(시작/중단·인사이트·메모리 스냅샷), 디버깅(스크린샷·콘솔·Lighthouse·스크립트 실행), 네트워크 요청 분석, 브라우저 자동화(클릭·입력·폼·파일 업로드), 페이지 네비게이션, 디바이스 에뮬레이션을 제공합니다.
§ 7.6
MCP 방식과 Plugin 방식 사이를 전환하려면?
이전에 MCP 방식으로 설치한 경우, Plugin으로 전환하려면 기존 MCP 설정을 먼저 제거해야 합니다.