Chrome DevTools MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

실제 Chromium — 브라우저처럼 정확히 페이지를 렌더링합니다
인사이트가 있는 성능 추적 (LCP, CLS, render-blocking 리소스)
전체 네트워크 탭 액세스 — 요청/응답 본문, 타이밍, 리다이렉트
DOM 스냅샷, 스크린샷 및 클릭/타입/스크롤 동작
콘솔 로그 캡처 및 페이지 컨텍스트에서의 라이브 JS 평가
Google의 Chrome DevTools 팀이 관리합니다

라이브 데모

실제 사용 모습

chrome-devtools.replay ▶ 준비됨

0/0

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "chrome-devtools",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "chrome-devtools": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "chrome-devtools-mcp"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: Chrome DevTools

Lighthouse 스타일의 추적으로 페이지가 느린 이유를 진단하세요

👤 프론트엔드 및 성능 엔지니어 ⏱ ~20 min intermediate

언제 쓸까: 페이지가 느리고 추측하는 대신 Claude가 추적을 실행하여 실제 병목을 지적하기를 원할 때

사전 조건

대상 URL이 로그인 없이 로드됩니다 (또는 먼저 인증을 처리합니다) — navigate_page를 URL과 함께 사용하세요; 인증 게이트된 페이지의 경우 먼저 chrome-devtools 클릭/타입 도구를 통해 로그인하세요

흐름

성능 추적 실행

https://example.com/product/123을 여세요. CPU 스로틀링 4x와 slow-3G 네트워크 프로필로 성능 추적을 실행하세요. LCP, CLS 및 TBT를 알려주세요.✓ 복사됨

→ 세 개의 메트릭 숫자와 추적 요약
상위 원인 찾기

LCP 지연에 가장 많이 기여하는 단일 자산 또는 스크립트는 무엇입니까? 요청 타이밍을 표시하세요.✓ 복사됨

→ 특정 URL 식별, 타이밍 분석 (DNS/connect/TTFB/download)
구체적인 수정 제안

LCP를 2.5초 미만으로 이동시키는 가장 저렴한 수정사항은 무엇입니까? 추가할 특정 줄이 있는 하나의 변경 (preconnect, preload, defer, lazy 또는 bundle-split)을 제안하세요.✓ 복사됨

→ 실행 가능한 HTML/JS diff, 일반적인 목록이 아닙니다

결과: 명명된 원인과 구체적인 수정사항이 있는 성능 회귀, 적용 후 추적을 다시 실행하여 검증 가능합니다.

함정

추적이 실행마다 다양함 — 일회성 숫자가 오도합니다 — 추적을 3번 실행하고 결론을 내리기 전에 중앙값을 취하세요
로컬/개발 빌드는 프로덕션과 다릅니다 — 압축이 없는 localhost가 아닌 프로덕션 URL 또는 CDN 제공 미리보기에 대해 추적하세요

함께 쓰기: filesystem · github

Claude가 방금 코딩한 기능이 실제로 브라우저에서 작동하는지 확인하세요

👤 에이전트의 작업을 마무리하는 AI 지원 개발자 ⏱ ~10 min beginner

언제 쓸까: Claude가 방금 프론트엔드 코드를 편집했습니다. '완료'라고 말하기 전에 페이지를 열고 버튼을 클릭하여 작동하는지 확인하려면

사전 조건

개발 서버 실행 중 — 다른 터미널에서 npm run dev를 실행하세요; URL을 기록하세요

흐름

기능을 열고 스크린샷 찍기

http://localhost:3000/new-feature를 여세요. 스크린샷을 찍으세요. 보는 것을 설명하세요 — 의도와 일치합니까?✓ 복사됨

→ 스크린샷과 정직한 설명 (버튼이 화면 밖에 렌더링되었을 수 있음을 지적할 수 있음)
상호 작용 실행

테스트 데이터로 '제출' 버튼을 클릭하세요: {email: '[email protected]'}. 나가는 네트워크 요청과 응답을 캡처하세요.✓ 복사됨

→ 200 응답과 일치하는 페이로드가 있는 네트워크 항목
콘솔에서 오류 확인

해당 흐름 중에 콘솔 오류나 경고가 있습니까? React 하이드레이션 경고 또는 누락된 키 경고를 포함하세요.✓ 복사됨

→ 깨끗한 콘솔, 또는 발견된 모든 경고에 대한 구체적인 수정

결과: 자체 테스트된 기능, 스크린샷 + 네트워크 추적을 증거로 사용합니다. 'AI가 작성한 코드가 실제로 작동하지 않음' 격차를 좁힙니다.

함정

스크린샷은 괜찮아 보이지만 상호 작용이 손상됨 — 항상 사용자 흐름을 실행하세요 (클릭/타입), 단순히 시각적으로 검사하지 마세요
HMR이 Claude의 스크린샷과 경합 — 탐색 후 networkidle을 기다린 후 아무것도 단언하세요

함께 쓰기: filesystem · github

