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] Ollaya · 결정 모델(decision model)을 로컬에서 내려받아 실행하는 도구. 문의, 이메일, 프롬프트 같은 입력을 받아 분류, 점수, 예/아니오 질문에 확률과 함께 밀리초 단위로 답합니다. MCP 서버와 에이전트 스킬을 함께 제공해 Claude Code가 빠른 판단을 로컬 모델에 맡길 수 있습니다.
tool · claudekit.io / tools / ollaya
[02]
[MCP] Mobile MCP · iOS, Android의 시뮬레이터, 에뮬레이터, 실기기를 AI 에이전트가 직접 조작하게 해주는 MCP 서버. 앱 화면의 접근성 트리를 읽어 탭, 스와이프, 입력, 앱 설치를 수행하며 기기 로그와 크래시 리포트도 가져옵니다.
tool · claudekit.io / tools / mobile-mcp
[03]
[Plugin] Ponytail · 에이전트가 코드를 쓰기 전에 7단계 사다리를 거치게 만드는 플러그인. 이게 꼭 있어야 하나, 코드베이스에 이미 있나, 표준 라이브러리로 되나를 차례로 확인해 먼저 걸리는 단계에서 멈춥니다. 검증, 오류 처리, 보안, 접근성은 줄이지 않습니다.
tool · claudekit.io / tools / ponytail
§ 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 설정을 먼저 제거해야 합니다.