AI 코딩 에이전트에게 프론트엔드를 작성하게 하면, "코드는 생성할 수 있지만, 실제로 브라우저에서 어떻게 동작하는지는 에이전트에게 보이지 않는다"라는 벽에 부딪힙니다. 에러 재현도 성능 측정도 결국 인간이 하게 되는 경우가 많습니다. 이 기사에서는 Google의 Chrome DevTools 팀이 공식적으로 출시한 chrome-devtools-mcp를 사용하여, 에이전트 스스로 실제 브라우저에서 디버깅과 성능 분석을 수행하게 하는 방법을 소개합니다.

chrome-devtools-mcp는 MCP(Model Context Protocol) 서버로서 Chrome DevTools의 기능을 코딩 에이전트에게 개방하는 도구입니다. 단순한 브라우저 조작(클릭·입력)에 그치지 않고, 다음과 같은 작업이 가능하다는 것이 특징입니다.

• 퍼포먼스 트레이스(Performance Trace) 기록 및 이를 통한 개선 인사이트 추출 (performance_start_trace / performance_stop_trace / performance_analyze_insight)
• 콘솔 메시지 및 네트워크 요청 취득을 통한 디버깅
• 스크린샷 취득 및 폼 입력 등의 일반적인 브라우저 자동화

Puppeteer 계열의 자동화 도구와의 차이점은, "DevTools가 가진 측정·진단 기능"까지 에이전트의 도구로서 제공된다는 점입니다.

공식 README의 Requirements에 따르면:

• Node.js LTS 버전
• Chrome 안정 버전(current stable) 이후

MCP 클라이언트의 표준적인 설정은 이것뿐입니다 (chrome-devtools-mcp@latest 지정에 따라 항상 최신 버전이 사용됩니다):

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

Claude Code라면 한 줄의 명령어로 등록할 수 있습니다:

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

Codex CLI의 경우:

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

Gemini CLI의 경우:

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

README에서 안내하는 확인 방법은 에이전트에게 다음 프롬프트를 던지는 것뿐입니다.

Check the performance of https://developers.chrome.com

MCP 클라이언트가 브라우저를 실행하고 퍼포먼스 트레이스를 기록하면 성공입니다.

CI나 헤드리스(headless) 환경을 위해서는 --headless가, 도구 수를 줄이고 싶다면 --slim이 준비되어 있습니다. README에는 두 가지를 조합한 예시가 실려 있습니다:

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

그 외에 알아두어야 할 옵션:

• --channel: 사용할 Chrome의 채널 지정 (기본값은 stable. canary 등도 지정 가능)
• --viewport: 실행할 Chrome의 뷰포트(viewport) 크기 지정 (예: 1280x720)
• --category-performance=false: 성능 관련 도구를 무효화하여 도구 수를 축소

이미 실행 중인 Chrome에 접속하고 싶다면, http://127.0.0.1:9222/json/version의 webSocketDebuggerUrl을 사용하여 접속하는 방법도 README에 기재되어 있습니다.

README에 명시된 두 가지 동작이 있습니다.

• CrUX API로의 URL 전송: 퍼포먼스 트레이스 대상 URL은 필드 데이터 취득을 위해 CrUX API로 전송됩니다. 이를 무효화하려면 --no-performance-crux (또는 --performance-crux=false)를 사용해야 합니다.

)를 붙입니다.

이용 통계 수집: Google은 도구 호출 성공률, 레이턴시 (Latency), 환경 정보 등의 이용 통계를 수집합니다. 사내 프로젝트에서 사용할 경우 정책에 부합하는지 확인해 두는 것이 안전합니다.

• chrome-devtools-mcp는 '조작'뿐만 아니라 '측정·진단'까지 에이전트에게 전달할 수 있는 공식 MCP 서버입니다.
• 도입은 npx chrome-devtools-mcp@latest를 MCP 클라이언트(Client)에 등록하기만 하면 됩니다.
• 헤드리스 (Headless) 운영, 도구 제한, 기존 Chrome 연결까지 옵션으로 대응 가능합니다.
• CrUX로의 URL 전송 및 이용 통계 수집은 기본적으로 활성화되어 있으므로, 필요에 따라 옵트아웃 (Opt-out) 하십시오.