Claude Code를 위한 Chrome DevTools MCP: 콘솔, 네트워크, 성능 읽기 (2분 설정)

페이지가 깨졌고 당신이 중개자일 때: DevTools를 열고 빨간색 콘솔 오류를 복사하여 Claude Code에 붙여넣고, 실패한 네트워크 요청을 위해 돌아가 다시 붙여넣은 다음, 단어로 레이아웃 이동(layout shift)을 설명합니다. Claude Code는 당신의 소스를 읽을 수 있지만, 디버깅이 맹목적이며 당신이 기억해서 복사한 것에서 추측할 뿐입니다.

Chrome DevTools MCP는 당신을 그 순환 고리에서 벗어나게 합니다. 이것은 Chrome DevTools 팀의 공식 서버(~52k GitHub stars)이며, 설정은 단 하나의 명령어로 끝납니다. 이 에이전트는 실제 Chrome을 열고 콘솔 메시지(소스 매핑된 스택 트레이스 포함)를 읽고, 네트워크 요청을 검사하며, 성능 추적을 기록하고, Lighthouse 감사를 실행하며, 힙 스냅샷을 찍습니다. 그런 다음 실제로 본 것을 기반으로 코드를 수정합니다.

이미 저희의 Playwright MCP 설정을 사용하고 계신가요? 두 가지는 상호 보완적입니다. Playwright는 흐름(flow)을 통해 브라우저를 구동하도록 구축되었습니다. DevTools MCP는 페이지가 왜 깨지거나 느린지 알아내는 데 중점을 두고 구축되었습니다.

빠른 시작 (Quick Start)

단 하나의 명령어로 충분합니다 (Node.js LTS 및 Chrome 필요):

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

Claude Code를 재시작한 다음, “https://developers.chrome.com의 성능을 확인해 줘”라고 요청하세요. Chrome이 열리고 추적(trace)을 기록할 것입니다. 총 시간: 약 2분입니다.

⚡ 이 프롬프트를 복사하세요: Claude Code가 직접 설치하고 검증하게 하라

아래의 수동 단계를 건너뛰고 모든 작업을 에이전트에게 맡기세요:

You have shell access and the `claude mcp` CLI on this machine. Set up the Chrome DevTools MCP server and report back. Do not tell me it's done unless step 5 actually confirms it:

1. Check `node --version`. It needs a current Node.js LTS (20.19+ or 22.12+). If Node is missing or older, install the current LTS using whatever this machine already uses (nvm, Homebrew, winget, or the official installer from nodejs.org), then confirm `node --version` and `npx --version` work in this shell.
...

에이전트는 가장 흔한 npx 서버 시작 실패 원인이 오래된 Node 버언이기 때문에 먼저 Node를 확인합니다. Step 1에서 다른 어떤 것보다 이것을 처리합니다.

필요한 것들

단계별 설정

에이전트에게 위임하는 대신 직접 수동으로 진행하고 싶으신가요? 여기 수동 버전이 있습니다.

Step 1 — Node.js 확인

~1분

node --version

20.19+ 또는 22.12+ (또는 23+)가 필요합니다. 더 오래된 버전인가요? nodejs.org나 버전 관리자에서 최신 LTS 버전을 설치하세요.

Step 2 — 서버 추가

~1분

macOS / Linux. --scope user를 사용하면 모든 프로젝트에서 사용할 수 있습니다:

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

Windows. cmd /c 래퍼는 “MCP error -32000: Connection closed” 시작 실패를 방지합니다:

claude mcp add chrome-devtools --scope user -- cmd /c npx -y chrome-devtools-mcp@latest

실제 실행, 2026년 10월, Windows 11, Node 24. _Connected_는 서버가 시작되었음을 의미하며, Chrome 자체는 브라우저 도구가 실행될 때만 열립니다.

Step 3 — 또는 플러그인으로 설치 (MCP + skills)

~2분

플러그인 버전은 서버와 추가 스킬을 번들로 제공합니다. 만약 이미 Step 2에서 CLI를 사용하여 추가했다면, 먼저 그것을 제거하세요 (claude mcp remove chrome-devtools). 그런 다음 Claude Code 내부에서:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Claude Code를 재시작하고 /skills로 확인하세요.

Step 4 — 재시작 및 첫 테스트 실행

~1분

서버가 연결될 때 Chrome은 열리지 않습니다. 에이전트가 브라우저 도구를 처음 사용할 때 열립니다. 다음 명령어로 시작해 보세요:

https://developers.chrome.com의 성능을 확인합니다

5단계 — 브라우저 모드 선택 (선택 사항)

~2분

플래그는 chrome-devtools-mcp@latest 뒤에 붙입니다. 원하는 서버로 다시 추가합니다 (먼저 claude mcp remove chrome-devtools를 실행하세요):

임시 프로필(Throwaway profile), 브라우저가 닫히면 삭제됨:

claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --isolated

표시되지 않는 창(No visible window):

claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --headless

사용자 본인의 실행 중인 Chrome: 로그인된 페이지의 디버깅에 유용합니다. Chrome 144 이상이 필요합니다: chrome://inspect/#remote-debugging을 열고, 원격 디버깅(remote debugging)을 활성화한 다음:

claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --autoConnect

Chrome은 처음 실행 시 권한 대화 상자를 표시합니다. '허용(Allow)'을 클릭하세요.

Claude Code는 콘솔, 네트워크 요청 및 성능 추적(performance traces) 자체를 읽습니다.

각 부분이 하는 일

“Connected”는 서버가 시작되었음을 확인해 줄 뿐입니다. 진정한 테스트는 에이전트가 사용자 소스 코드만으로는 답변할 수 없는 디버깅 작업입니다:

Open http://localhost:3000 (또는 [YOUR APP URL]) in Chrome. List any console errors and any network requests that returned 4xx/5xx, then tell me the most likely cause of each, citing the file and line from the stack trace.

실제 콘솔 출력과 요청 상태(추측이 아닌)가 돌아온다면, 이는 엔드투엔드로 작동하고 있다는 의미입니다.

피해야 할 일반적인 실수들

• Chrome이 열리지 않았다고 생각하는 것. 브라우저는 에이전트가 필요로 하는 도구를 호출할 때만 실행됩니다. 연결만 한다고 해서 창이 열리지는 않습니다.
• Windows에서 cmd /c 래퍼를 생략하는 것. 일반적인 npx는 Windows에서 다른 프로세스 내부에서 실행될 때 종종 실패합니다. 이것이 전형적인 “Connection closed” 오류입니다.
• CLI 버전과 플러그인을 모두 설치하는 것. 문서는 플러그인 설치 전에 CLI로 설치된 서버를 제거하라고 안내하며, 그렇지 않으면 두 개의 복사본이 동일한 브라우저 프로필을 두고 충돌할 수 있습니다.
• 에이전트의 Chrome에서 민감한 계정을 탐색하는 것. 이 서버는 브라우저의 내용을 MCP 클라이언트에 노출합니다. --autoConnect를 사용하면 해당 프로필의 열려 있는 모든 창을 볼 수 있습니다. 로그인 정보가 필요하지 않다면 --isolated를 사용하세요.
• Google에 무엇이 전송되는지 모르는 것. 사용량 통계는 기본적으로 활성화되어 있으며, 성능 추적은 페이지 URL을 CrUX API로 전송할 수 있습니다. 프로젝트에 해당 사항이 있다면 --no-usage-statistics와 --no-performance-crux를 추가하세요.

Q&A

Playwright MCP와 어떻게 다른가요?

Playwright MCP는 다양한 브라우저에 걸쳐 흐름(클릭, 채우기, 탐색)을 통해 브라우저를 구동하도록 구축되었습니다. Chrome DevTools MCP는 Chrome 전용이지만 다음 기능을 추가합니다: 성능 추적, Lighthouse, 네트워크 검사, 소스 매핑된 콘솔 오류, 히프 스냅샷 등. 많은 사람들이 두 가지 모두를 사용합니다.

무료인가요?

네. Chrome DevTools 팀에서 만든 오픈 소스이며 로컬에서 실행됩니다. API 키나 계정이 필요하지 않습니다.

로그인(login)이 필요한 페이지도 디버깅할 수 있나요?

네, --autoConnect를 사용하여 사용자가 직접 실행하는 Chrome에 연결(attach)하면 됩니다 (Chrome 144 이상, chrome://inspect/#remote-debugging에서 원격 디버깅 활성화). 그러면 에이전트가 이미 로그인된 세션에서 작동합니다.

Edge나 Brave에서도 작동하나요?

공식적으로는 Google Chrome과 Chrome for Testing만 지원됩니다. 다른 Chromium 브라우저도 작동할 수 있지만, 보장되지는 않습니다.

어떻게 제거하나요?

claude mcp remove chrome-devtools를 사용합니다. 기본 브라우저 프로필은 ~/.cache/chrome-devtools-mcp/에 있습니다. 이 폴더까지 삭제하려면 해당 경로를 직접 지우시면 됩니다.

공식 자료(Official Resources)

• GitHub의 Chrome DevTools MCP — 소스 코드, 변경 로그, 이슈
• 도구 참조(Tool reference) — 모든 도구 및 해당 기능을 활성화하는 플래그
• 설정 가이드(Configuration guide) — 모든 서버 플래그
• 문제 해결(Troubleshooting) — Windows, WSL, 샌드박스 문제
• Claude Code MCP 문서 — claude mcp 명령어 참조

원래 quickpromptco.com에 게시되었으며, 해당 가이드는 최신 상태로 유지됩니다.