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]
[Plugin] Codex Plugin for Claude Code · Claude Code 안에서 OpenAI Codex로 코드 리뷰를 받거나 작업을 위임하는 OpenAI 공식 플러그인. 표준 리뷰·적대적 리뷰·작업 위임을 슬래시 명령으로 호출하고, 백그라운드 잡과 Codex 서브에이전트를 함께 제공.
tool · claudekit.io / tools / codex-plugin-cc
[02]
[Plugin] Andrej Karpathy Skills · Karpathy의 LLM 코딩 관찰에서 끌어낸 네 가지 원칙을 `CLAUDE.md` 한 장에 담은 플러그인 — 과잉설계, 주변부 리팩터링, 조용한 추측을 억제.
tool · claudekit.io / tools / andrej-karpathy-skills
[03]
[Plugin] Code Review · 코드 변경 사항을 시니어 개발자 수준으로 리뷰하는 플러그인.
tool · claudekit.io / tools / code-review
§ 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 설정을 먼저 제거해야 합니다.