Chrome DevTools MCP로 AI 코딩 에이전트에게 브라우저의 눈 선물하기

AI 코딩 에이전트를 쓰면서 이런 답답함을 느낀 적 없나요? 코드를 수정했는데 브라우저에서 실제로 어떻게 보이는지 에이전트가 알 수 없다는 거죠. CSS를 고쳤는데 레이아웃이 깨졌는지, API 호출이 실패하는지, 성능이 느려졌는지 에이전트는 전혀 모릅니다. 눈을 가리고 프로그래밍하는 거나 마찬가지예요 😅

이전에 Playwright MCP로 AI 에이전트에게 브라우저 자동화를 맡기는 방법을 다뤘었는데요. 이번에는 구글 Chrome DevTools 팀이 직접 만든 MCP 서버를 살펴보려고 합니다. Playwright MCP가 접근성 트리 기반의 브라우저 조작에 초점을 맞춘다면 Chrome DevTools MCP는 한발 더 나아갑니다. 성능 프로파일링, 네트워크 분석, Lighthouse 감사까지 DevTools의 핵심 기능을 AI 에이전트에게 통째로 열어주거든요.

Chrome DevTools MCP란?

Chrome DevTools MCP는 구글의 Chrome DevTools 팀에서 공식적으로 만든 MCP(Model Context Protocol) 서버입니다. 2025년 9월에 퍼블릭 프리뷰로 공개된 이후 빠르게 성장해서 2026년 3월 기준으로 GitHub 스타가 3만 개를 넘겼고, npm 주간 다운로드도 44만 회에 달합니다.

이 서버를 AI 코딩 도구에 연결하면 에이전트가 실제 Chrome 브라우저를 제어하면서 DevTools의 거의 모든 기능을 쓸 수 있게 됩니다. 페이지를 열고 클릭하는 기본적인 브라우저 자동화는 물론이고 성능 트레이스를 기록하고 분석하거나 네트워크 요청을 검사하거나 Lighthouse 감사를 실행하는 것까지 가능해요.

핵심은 AI 에이전트가 코드를 수정한 뒤 그 결과를 직접 브라우저에서 확인하고 다시 코드를 고치는 폐쇄 루프(closed loop)를 만들 수 있다는 점입니다. 코드 변경 → 브라우저 확인 → 문제 발견 → 코드 수정이 하나의 흐름으로 이어지는 거죠.

아키텍처

Chrome DevTools MCP는 세 개의 계층으로 구성됩니다.

첫 번째는 MCP 서버 계층입니다. AI 클라이언트(Claude Code, Cursor 등)의 요청을 받아서 세션을 관리하고 MCP 프로토콜에 맞는 도구를 노출합니다.

두 번째는 도구 어댑터 계층입니다. MCP 도구 호출을 Chrome DevTools Protocol(CDP) 명령으로 변환하는데 내부적으로 Puppeteer를 써서 CDP와 통신합니다.

세 번째는 Chrome 런타임 계층이에요. 실제 Chrome 브라우저 인스턴스가 모든 작업을 수행합니다.

이 구조에서 중요한 점은 AI 에이전트가 Puppeteer API를 직접 호출하지 않는다는 겁니다. 에이전트는 navigate_page나 take_screenshot 같은 고수준 MCP 도구만 호출하면 되고, 서버가 알아서 CDP 명령으로 변환해서 실행합니다. 덕분에 에이전트가 복잡한 브라우저 자동화 코드를 생성할 필요 없이 도구 이름과 파라미터만 넘기면 됩니다.

설계 철학도 눈여겨볼 만합니다. 50KB짜리 JSON 응답을 통째로 돌려주는 대신 “LCP가 3.2초입니다” 같은 토큰 최적화된 요약을 반환해요. 스크린샷이나 트레이스 같은 무거운 데이터는 raw 데이터가 아니라 파일 경로를 참조로 넘겨줍니다. 에러가 발생하면 단순히 실패했다고 알려주는 게 아니라 원인과 해결 방법까지 포함한 자가 치유형 에러 메시지를 돌려주고요.

29가지 도구

Chrome DevTools MCP는 총 29개의 도구를 제공하는데, 용도별로 여섯 가지 카테고리로 나뉩니다.

