클로드 코드에서 크롬 개발자 도구 MCP 사용하기 (설정, 첨부 모드 vs Playwright MCP)

요약: Chrome DevTools MCP는 Chrome DevTools 팀이 공개한 오픈 소스 MCP 서버입니다. 이 서버를 통해 Claude Code, Cursor, Codex 또는 Gemini CLI가 실제 Chrome을 구동하고 다음과 같은 DevTools 기능을 사용할 수 있습니다: 네트워크 요청, 콘솔, 스크린샷, 성능 추적(performance traces), Lighthouse 및 힙 스냅샷(heap snapshots). claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest 명령어로 설치할 수 있습니다. --autoConnect 플래그를 추가하면 (Chrome 144 이상) 이미 로그인된 Chrome에 연결하여 사용할 수 있습니다. 이는 현재 보고 있는 페이지의 디버깅에 매우 유용합니다. 하지만 '이 앱 전체 API 매핑' 같은 작업에는 적합하지 않습니다.

사용하고 싶었던 이유

제 에이전트가 검사할 수 없는 프론트엔드 수정 사항을 계속 작성했습니다. 브라우저 MCP 서버를 사용하면 페이지를 열고, 콘솔을 읽으며, 실패한 요청을 확인하고, 무엇이 고장 났는지 알려줍니다. Chrome 팀은 이를 2025년 9월에 공개 프리뷰로 배포했으며, 현재 약 60개의 도구(일부는 옵트인 플래그 뒤에 숨겨져 있음)를 갖추고 있습니다.

설정

Node.js LTS와 최신 안정 버전의 Chrome이 필요합니다.

Claude Code

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

또는 a11y, 쿠키(cookies), LCP 및 메모리 누수(memory leaks)에 대한 스킬도 설치하는 플러그인을 사용할 수 있습니다:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Cursor (설정 → MCP → 새 MCP 서버) 및 대부분의 다른 클라이언트:

{
  "mcpServers": {
    "chrome-devtools": {
...

Codex / Gemini CLI

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

시도해 볼 첫 번째 프롬프트: https://developer.chrome.com의 성능을 확인해 줘. Chrome 창이 열리고 추적(trace)이 기록되는 것을 볼 수 있을 것입니다.

네트워크 도구

두 가지가 있습니다:

list_network_requests: 마지막 탐색 이후 페이지의 요청 목록을 가져옵니다. resourceTypes로 필터링하고, pageSize/pageIdx로 페이징하며, includePreservedRequests를 설정하여 3번의 탐색 기록까지 되돌아갈 수 있습니다.
get_network_request: 헤더(쿠키 및 Set-Cookie 포함)와 본문을 가진 단일 요청을 가져옵니다. responseFilePath는 큰 본문 데이터를 컨텍스트 창 대신 디스크에 작성합니다.

제가 가장 좋아하는 요령: reqid 없이 get_network_request를 호출하면 DevTools 네트워크 패널에서 선택한 어떤 요청이든 반환됩니다. 제가 깨진 API 호출을 클릭하고 "왜 403 에러가 발생했을까요?"라고 입력해봅니다.

헤더에 모델로 보내고 싶지 않은 토큰이 포함되어 있다면, 서버를 --redactNetworkHeaders 플래그와 함께 시작하세요.

첨부 모드 (로그인된 브라우저)

기본적으로 서버는 ~/.cache/chrome-devtools-mcp/chrome-profile에 있는 자체 프로필을 사용하여 Chrome을 실행합니다. --isolated를 사용하면 대신 임시 프로필을 사용합니다. 실제 로그인 상태에서 발생하는 문제를 디버깅하려면:

Chrome 144+에서 chrome://inspect/#remote-debugging을 열고 들어오는 연결을 허용하세요.
다음 플래그를 추가하세요:

   "args": ["-y", "chrome-devtools-mcp@latest", "--autoConnect"]

서버가 연결할 때마다 Chrome이 보여주는 권한 대화 상자를 승인합니다. 첨부된 상태에서는 "Chrome은 자동화 테스트 소프트웨어에 의해 제어되고 있습니다"라는 배너가 표시됩니다.

--autoConnect를 사용할 수 없는 경우 (샌드박스, 구형 Chrome)? 직접 Chrome을 실행하고 서버가 이를 가리키도록 설정하세요:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

"args": ["chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222"]

주의 사항: 첨부 모드는 에이전트에게 사용자의 쿠키와 로그인된 계정을 제공합니다. Google 자체 문서에서는 신뢰하는 에이전트와만 사용할 것을 권장합니다. 또한, 사용 통계는 기본적으로 활성화되어 있으므로 (--no-usage-statistics), 성능 도구는 CrUX로 추적 URL을 전송할 수 있습니다 (--no-performance-crux).

Chrome DevTools MCP 대 Playwright MCP

Playwright MCP (claude mcp add playwright npx @playwright/mcp@latest)는 상당 부분 겹치는 부분이 있습니다. 제가 선택하는 기준은 다음과 같습니다:

	Chrome DevTools MCP	Playwright MCP
브라우저	Chrome, Chrome for Testing	Chrome, Firefox, WebKit, Edge
...

사용자 흐름 및 크로스 브라우저 확인: Playwright. "이 페이지가 Chrome에서 느리거나 오류가 나는 이유": DevTools MCP. Playwright의 README에는 코딩 에이전트가 MCP보다 CLI(명령줄 인터페이스) + 스킬을 사용하는 것이 더 좋을 수 있다는 점도 언급되어 있는데, 이는 해당 호출 비용이 MCP보다 토큰을 적게 소모하기 때문입니다.

API 작업을 위한 한계점

두 서버 모두 에이전트가 연결된 동안 브라우저가 로드하는 것만 볼 수 있습니다. 제가 에이전트가 앱의 전체 API를 이해하기를 원할 때, 이는 문제가 됩니다:

요청 목록은 탐색(navigation)마다 초기화되므로 (최대 3번 뒤로 가기), 에이전트는 모든 화면을 클릭하며 진행해야 합니다.
각 화면은 도구 호출과 컨텍스트 비용이 발생합니다.
/orders/1042와 /orders/1043는 별도의 URL로 반환되므로, 에이전트는 이것들이 하나의 엔드포인트라는 것을 파악해야 합니다.
실제 로그인된 트래픽은 첨부 모드(attach mode)와 제 세션 인계가 필요합니다.
브라우저를 닫으면 트래픽도 사라집니다.

이러한 작업에는 제가 개발하는 Chrome 확장 프로그램인 Netraptor를 사용합니다. 이 도구는 제가 평소에 브라우징하거나 (또는 동일 사이트 페이지를 크롤링할 때) 앱의 fetch/XHR 호출을 기록하고, 이를 /orders/{id}와 같은 엔드포인트로 그룹화하며, Pro 플랜에는 로컬 읽기 전용 MCP 서버가 있어 에이전트가 실제 기록된 응답으로부터 "GET /orders/{id}는 무엇을 반환하는가?"라고 질문할 수 있게 합니다. 이 도구도 자체적인 한계점이 있습니다. 페이지 내부에서 기록하기 때문에 Cookie와 같은 브라우저 추가 헤더가 복사본에 포함되지 않습니다. DevTools MCP는 이러한 헤더를 보여줍니다. 따라서 저는 두 가지를 모두 실행합니다: "API의 구조가 어떤지"는 Netraptor로, "이것을 재현하는 방법"은 DevTools MCP로 사용합니다.

위 모든 문서 링크와 함께 전체 가이드는 netraptor.dev/guides/chrome-devtools-mcp에서 확인할 수 있습니다.