Chrome DevTools MCP server

Chrome DevTools MCP는 이미 익숙한 DevTools 패널을 AI 에이전트 앞에 놓아 줍니다. 대부분의 브라우저 서버가 클릭과 타이핑에 초점을 맞춘다면, 이 서버는 페이지가 왜 느린지, 무엇을 로그로 남기는지, 무엇을 요청하는지, 메모리에 무엇을 들고 있는지를 밝혀내는 데 초점을 맞춥니다. GitHub의 ChromeDevTools 조직에서 공개했고, 스타 55,670개, Apache-2.0 라이선스입니다.

2026년 11월 11일에 공개된 버전 1.13.0을 설치한 뒤 2026년 11월 14일에 두 가지를 했습니다. MCP Inspector로 여러 옵션을 주어 도구 목록을 확인했고, 작은 MCP 클라이언트로 구동해 자체 사이트인 hostedmcp.org에서 성능 트레이스를 기록하고 Lighthouse를 실행했습니다. 아래 수치는 이 실행에서 나온 것입니다.

설치

Node.js 20.19 이상과 Chrome이 필요합니다. 브라우저는 서버가 시작될 때가 아니라, 브라우저가 필요한 첫 번째 도구 호출 시점에 실행됩니다.

Claude Code:

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --isolated --no-usage-statistics

Cursor, Claude Desktop, Windsurf 및 기타 JSON으로 설정하는 클라이언트:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--isolated", "--no-usage-statistics"]
    }
  }
}

Codex:

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --isolated --no-usage-statistics

두 플래그는 기본값이 아니라 권장 사항입니다. --isolated는 세션마다 임시 프로필을 사용하게 합니다. 이 옵션이 없으면 서버는 ~/.cache/chrome-devtools-mcp/chrome-profile 아래에 실행 간에 초기화되지 않는 영구 프로필을 유지합니다. --no-usage-statistics는 서버가 기본적으로 Google에 전송하는 사용 통계를 끕니다. 설정 빌더는 여러 클라이언트에 대해 동일한 항목을 작성합니다.

README에서 제안하는 첫 프롬프트는 좋은 테스트입니다: "https://developers.chrome.com의 성능을 확인해 줘".

도구 수 집계

1.13.0에서 tools/list는 옵션 없이 33개의 도구를 반환했고, 도구 정의는 31,498바이트였습니다. --slim을 사용하면 navigate, evaluate, screenshot 세 개를 1,042바이트로 반환했습니다.

각 그룹은 --categoryEmulation=false 같은 플래그로 끌 수 있습니다. 네트워크 모킹, 확장 프로그램, PWA 자동화, 가상 WebAuthn 인증자, 페이지가 WebMCP를 통해 직접 노출하는 도구는 켜기 전까지 꺼져 있습니다. 작업에 필요한 것만 켜십시오. 31KB의 정의는 일부 서버에 비하면 작지만, 매 요청마다 전송됩니다.

trace가 반환하는 것

서버를 headless로 시작하고 new_page로 https://hostedmcp.org/를 연 다음, reload와 autoStop을 켠 상태로 performance_start_trace를 호출했고, 마지막으로 lighthouse_audit를 호출했습니다.

trace 호출은 약 6초 걸렸고 9,436바이트의 텍스트를 반환했습니다. 보고된 내용은 다음과 같습니다.

이어서 발견한 인사이트를 각각의 설명과, 해당되는 경우 예상 절감량과 함께 나열했습니다. LCP 분석, 렌더 차단 요청(FCP와 LCP 각각 25 ms), 네트워크 의존성 트리, 이미지 전송, 서드 파티, 캐시 수명, 레거시 JavaScript입니다. 에이전트는 이들 중 아무거나 performance_analyze_insight로 호출해 자세한 내용을 볼 수 있습니다. 응답은 자체 호출 트리 형식에 대한 설명으로 끝나므로, 모델은 뒤따르는 플레임 차트 데이터를 읽을 수 있습니다.

lighthouse_audit는 약 7초 걸렸고 6,687바이트를 반환했습니다. 접근성 94, 권장사항 100, SEO 100, 그리고 네 번째 카테고리인 에이전트 브라우징이 67입니다. 네 개의 감사가 실패했습니다. 첫 번째는 색상 대비로, 우리 헤더의 검색 레이블을 포함한 열두 개 요소가 요구되는 4.5 대신 4.33의 비율이었습니다. 도구는 제 역할을 했고, 우리에게 고칠 것이 생겼습니다.

