{{< 리소스 정보 >}}

Claude Code, Cursor, Copilot과 같은 코딩 에이전트는 코드를 작성하고, 테스트를 실행하고, 오류를 디버그할 수 있지만 실제 브라우저에서 웹사이트가 어떻게 보이는지 확인할 수는 없습니다. HTML 소스를 읽을 수 있지만 레이아웃, 스타일, 애니메이션 또는 런타임 동작을 인식할 수는 없습니다. 콘솔 로그를 확인할 수 있지만 사용자처럼 페이지와 상호 작용할 수는 없습니다.

Chrome DevTools MCP는 이러한 격차를 해소합니다. MCP(Model Context Protocol)를 통해 CDP(Chrome DevTools Protocol)의 모든 기능을 AI 코딩 에이전트에 노출하는 공식 Google Chrome 프로젝트입니다. 갑자기 코딩 에이전트가 표준화된 프로토콜을 통해 스크린샷을 찍고, 성능을 분석하고, 네트워크 요청을 검사하고, 콘솔 오류를 디버그하고, 브라우저 상호 작용을 자동화할 수 있습니다.

Chrome DevTools MCP란 무엇인가요? #

Chrome DevTools MCP(chrome-devtools-mcp)는 AI 코딩 에이전트가 Chrome DevTools에 액세스할 수 있게 해주는 MCP 서버입니다. Google의 Chrome DevTools 팀에서 관리하며 Apache-2.0 라이선스에 따라 출시됩니다.

이 프로젝트에는 두 가지 구성 요소가 있습니다.

1. MCP 서버 — CDP를 통해 코딩 에이전트를 라이브 Chrome 브라우저에 연결합니다.
2. CLI — MCP 없이 브라우저 자동화를 위한 독립 실행형 명령줄 도구

이를 통해 코딩 에이전트는 다음을 수행할 수 있습니다.

• 스크린샷을 통해 웹사이트 보기
• 추적 및 지표를 통해 성능을 측정
• 요청/응답 검사를 통해 네트워크 문제 디버그
• 자동화된 클릭, 입력 및 탐색을 통해 페이지와 상호작용
• DOM 및 CSS를 실시간으로 검사

주요 기능 #

스크린샷 캡처 #

모든 웹페이지의 전체 페이지 또는 뷰포트 스크린샷을 찍습니다. 코딩 에이전트는 이를 사용하여 사용자가 브라우저를 직접 열 필요 없이 CSS 변경 사항, 구성 요소 업데이트 또는 레이아웃 조정이 올바른지 시각적으로 확인할 수 있습니다.

상담원: "레이아웃을 확인하기 위해 스크린샷을 찍겠습니다."
→ chrome-devtools-mcp가 스크린샷을 캡처합니다.
→ 에이전트가 렌더링된 페이지를 봅니다.
→ 에이전트는 필요한 경우 CSS를 조정합니다.

성능 분석 #

성능 추적을 기록하고 실행 가능한 통찰력을 추출합니다.

• 핵심 웹 바이탈 — LCP, FID, CLS 측정
• 네트워크 워터폴 — 요청 타이밍 및 종속성 체인
• JavaScript 프로파일링 — 함수 실행 시간 및 호출 스택
• 프레임 속도 분석 — 버벅거림 감지 및 FPS 저하

네트워크 검사 #

모든 네트워크 요청 및 응답을 분석합니다.

• 요청 헤더, 응답 코드, 타이밍
• 페이로드 크기 및 압축 비율
• 실패한 요청 및 CORS 오류
• 서비스 워커 활동

콘솔 디버깅 #

소스 매핑된 스택 추적으로 브라우저 콘솔 메시지를 읽습니다.

• 파일 및 줄 번호에 JavaScript 오류가 발생했습니다.
• 애플리케이션의 Console.log 출력
• 더 이상 사용되지 않는 API에 대한 경고 메시지
• 코드의 사용자 정의 콘솔 메시지

DOM 및 CSS 검사 #

DOM 쿼리 및 조작:

• 선택기, 텍스트 또는 역할별로 요소 선택
• CSS 속성 읽기 및 수정
• 계산된 스타일 및 레이아웃 크기 확인
• 페이지 컨텍스트에서 JavaScript를 평가합니다.