입력 자동화 도구로는 click, hover, fill, fill_form, type_text, press_key, drag, upload_file, handle_dialog이 있습니다. 버튼을 클릭하고 폼에 값을 채우고 키보드 입력을 보내고 파일을 업로드하는 등 사용자 인터랙션을 그대로 재현할 수 있어요.

내비게이션 도구로는 navigate_page, new_page, close_page, list_pages, select_page, wait_for가 있습니다. 여러 탭을 관리하면서 페이지를 오가거나 특정 요소가 나타날 때까지 기다리는 작업이 가능합니다.

성능 분석 도구는 이 서버의 가장 큰 차별점입니다. performance_start_trace로 트레이스 기록을 시작하고 performance_stop_trace로 멈춘 다음 performance_analyze_insight로 분석 결과를 받습니다. take_memory_snapshot은 힙 스냅샷을 찍어서 메모리 누수를 찾는 데 유용하고요.

네트워크 분석 도구인 list_network_requests와 get_network_request로 어떤 API가 호출되었는지, 응답 시간은 얼마인지, 실패한 요청은 없는지 파악할 수 있습니다.

에뮬레이션 도구인 emulate과 resize_page는 모바일 디바이스를 시뮬레이션하거나 뷰포트 크기를 변경합니다.

디버깅 도구로는 take_screenshot, take_snapshot, evaluate_script, list_console_messages, get_console_message, lighthouse_audit가 있습니다. 스크린샷을 찍고 DOM 스냅샷을 확인하고 JavaScript를 실행하고 콘솔 로그를 읽고 Lighthouse 감사까지 실행할 수 있어요.

설치하기

설치는 아주 간단합니다. AI 코딩 도구의 MCP 설정에 다음 내용만 추가하면 됩니다.

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

Node.js v20.19 이상과 Chrome 현재 안정 버전이 필요합니다. npx가 알아서 최신 버전을 받아서 실행하므로 별도 설치 과정이 없어요.

클로드 코드에서는 claude mcp add 명령으로 더 간편하게 추가할 수 있습니다.

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

VS Code나 Cursor에서는 원클릭 설치 버튼을 제공하고 있고, Gemini CLI에서는 익스텐션으로 설치할 수도 있습니다.

주요 설정 옵션

기본 설정만으로도 충분히 사용할 수 있지만, 상황에 따라 유용한 옵션들이 있습니다.

--headless 플래그를 추가하면 브라우저 창 없이 백그라운드에서 실행됩니다. CI/CD 파이프라인에서 자동화된 성능 테스트를 돌릴 때 특히 유용하죠.

--isolated 플래그는 임시 사용자 데이터 디렉터리를 만들어서 기존 브라우저 프로필과 완전히 분리된 환경에서 실행합니다. 서버를 종료하면 데이터가 깨끗이 지워져요.

--slim 플래그는 도구를 navigate, evaluate, screenshot 세 개로 줄여줍니다. 29개 도구의 설명이 토큰을 많이 차지하니까, 간단한 브라우저 작업만 필요할 때 토큰을 아끼기 좋습니다.

--autoConnect는 이미 열려 있는 Chrome 브라우저에 연결하는 옵션입니다. Chrome 144 이상에서 지원되며, 기존 로그인 세션을 그대로 활용할 수 있어서 인증이 필요한 사이트를 디버깅할 때 편리합니다.

카테고리별로 도구를 켜고 끌 수도 있습니다. --categoryPerformance, --categoryNetwork, --categoryEmulation 같은 플래그로 필요한 도구만 활성화하면 토큰 사용량을 줄일 수 있어요.

설정을 조합한 예시를 하나 보겠습니다.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--headless",
        "--isolated",
        "--viewport",
        "1280x720"
      ]
    }
  }
}

이미 열린 브라우저에 연결하기

Chrome DevTools MCP에서 가장 많은 요청을 받았던 기능이 바로 기존 브라우저 세션에 연결하는 것이었습니다. 2025년 12월에 추가된 이 기능 덕분에 활용 범위가 크게 넓어졌는데요.

사용 방식은 두 가지입니다.