프론트엔드의 API 호출이 실패하는 이유를 디버그하세요

👤 로컬에서는 '발생하지 않는' 4xx/5xx를 추적하는 풀스택 개발자 ⏱ ~15 min intermediate

언제 쓸까: 브라우저 콘솔에 실패한 fetch가 표시되고 전송되는 헤더/본문에 대한 자신의 메모리를 신뢰하지 않습니다.

흐름

실패한 호출 트리거

페이지를 열고 실패하는 작업을 수행하세요. 실패한 요청의 전체 URL, 메서드, 헤더 및 본문을 캡처하세요.✓ 복사됨

→ 정확한 요청 페이로드 표시 — 추측 없음
예상과 비교

백엔드는 헤더 X-Client-Id와 user_id 필드가 있는 JSON 본문을 예상합니다. 실제로 무엇이 나가고 있습니까? Diff를 하세요.✓ 복사됨

→ 특정 누락 또는 잘못된 필드 식별
수정 및 재검증

요청이 예상과 일치하도록 소스 코드를 수정하세요. 그런 다음 페이지를 다시 로드하고 호출이 이제 200을 반환하는지 확인하세요.✓ 복사됨

→ 최종 네트워크 항목은 원래 오류가 아닌 200을 표시합니다

결과: 고정된 API 호출, 네트워크 탭 증명으로 현재 작동 — '내 머신에서는 작동합니다' 없음

함정

세션 쿠키 또는 CORS preflight가 실제 요청을 마스킹합니다 — 실패한 요청만 보지 마세요 — preflight OPTIONS와 Set-Cookie 기록을 확인하세요

함께 쓰기: filesystem · postgres

CSS 리팩터 후 시각적 회귀를 감지하세요

👤 디자인 시스템 마이그레이션을 수행하는 프론트엔드 개발자 ⏱ ~20 min intermediate

언제 쓸까: CSS/토큰을 리팩터했습니다. 병합하기 전에 '아, 버튼이 이제 분홍색입니다'를 잡으려고 합니다.

흐름

주요 페이지를 메인에서 스냅샷

http://localhost:3000 (메인 브랜치)에서 /, /pricing, /dashboard를 스크린샷하세요. /tmp/visual/main/에 저장하세요.✓ 복사됨

→ 3개의 스크린샷 저장됨
브랜치에서 동일한 페이지를 스냅샷

'css-refactor' 브랜치로 전환하고 개발 서버를 다시 시작하세요. 동일한 3개 페이지를 /tmp/visual/branch/에 스크린샷하세요.✓ 복사됨

→ 3개의 일치하는 경로 스크린샷 저장됨
Diff 및 설명

각 쌍을 시각적으로 비교하고 변경 사항을 설명하세요. 픽셀 레벨의 안티앨리어싱을 무시하세요; 디자이너가 주목할 모든 것에 플래그를 지정하세요.✓ 복사됨

→ 페이지별 diff 요약, '같아 보입니다' 아님

결과: 검토 준비 완료 diff, 의도하지 않은 시각적 변경을 잡습니다.

함정

동적 콘텐츠 (날짜, 무작위 인사말)가 샷 사이에서 변경됨 — 시간을 스텁하고 RNG를 동결하거나 해당 영역을 자르세요

함께 쓰기: filesystem · github

조합

다른 MCP와 조합해 10배 효율

chrome-devtools + filesystem

소스 편집 → 페이지 재로드 → 검증, 타이트 루프에서

localhost:3000/checkout를 여세요. 양식의 제출 버튼 색상이 잘못되었습니다. src/에서 관련 CSS를 찾아 수정한 다음 다시 로드하고 스크린샷을 찍어 확인하세요.✓ 복사됨

chrome-devtools + github

이슈에서 버그를 재현하고, 수정을 검증하고, 스크린샷과 함께 PR을 열기

이슈 #482에서 375px 너비의 /pricing에서 레이아웃 버그를 보고합니다. chrome-devtools로 재현하세요 (375px에서 스크린샷), CSS를 수정하고, 이전/이후 스크린샷을 포함하는 PR을 열어보세요.✓ 복사됨

chrome-devtools + sentry

Sentry에서 찾은 실제 사용자 오류를 로컬 브라우저에서 재현하기