브라우저 자동화 #

사용자 상호 작용 자동화:

• 버튼과 링크를 클릭하세요.
• 양식 작성 및 데이터 제출
• URL로 이동
• 대화 상자 및 프롬프트 처리
• 동적 콘텐츠를 스크롤하고 상호 작용합니다.

아키텍처 #

Chrome DevTools MCP는 Chrome DevTools 프로토콜을 통해 라이브 Chrome 브라우저에 연결됩니다.

┌──────────────────────────────────────────────┐
│              AI Coding Agent                 │
│  (Claude Code / Cursor / Copilot / etc.)     │
└──────────────────┬───────────────────────────┘
                   │ MCP Protocol (JSON-RPC)
                   ▼
┌──────────────────────────────────────────────┐
│         chrome-devtools-mcp Server           │
│                                              │
│  ┌────────────┐ ┌──────────┐ ┌────────────┐ │
│  │ Screenshots│ │ Network  │ │ Performance│ │
│  │   Tool     │ │ Tool     │ │   Tool     │ │
│  └────────────┘ └──────────┘ └────────────┘ │
│  ┌────────────┐ ┌──────────┐ ┌────────────┐ │
│  │  Console   │ │   DOM    │ │  Actions   │ │
│  │   Tool     │ │  Tool    │ │  Tool      │ │
│  └────────────┘ └──────────┘ └────────────┘ │
└──────────────────┬───────────────────────────┘
                   │ CDP (WebSocket)
                   ▼
┌──────────────────────────────────────────────┐
│              Live Chrome Browser             │
│                                              │
│  ┌──────────────────────────────────────┐    │
│  │         Your Web Application          │    │
│  └──────────────────────────────────────┘    │
└──────────────────────────────────────────────┘

설치 #

MCP 서버로 #

``배쉬

npm 설치 -g chrome-devtools-mcp

MCP 서버를 시작합니다 #

크롬-devtools-mcp 서버

코딩 에이전트는 MCP 서버에 연결하고 모든 DevTools 도구에 대한 액세스 권한을 얻습니다.

### CLI 도구로

``배쉬
# CLI를 설치합니다
npm 설치 -g chrome-devtools-mcp

# 스크린샷 찍기
chrome-devtools-mcp 스크린샷 --url https://example.com --output 스크린샷.png

# 성능 추적 기록
chrome-devtools-mcp 성능 --url https://example.com --output trace.json

# 콘솔 메시지 받기
chrome-devtools-mcp 콘솔 --url https://example.com

디버깅을 활성화한 상태에서 Chrome 실행 #

MCP 서버가 Chrome에 연결하려면 원격 디버깅이 활성화된 상태에서 Chrome을 실행해야 합니다.

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --new-window

# 리눅스
google-chrome --remote-debugging-port=9222 --new-window

# 윈도우즈
"C:\Program Files\Google\Chrome\Application\chrome.exe" ^
  --원격-디버깅-포트=9222

또는 CLI의 자동 실행 기능을 사용하십시오.

``배쉬 크롬-devtools-mcp 서버 –auto-launch-chrome

그러면 올바른 디버깅 플래그를 사용하여 새 Chrome 인스턴스가 자동으로 시작됩니다.

## 도구 참조

### 스크린샷

현재 페이지 또는 특정 요소의 스크린샷을 캡처합니다.

``배쉬
# 전체 페이지 스크린샷
chrome-devtools-mcp 스크린샷 --full-page

# 뷰포트 스크린샷
chrome-devtools-mcp 스크린샷 --viewport

# 특정 요소
chrome-devtools-mcp 스크린샷 --selector ".hero-section"

네트워크 #

네트워크 요청 및 응답을 분석합니다.

``배쉬

모든 요청을 나열합니다. #

크롬-devtools-mcp 네트워크 –목록

상태 코드로 필터링 #

chrome-devtools-mcp 네트워크 –filter 상태=404

특정 요청을 검사합니다. #

chrome-devtools-mcp network –inspect url=https://api.example.com/data

### 성능