첫 번째는 자동 연결(--autoConnect)입니다. Chrome 144 이상에서 지원되며, MCP 서버가 Chrome에 연결 요청을 보내면 브라우저에 권한 확인 다이얼로그가 뜹니다. 사용자가 허용하면 바로 연결되는 방식이에요. 보안을 위해 브라우저 상단에 “자동화된 테스트 소프트웨어에 의해 제어되고 있습니다”라는 배너가 표시됩니다.

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

두 번째는 수동 연결(--browser-url)입니다. 원격 디버깅 포트를 열어서 Chrome을 시작한 뒤 그 포트에 연결하는 전통적인 방식이에요. 샌드박스 환경이나 구 버전 Chrome에서 유용합니다.

# Chrome을 원격 디버깅 포트와 함께 시작
google-chrome --remote-debugging-port=9222

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browser-url",
        "http://localhost:9222"
      ]
    }
  }
}

기존 세션을 재활용할 수 있어서 로그인이 필요한 관리자 페이지나 인증된 API 대시보드를 디버깅할 때 다시 로그인할 필요가 없습니다. DevTools에서 네트워크 패널을 보다가 “이 실패하는 요청 좀 분석해줘”라고 AI에게 바로 넘기는 것도 가능하고요.

Playwright MCP와 뭐가 다를까?

Playwright MCP를 이미 쓰고 있다면 “또 다른 브라우저 MCP가 필요한가?” 싶을 수 있습니다. 두 서버는 겹치는 영역도 있지만 지향점이 꽤 다릅니다.

Playwright MCP는 접근성 트리 기반의 브라우저 자동화에 특화되어 있습니다. DOM 요소를 역할과 이름으로 찾아서 클릭하고 입력하는 게 주특기예요. E2E 테스트 자동 작성이나 폼 채우기, 여러 페이지를 순서대로 탐색하는 시나리오에 적합하고 Chromium뿐 아니라 Firefox와 WebKit도 지원합니다.

Chrome DevTools MCP는 DevTools 기능을 활용한 분석과 디버깅에 초점을 맞춥니다. 성능 트레이스를 기록하고 Core Web Vitals를 측정하거나 네트워크 요청을 분석하거나 메모리 스냅샷을 찍거나 Lighthouse 감사를 실행하는 건 Playwright MCP로는 못 하는 일이에요. 대신 Chrome에서만 동작합니다.

정리하면 브라우저 조작과 자동화가 목적이라면 Playwright MCP를, 성능 분석과 깊은 디버깅이 필요하면 Chrome DevTools MCP를 쓰는 게 맞습니다. 물론 둘 다 연결해놓고 상황에 따라 골라 쓸 수도 있고요.

실전 활용: 성능 분석

Chrome DevTools MCP의 진가가 드러나는 건 성능 분석입니다. 에이전트에게 “이 페이지 성능 좀 측정해줘”라고 요청하면 이런 흐름으로 작업합니다.

먼저 navigate_page로 대상 페이지를 엽니다. 그다음 performance_start_trace로 성능 트레이스 기록을 시작하고, 페이지 로드가 완료될 때까지 기다린 뒤 performance_stop_trace로 기록을 멈춥니다. 마지막으로 performance_analyze_insight를 호출하면 LCP(Largest Contentful Paint), CLS(Cumulative Layout Shift), TBT(Total Blocking Time) 같은 Core Web Vitals 지표와 함께 병목 구간에 대한 분석 결과를 받을 수 있어요.

여기에 lighthouse_audit까지 결합하면 성능, 접근성, SEO, 모범 사례 전 영역에 걸친 종합 감사 보고서를 받을 수 있습니다. v0.19.0에서 추가된 기능인데 기존에 Chrome DevTools에서 수동으로 하던 Lighthouse 감사를 AI 에이전트가 대신 실행하고 결과를 분석해주니까 꽤 편리해요.

실전 활용: 레이아웃 디버깅

CSS 문제를 디버깅할 때도 유용합니다. 에이전트에게 “모바일에서 레이아웃이 깨지는 것 같아”라고 말하면 이렇게 처리할 수 있어요.

emulate로 모바일 디바이스를 시뮬레이션한 뒤 navigate_page로 문제가 있는 페이지를 열고 take_screenshot으로 현재 화면을 캡처합니다. take_snapshot으로 DOM 구조와 적용된 CSS까지 확인하죠. 여기서 문제를 발견하면 코드를 수정하고 다시 스크린샷을 찍어서 수정이 잘 되었는지 확인하는 루프를 돌 수 있어요.