이 수치에 관해 두 가지가 있습니다. 첫 바이트까지 0.8 ms는 페이지가 데워진 엣지 캐시에서 왔다는 뜻이며, 콜드 요청은 더 느릴 것입니다. 그리고 --no-performance-crux를 넘겼기 때문에 trace는 실제 사용자의 필드 데이터를 보고하지 않았습니다. 기본적으로 서버는 Google의 CrUX 데이터셋에서 페이지 URL을 조회합니다.

pageId 함정

첫 실행은 about:blank를 측정했습니다. 1.13.0에서 페이지 도구는 pageId를 받으며, 새 세션은 빈 페이지를 1번으로 시작합니다. 우리의 new_page 호출은 사이트를 2번 페이지로 열고 선택된 상태로 표시했지만, 우리는 1을 넘겼습니다. trace는 빈 페이지에 대해 CLS 0을 충실히 보고했습니다. 에이전트는 보통 list_pages를 먼저 호출해 이 문제를 피합니다. trace가 about:blank를 보고한다면 이것이 이유입니다.

자체 Chrome 사용

기본적으로 서버는 자체 Chrome을 시작합니다. 이미 실행 중인 Chrome에 연결할 수도 있습니다:

• --autoConnect는 chrome://inspect/#remote-debugging에서 원격 디버깅을 활성화한 후 Chrome 144 이상에 연결합니다.
• --browserUrl http://127.0.0.1:9222는 --remote-debugging-port=9222로 시작한 Chrome에 연결합니다.

일상용 브라우저에 연결하면 에이전트가 로그인 정보, 쿠키, 열린 탭을 사용할 수 있습니다. 로그인 뒤에 있는 페이지를 디버깅하려 할 때는 이것이 목적이고, 그 외의 상황에서는 위험입니다. 이를 위해 별도의 Chrome 프로필을 사용하십시오.

개인정보 보호 및 안전

서버는 시작할 때 경고를 출력합니다. 이 서버는 "브라우저 인스턴스의 콘텐츠를 MCP 클라이언트에 노출하여 클라이언트가 브라우저나 DevTools의 모든 데이터를 검사, 디버그, 수정할 수 있게 합니다". 이 문구를 문자 그대로 받아들이시기 바랍니다. 기본값 중 세 가지는 변경할 만합니다:

• 사용 통계는 --no-usage-statistics를 전달하지 않으면 Google로 전송됩니다. CI 환경 변수가 설정된 경우에도 꺼집니다.
• CrUX 조회: 성능 도구가 추적한 URL을 Google의 CrUX API로 전송할 수 있습니다. 내부 또는 스테이징 URL에는 --no-performance-crux를 사용하십시오.
• 프로필: 기본 프로필은 유지됩니다. 세션 간 상태가 필요하지 않다면 --isolated를 사용하십시오.

evaluate_script는 페이지에서 JavaScript를 실행하며, 페이지에는 모델을 겨냥한 텍스트가 포함될 수 있습니다. 익숙하지 않은 사이트로의 이동은 직접 승인하십시오. 또한 1.13.0에서는 클라이언트가 워크스페이스 루트를 공유하지 않을 때 저장된 트레이스와 스크린샷 같은 파일 읽기 및 쓰기가 시스템 임시 폴더로 제한되는 것을 확인했습니다. --allow-unrestricted-paths는 이 제한을 해제합니다. 이 옵션은 그대로 두십시오. 자세한 내용은 MCP 보안을 참고하십시오.

Chrome DevTools MCP 또는 Playwright MCP

두 프로젝트 모두 비교 자료를 공개하지 않았으므로, 이 구분은 저희 기준입니다. 에이전트의 목적이 사이트를 사용하는 것이라면 Playwright MCP를, 사이트가 왜 그렇게 동작하는지 파악하는 것이라면 Chrome DevTools MCP를 선택합니다. 둘은 함께 사용할 수 있으며, 나머지 절반은 Playwright MCP 가이드에서 다룹니다.

동작하지 않을 때

저희 카탈로그에 있는 Chrome DevTools 서버와 검사 점수는 이 페이지 상단에 나와 있습니다.