성능 추적을 기록하고 분석합니다.

``배쉬
# 30초 추적을 기록합니다.
chrome-devtools-mcp 성능 --기간 30

# 핵심 웹 바이탈 분석
크롬-devtools-mcp 성능 --cwv

# 프로필 JavaScript 실행
크롬-devtools-mcp 성능 --cpu

콘솔 #

브라우저 콘솔 메시지를 읽습니다.

``배쉬

모든 메시지 가져오기 #

크롬-devtools-mcp 콘솔 –all

오류만 필터링 #

chrome-devtools-mcp 콘솔 –레벨 오류

콘솔 지우기 #

chrome-devtools-mcp 콘솔 –clear

### 돔

DOM을 쿼리하고 조작합니다.

``배쉬
# 요소를 선택합니다
chrome-devtools-mcp dom --query "button.submit"

# 내부 텍스트 읽기
chrome-devtools-mcp dom --text "#main-heading"

# CSS 수정
chrome-devtools-mcp dom --style "#hero { 배경: 파란색; }"

# 자바스크립트 평가
chrome-devtools-mcp dom --eval "document.title"

액션 #

브라우저 상호 작용을 자동화합니다.

``배쉬

URL로 이동 #

chrome-devtools-mcp 작업 –https://example.com 탐색

요소를 클릭합니다 #

chrome-devtools-mcp 작업 –“button.login"을 클릭하세요.

양식 작성 #

chrome-devtools-mcp action –fill “#email” “user@example.com” chrome-devtools-mcp 작업 –fill “#password” “secret123” chrome-devtools-mcp 작업 –“button.submit"을 클릭하세요.

## 코딩 에이전트와의 통합

### 클로드 코드

```bash
# In your MCP configuration (~/.claude/settings.json)
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "chrome-devtools-mcp",
      "args": ["server"]
    }
  }
}
```

Claude Code는 이제 모든 DevTools 도구를 사용하여 웹 애플리케이션을 검사하고 디버깅할 수 있습니다.

### 커서

설정 → 기능 → MCP 서버 → 서버 추가 명령: chrome-devtools-mcp 인수: 서버

### 코파일럿(VS Code)

``json
// .vscode/mcp_servers.json
{
  "서버": {
    "chrome-devtools": {
      "명령": "chrome-devtools-mcp",
      "args": ["서버"]
    }
  }
}

실제 사용 사례 #

1. 시각적 회귀 테스트 #

코딩 에이전트는 CSS를 변경하고 즉시 확인합니다.

상담원: "버튼 테두리 반경을 8px로 변경했습니다. 확인해 보겠습니다..."
→ 스크린샷을 찍습니다
→ 기준선과 비교
→ 보고서: "테두리 반경이 올바르게 적용되었습니다. 시각적 회귀가 감지되지 않았습니다."

2. 성능 최적화 #

Agent: "The page load time seems slow. Let me profile it..."
→ Records performance trace
→ Identifies: "LCP is 4.2s, dominated by unoptimized hero image (2.1s)"
→ Fixes: "Reduced image size and added lazy loading"
→ Verifies: "LCP improved to 1.8s"

3. 콘솔 오류 디버깅 #

상담원: "사용자들이 JavaScript 오류를 신고하고 있습니다. 콘솔을 확인해 보겠습니다..."
→ 콘솔 메시지를 읽습니다.
→ 발견: "잡히지 않은 TypeError: 라인 42에서 정의되지 않은 'map' 속성을 읽을 수 없습니다."
→ 수정: ".map()을 호출하기 전에 null 검사를 추가했습니다."
→ 확인: "수정 후 콘솔이 깨끗합니다."

4. API 통합 테스트 #

상담원: "API 통합이 작동하는지 확인하겠습니다..."
→ 네트워크 요청을 검사합니다.
→ 다음을 찾습니다: "POST /api/login이 401을 반환합니다 — Authorization 헤더가 누락되었습니다."
→ 수정: "요청 헤더에 전달자 토큰 추가"
→ 확인: "로그인 시 사용자 데이터와 함께 200이 반환됩니다."

5. 양식 자동화 #