Sentry 이슈 WEB-3a91의 경우, 사용자가 /cart로 탐색한 다음 '결제'를 클릭했음을 보여주는 빵가루 흔적이 있습니다. chrome-devtools에서 이를 재현하고 실제로 무엇이 깨지는지 캡처하세요.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
navigate_page	url: str, wait_for?: 'load'\|'networkidle'	모든 페이지 상호 작용 시작	무료
take_screenshot	fullPage?: bool, selector?: str	네비게이션 또는 상호 작용 후 시각적 확인	무료
take_snapshot	none	텍스트로 된 구조화된 페이지 콘텐츠 — Claude가 추론하기에 스크린샷보다 더 좋음	무료
click	selector: str \| uid: str	CSS 선택자 또는 스냅샷 UID로 요소 클릭	무료
fill	selector: str, value: str	입력 필드에 입력	무료
evaluate_script	script: str	페이지 컨텍스트에서 임의의 JS 실행하여 검사	무료
list_console_messages	none	페이지에서 콘솔 로그 및 오류 읽기	무료
list_network_requests	filter?: str	발생한 모든 XHR/fetch 검사	무료
get_network_request	requestId: str	하나의 요청의 전체 헤더 및 본문 가져오기	무료
performance_start_trace	reload?: bool, cpu_throttle?: number, network?: 'slow3g'\|'fast3g'	성능 기록 시작	무료
performance_stop_trace	none	실행 중인 성능 추적 중지 및 분석	무료
emulate_cpu	rate: number	느린 장치 시뮬레이션 (4x = 중급 모바일)	무료
emulate_network	profile: 'slow3g'\|'fast3g'\|'offline'	제약이 있는 네트워크 하에서 테스트	무료
new_page / close_page / select_page	various	여러 탭 관리	무료

비용 및 제한

운영 비용

API 쿼터: 없음 — 로컬 브라우저 실행
호출당 토큰: 스냅샷 및 네트워크 덤프는 클 수 있습니다 (5-30k 토큰); take_snapshot은 일반적으로 전체 스크린샷과 DOM 덤프보다 토큰 효율적입니다
금액: 무료
팁: Claude가 구조를 추론하기 위해 take_screenshot보다 take_snapshot을 선호하세요 — 스냅샷은 간결하고 텍스트 기반입니다. 스크린샷은 사람이 검토할 수 있도록 저장하세요.

보안

권한, 시크릿, 파급범위

자격 증명 저장: MCP 레이어에서는 없음; 세션 중에 사이트에 로그인하면 쿠키가 닫을 때까지 Chromium 프로필에 있습니다

데이터 외부 송신: Chromium은 사용자 대신 공개 웹을 탐색합니다 — 대상은 귀하의 IP를 받습니다. Chromium의 기본값을 초과하여 Google으로의 원격 분석 없음

절대 부여 금지: 실제 로그인/암호가 저장된 실제 브라우저 프로필을 가리키지 마세요

Claude에게 '사이트 X에 로그인'하도록 요청하면 브라우저 프로필에 세션 쿠키를 저장합니다. 해당 프로필을 개인 프로필과 분리하세요.
이해하지 못하는 코드를 evaluate_script하지 마세요 — 페이지의 출처에서 전체 액세스 권한으로 실행됩니다.

문제 해결

자주 발생하는 오류와 해결

Chromium이 시작되지 않음 — Linux에서 누락된 종속성

누락된 시스템 라이브러리를 설치하세요: sudo apt-get install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libxkbcommon0 libasound2. MCP는 Chromium을 번들로 포함하지만 모든 런타임 종속성을 포함하지는 않습니다.

확인: `npx chrome-devtools-mcp --version` 실행 — 오류는 누락된 라이브러리의 이름을 지정합니다

navigate_page가 느린 페이지에서 타임아웃됨

기본 networkidle 대신 wait_for: 'load'를 전달하세요; 또는 클라이언트의 MCP 구성에서 타임아웃을 증가시키세요.

클릭 실패: 요소를 찾을 수 없음

선택자가 오래되었거나 숨겨졌습니다. 먼저 take_snapshot을 다시 호출하고 스냅샷에서 새 UID를 사용하세요.

성능 추적이 비어 있음

추적 중에 페��지를 다시 로드하거나 페이지와 상호 작용해야 합니다 (reload: true) — 유휴 탭은 타임라인을 생성하지 않습니다.

대안

Chrome DevTools 다른 것과 비교

대안	언제 쓰나	단점/장점
Playwright MCP	크로스 브라우저 테스트 (Firefox, WebKit)가 필요하거나 Playwright의 API 표면을 선호할 때	유사한 성능; chrome-devtools는 더 깊은 성능 추적을 가지고 있고, playwright는 더 넓은 자동화를 가지고 있습니다
Puppeteer MCP	더 낮은 수준의 Puppeteer API를 원할 때	Chrome만 지원, chrome-devtools MCP와 크게 겹칩니다
browser-tools MCP	DevTools Protocol 확장을 통해 기존 Chrome에 연결하려면	새 샌드박스 없음 — 로그인된 상태로 실제 브라우저 세션을 사용합니다

Chrome DevTools

왜 쓰나요

핵심 기능

라이브 데모

실제 사용 모습

설치

클라이언트 선택

사용 사례

실전 활용법: Chrome DevTools

사전 조건

흐름

함정

사전 조건

흐름

함정

흐름

함정

흐름

함정

조합

다른 MCP와 조합해 10배 효율

도구

이 MCP가 노출하는 것

비용 및 제한

운영 비용

보안

권한, 시크릿, 파급범위

문제 해결

자주 발생하는 오류와 해결

대안

Chrome DevTools 다른 것과 비교

더 보기

리소스