실전 활용: 네트워크 분석

API 통신에 문제가 있을 때도 쓸모가 많습니다. navigate_page로 페이지를 연 뒤 list_network_requests를 호출하면 모든 네트워크 요청 목록을 받을 수 있어요. 실패한 요청이 있으면 get_network_request로 상세 정보(요청/응답 헤더, 상태 코드, 타이밍 등)를 확인하고 에이전트가 원인을 분석해서 수정 방안을 제안합니다.

서드파티 스크립트가 페이지 로드를 막고 있는지, 이미지가 너무 큰지, API 응답이 느린지 같은 문제를 추측이 아니라 데이터에 기반해서 파악할 수 있는 거죠.

프라이버시와 보안 고려사항

Chrome DevTools MCP를 쓸 때 알아둬야 할 보안 관련 사항이 몇 가지 있습니다.

우선 이 서버는 브라우저 콘텐츠를 MCP 클라이언트에 노출합니다. 민감한 개인 정보가 담긴 페이지에서는 주의가 필요해요. 금융 정보나 의료 기록, 개인 메시지 같은 내용이 AI 모델로 전송될 수 있으니까요.

구글은 기본적으로 사용 통계를 수집합니다. 불편하다면 --no-usage-statistics 플래그를 추가하거나 환경 변수 CI를 설정하면 꺼집니다. 성능 분석 시 CrUX API로 데이터를 전송하는 것도 --no-performance-crux 플래그로 끌 수 있고요.

--browser-url로 원격 디버깅 포트를 열 때는 같은 머신의 다른 애플리케이션도 해당 포트에 접근할 수 있다는 점을 기억하세요. 로컬 개발 환경에서만 사용하고, 외부에 노출되지 않도록 주의해야 합니다.

지원하는 AI 코딩 도구

Chrome DevTools MCP는 MCP 프로토콜을 사용하는 거의 모든 AI 코딩 도구에서 사용할 수 있습니다. 공식 README에서 설치 방법을 안내하는 도구만 해도 20개가 넘는데요.

• Claude Code — claude mcp add 명령으로 추가
• VS Code / Copilot — 원클릭 설치 버튼 제공
• Cursor — 원클릭 설치 버튼 제공
• Gemini CLI — 익스텐션으로 설치, 자동 업데이트 지원
• Windsurf — MCP 설정 파일에 추가
• JetBrains AI Assistant — IDE 설정에서 MCP 서버 추가
• Cline — MCP 설정으로 추가
• Codex (OpenAI) — MCP 설정 지원
• Warp — 터미널 내 MCP 연동

이 외에도 Amp, Kiro, Visual Studio, Factory CLI 등 다양한 도구에서 사용할 수 있습니다. MCP가 개방형 표준이다 보니 새로운 AI 도구가 나올 때마다 별도 작업 없이 바로 연결할 수 있는 게 큰 장점이에요.

마치며

Chrome DevTools MCP는 AI 코딩 에이전트에게 진짜 “눈”을 선물하는 도구입니다. 코드만 보고 추측하던 에이전트가 이제는 브라우저에서 직접 결과를 확인하고 성능을 측정하고 네트워크 문제를 진단할 수 있게 되었으니까요.

Playwright MCP와 함께 쓰면 브라우저 자동화부터 깊은 디버깅까지 빈틈없이 커버할 수 있습니다. Playwright MCP로 E2E 테스트를 돌리고 Chrome DevTools MCP로 성능을 검증하는 식이죠. MCP 생태계가 계속 성장하면서 AI 에이전트가 할 수 있는 일의 범위가 빠르게 넓어지고 있어요.

아직 퍼블릭 프리뷰 단계라 DevTools의 모든 기능이 열려 있지는 않지만 이미 실무에서 충분히 쓸 수 있는 수준입니다. 일본의 CyberAgent에서는 이 도구로 236개 스토리에 대한 감사를 한 시간 만에 끝냈다고 하니까요. 관심이 생기셨다면 프로젝트 설정에 MCP 서버 하나만 추가해서 직접 체험해보세요.

더 자세한 내용은 Chrome DevTools MCP GitHub 저장소와 Chrome for Developers 공식 블로그를 참고하세요.