Agent: "Let me test the registration form end-to-end..."
→ Navigates to /register
→ Fills in name, email, password
→ Clicks submit
→ Checks for success message
→ Reports: "Registration flow works. Success message displayed."

대안과의 비교 #

Chrome DevTools MCP 대 Puppeteer #

Chrome DevTools MCP는 AI 에이전트용으로 특별히 제작되었습니다. Puppeteer는 에이전트 사용을 위해 수동 통합이 필요한 범용 브라우저 자동화 라이브러리입니다.

Chrome DevTools MCP 대 극작가 #

Playwright는 브라우저 간 테스트에 더욱 다재다능합니다. Chrome DevTools MCP는 Chrome 관련 디버깅을 위해 더 간단하고 AI 기반입니다.

Chrome DevTools MCP 대 Selenium #

Chrome DevTools MCP는 Selenium보다 더 깊은 브라우저 통찰력을 제공합니다. Selenium은 브라우저 간 E2E 테스트에 더 좋습니다. Chrome DevTools MCP는 디버깅 및 개발에 더 좋습니다.

보안 고려 사항 #

Chrome 팀의 면책조항 #

프로젝트는 다음과 같이 명시적으로 경고합니다.

chrome-devtools-mcp는 브라우저 인스턴스의 콘텐츠를 MCP 클라이언트에 노출하여 브라우저나 DevTools의 모든 데이터를 검사, 디버그 및 수정할 수 있도록 합니다. MCP 클라이언트와 공유하고 싶지 않은 민감한 정보나 개인 정보를 공유하지 마세요.

모범 사례 #

1. 전용 브라우저 프로필 사용 — MCP가 활성화된 상태에서 개인 검색 프로필을 사용하지 마세요.
2. 민감한 로그인 방지 — 디버그 가능한 브라우저에서 뱅킹, 이메일 또는 기타 민감한 세션을 열지 마세요.
3. 디버깅 포트 격리 — 외부 액세스를 방지하기 위해 로컬 호스트(--remote-debugging-port=9222)에만 바인딩합니다.
4. 에이전트 동작 검토 — 특히 자동화된 워크플로에서 코딩 에이전트가 브라우저 액세스를 통해 수행하는 작업을 모니터링합니다.

제한사항 #

크롬 전용 #

chrome-devtools-mcp는 테스트용으로만 Google Chrome과 Chrome을 공식적으로 지원합니다. 다른 Chromium 기반 브라우저(Edge, Brave, Arc)도 작동할 수 있지만 보장되지는 않습니다. 파이어폭스와 사파리는 지원되지 않습니다.

라이브 브라우저 필요 #

MCP 서버에는 원격 디버깅이 활성화된 라이브 Chrome 브라우저 인스턴스가 필요합니다. 브라우저를 실행하지 않으면 정적 HTML 파일이나 헤드리스 스크린샷을 분석할 수 없습니다.

단일 브라우저 인스턴스 #

MCP 서버는 하나의 Chrome 인스턴스에 연결됩니다. 다중 브라우저 테스트(Chrome + Firefox)의 경우 별도의 MCP 서버나 Playwright와 같은 도구가 필요합니다.

페이지 수정 보장 없음 #

에이전트는 DOM 및 CSS를 수정할 수 있지만 페이지가 어떻게 응답할지 보장할 수 없습니다. 일부 사이트는 에이전트가 수행할 수 있는 작업을 제한할 수 있는 Shadow DOM, iframe 또는 공격적인 CSP 헤더를 사용합니다.

편집자의 의견 #

Chrome DevTools MCP는 AI 코딩 에이전트를 시각적으로 인식하도록 만드는 데 있어 중요한 진전입니다. 이 도구가 존재하기 전까지 코딩 에이전트는 실제 브라우저에서 변경 사항이 어떻게 보이는지 전혀 알지 못했습니다. HTML과 CSS 소스 코드를 읽을 수는 있지만 렌더링된 결과는 볼 수 없습니다.

이는 CSS 사양을 읽을 수 있지만 웹페이지를 볼 수 없는 인간 디자이너와 같습니다. 종이에 완벽한 코드를 작성할 수는 있지만 실제로 의도한 시각적 결과가 생성되는지 확인할 방법이 없습니다.

Chrome DevTools MCP는 에이전트에게 눈과 동등한 기능을 제공하여 이를 변경합니다. 스크린샷을 통해 레이아웃을 볼 수 있습니다. 성능 추적을 통해 속도를 측정할 수 있습니다. 네트워크 검사를 통해 API 문제를 디버깅할 수 있습니다. 콘솔 액세스를 통해 오류 메시지를 읽을 수 있습니다. DOM 쿼리를 통해 페이지 구조를 검사할 수 있습니다.

이것이 공식 Google Chrome 프로젝트라는 사실은 신뢰성을 제공하고 장기적인 유지 관리를 보장합니다. Chrome DevTools 프로토콜은 브라우저 디버깅의 표준이며 MCP를 통해 이를 노출하면 프로토콜을 지원하는 모든 AI 코딩 에이전트에 액세스할 수 있습니다.

AI 코딩 에이전트를 사용하는 웹 개발자에게는 필수 도구입니다. 이는 코드 작성과 시각적 결과 확인 사이의 피드백 루프를 닫아 정확하고 세련된 웹 애플리케이션을 생성하는 에이전트의 능력을 극적으로 향상시킵니다.

FAQ #

Q: chrome-devtools-mcp는 헤드리스 Chrome에서 작동하나요? #

답: 그렇습니다. 헤드리스 모드(--headless=new)에서 Chrome을 시작할 수 있으며 chrome-devtools-mcp는 계속 CDP를 통해 연결됩니다. 그러나 스크린샷과 같은 일부 기능은 헤드리스 모드에서 다르게 작동할 수 있습니다.

Q: Chrome이 아닌 브라우저에서도 사용할 수 있나요? #

답: 공식적으로는 아닙니다. 이 프로젝트는 테스트를 위해 Google Chrome과 Chrome을 지원합니다. 다른 Chromium 기반 브라우저도 작동할 수 있지만 보장되지는 않습니다. Firefox와 Safari에는 서로 다른 디버깅 프로토콜이 필요합니다.

Q: 이것이 브라우저 성능에 어떤 영향을 미치나요? #

A: 원격 디버깅을 활성화하면 성능에 미치는 영향이 최소화됩니다. 브라우저가 정상적으로 실행됩니다. 디버깅 포트는 단순히 추가 진단 정보를 노출합니다. 대부분의 경우 오버헤드는 5% 미만으로 예상됩니다.

Q: 여러 에이전트가 동일한 브라우저 인스턴스를 공유할 수 있나요? #

답: 그렇습니다. MCP 서버는 브라우저 연결을 관리하며 여러 MCP 클라이언트가 동시에 연결할 수 있습니다. 각 클라이언트는 탐색 및 DOM 조작과 같은 작업을 위한 자체 세션을 갖습니다.

Q: 전체 브라우저 설정을 자동화하는 방법이 있나요? #

답: 그렇습니다. MCP 서버를 시작할 때 --auto-launch-chrome 플래그를 사용하십시오. 그러면 올바른 디버깅 플래그를 사용하여 Chrome이 자동으로 실행되고 서버에 연결됩니다.

Q: chrome-devtools-mcp로 로컬 파일의 스크린샷을 찍을 수 있나요? #

답: 그렇습니다. file:///path/to/your/index.html로 이동하여 스크린샷을 찍거나 페이지를 분석하세요. 이는 로컬 개발 서버 및 정적 사이트를 테스트하는 데 유용합니다.

Dibi8의 작품 더보기 #

• OmniRoute: 237개 공급자가 포함된 무료 AI 게이트웨이
• herdr: 코딩 에이전트용 터미널 에이전트 멀티플렉서
• Orca: StableAI의 병렬 에이전트 오케스트레이션
• Meetily: 개인 정보 보호 우선 AI 회의 도우미

소스 #

• chrome-devtools-mcp GitHub 저장소
• npm 패키지
• 도구 참조 문서
• 변경 로그

게시일: 2026년 7월 7일 | 최종 업데이트 날짜: 2026년 7월 7일 | 별: 46,034 | 라이센스: Apache-2.0