TL;DR

이 레포는 Model-Context-Protocol(MCP) 서버로 동작해 AI 코딩 에이전트가 Chrome DevTools의 트레이스·네트워크·콘솔·메모리 기능을 원격으로 호출하도록 연결한다. 서버는 Puppeteer로 브라우저 액션을 자동화하고 DevTools에서 추출한 트레이스와 진단 정보를 에이전트에게 반환하며, 필요 시 CrUX API로 필드 성능 데이터를 조회해 랩 데이터와 함께 제시할 수 있다. 다양한 MCP 클라이언트별 설치 예시와 VS Code/CLI 플러그인 옵션을 제공해 여러 에이전트 환경에 바로 통합할 수 있으며, --slim 모드로 도구 집합을 줄여 경량 실행을 선택할 수 있다. 공식 지원 브라우저는 Google Chrome과 Chrome for Testing으로 제한되어 있으며 다른 Chromium 기반 브라우저는 예기치 않은 동작이 발생할 수 있는 한계가 있다.

주요 기능

• 브라우저 성능 인사이트를 수집하고 트레이스를 기록해 분석할 수 있다. DevTools 트레이스와 필드 데이터(옵션으로 CrUX)를 결합해 실험실과 현장 성능을 함께 볼 수 있다. 수집된 트레이스는 performance_start_trace/performance_stop_trace 도구로 제어된다.
• 네트워크 요청 분석, 소스맵을 활용한 콘솔 메시지의 스택트레이스 확인, 페이지 스크린샷 촬영 등 고급 디버깅 워크플로를 지원한다. 콘솔 메시지와 네트워크 항목은 별도 도구 호출로 열람할 수 있으며, 소스맵 기반 스택트레이스는 디버깅 정확도를 높인다. 이 기능은 문제 재현과 원인 규명에 직접적인 런타임 데이터를 제공한다.
• Puppeteer 기반 자동화를 통해 안정적인 액션 실행과 자동 대기 로직을 제공한다. 에이전트의 클릭·타이핑·파일 업로드 같은 상호작용은 puppeteer로 수행되며, 결과가 준비될 때까지 자동으로 대기해 불안정한 타이밍 문제를 완화한다. 이로 인해 에이전트 중심의 테스트·스크립팅이 더 재현성 있게 수행된다.
• 메모리 힙스냅샷, 스냅샷 비교, 클래스 노드 분석 등 메모리 디버깅 도구를 제공한다. 힙 스냅샷 도구들은 메모리 누수 탐지와 객체 유지 경로 분석을 가능하게 한다. 메모리 관련 도구들은 get_heapsnapshot_summary 등 세부 조회 기능을 통해 정밀 조사를 지원한다.
• 플러그인·익스텐션 관련 도구와 스크린캐스트 녹화, 확장 기능 설치·제거 등 브라우저 확장 관리 기능을 포함한다. 스크린캐스트는 ffmpeg가 필요하며 experimental 플래그로 활성화된다. 확장 도구는 페이지 자체가 제공하는 서드파티 개발자 도구와의 통합까지 고려해 설계되었다.

어떻게 동작하는가

서버는 Model-Context-Protocol(MCP) 규격의 MCP 서버로 동작하며 MCP 클라이언트 요청을 받아 Chrome DevTools API와 Puppeteer 자동화 계층을 연결한다. 에이전트가 도구를 호출하면 서버가 Puppeteer로 브라우저 액션을 실행하고 DevTools에서 트레이스·네트워크·콘솔 정보를 수집해 구조화된 응답으로 반환한다. 옵션으로 트레이스 URL을 CrUX API로 전송해 필드 성능 데이터를 조회하거나 슬림 모드로 노출 도구를 제한하는 방식으로 리소스 사용을 조절할 수 있다.

해결 문제

AI 코딩 에이전트가 브라우저 내부 상태와 DevTools 계측에 안정적으로 접근하지 못하는 문제를 해결한다. 이 레포는 MCP 서버를 통해 에이전트가 DevTools의 트레이스·네트워크·메모리 도구를 원격 호출하도록 연결해 디버깅과 자동화의 신뢰성을 높인다. 또한 여러 MCP 클라이언트 통합과 명령줄 인터페이스를 제공해 에이전트 환경에서의 배포 진입 장벽을 낮춘다.

지금 주목받는 이유

레포는 여러 에이전트 플랫폼을 대상으로 한 통합 가이드와 바로 사용할 수 있는 MCP 설정을 README에 풍부하게 담고 있어 다양한 에이전트에서 즉시 실험해볼 수 있는 상태이다. 또한 브라우저 성능 트레이스와 CrUX 연동, 메모리·네트워크·스크린샷 등 실무에 바로 유용한 도구 묶음을 제공해 실전 활용 가치가 크다. 많은 클라이언트별 설치 예시와 플러그인/CLI 옵션은 채택 장벽을 낮춰 관계 생태계에서 주목받는 요인으로 작용한다.

차별점

• 에이전트 친화적 MCP 인터페이스를 기본으로 제공해 다양한 에이전트 플랫폼(예: Claude Code, Antigravity, Cursor 등)과 직결되는 설정을 제공한다. README에 여러 클라이언트별 설치·구성 예시가 있어 즉시 통합이 가능한 배포 경험을 제공한다. 이로 인해 개별 개발자가 DevTools 접속 로직을 직접 구현할 필요가 줄어든다.
• Puppeteer를 내부 자동화 엔진으로 사용해 브라우저 액션 실행과 자동 대기 로직을 통합했다. 단순 DevTools 원격 호출과 달리 사용자 상호작용을 시뮬레이션하고 결과 준비를 자동으로 기다리는 흐름이 내장되어 있어 에이전트 자동화의 재현성을 확보한다. 또한 소스맵 기반 콘솔 스택트레이스와 힙스냅샷 관련 도구를 같이 제공해 디버깅 범위가 넓다.
• VS Code 플러그인 설치 옵션과 CLI 기반 설치, 여러 IDE·플랫폼용 구성 스니펫을 제공해 사용 환경 선택지가 다양하다. 플러그인 설치 시 MCP 서버와 스킬 집합을 함께 제공해 에이전트용 기능을 묶어서 배포할 수 있다. 이 접근은 단일 도구로서의 제공보다 초기 적용 비용을 낮추는 효과가 있다.

사용 사례

• 에이전트 주도의 웹 성능 진단에서 페이지 로딩 트레이스를 기록하고 랩 데이터와 CrUX 필드 데이터를 함께 비교해 성능 병목 원인을 규정하는 데 사용할 수 있다. 서버가 트레이스 수집과 관련 도구 호출을 담당하므로 에이전트는 고수준의 진단 프롬프트만 전송하면 된다. 수집된 트레이스는 performance_analyze_insight 도구로 추가 처리할 수 있다.
• 자동화된 웹 UI 테스트와 상호작용 재현 워크플로에서 Puppeteer 기반 액션과 자동 대기 로직을 활용해 안정적으로 시나리오를 실행하고 화면 스크린샷을 캡처하는 데 사용할 수 있다. 에이전트가 클릭·입력·파일 업로드 같은 작업을 지시하면 서버가 실행과 결과 확인을 담당한다. 이러한 방식은 반복적 테스트와 회귀 검증에 유리하다.
• 복잡한 자바스크립트 오류 추적과 소스맵을 이용한 스택트레이스 해석 작업에서 콘솔 로그와 네트워크 요청을 함께 수집해 원인 추적을 수행하는 데 사용할 수 있다. DevTools가 제공하는 소스맵 기반 스택트레이스는 번들링 환경에서 디버깅 정확도를 높인다. 에이전트는 수집된 정보를 바탕으로 코드 수정 제안이나 재현 스크립트를 생성할 수 있다.
• 메모리 누수 조사 과정에서 힙 스냅샷을 찍고 클래스 노드·유지 경로를 분석해 메모리 유지 원인을 규명하는 작업에 사용할 수 있다. get_heapsnapshot_summary 등 도구로 요약 정보를 얻고 필요 시 세부 노드·엣지 정보를 조회해 깊이 있는 분석을 수행할 수 있다. 이 흐름은 장기 실행 서비스의 메모리 안정성 평가에 유용하다.

시작하기

MCP 클라이언트 구성에 npx로 chrome-devtools-mcp를 등록하면 서버가 실행되어 에이전트가 DevTools 도구를 호출할 수 있다. 예시로 MCP 설정에 command를 "npx"로, args에 "-y", "chrome-devtools-mcp@latest"를 넣으면 최신 버전으로 서버를 자동 실행하도록 구성된다. 기본 모드 외에 --slim 플래그로 내비게이션·스크립트 실행·스크린샷만 노출하는 경량 실행을 선택하거나 --headless로 UI 없는 브라우저 실행을 조합할 수 있다.

요구사항

• Node.js의 LTS 버전과 npm이 필요하다. 서버는 Node 기반으로 패키지를 npx로 내려받아 실행하므로 안정적 실행을 위해 LTS 버전의 Node.js 환경을 권장한다. 또한 공식적으로는 Google Chrome 또는 Chrome for Testing의 최신 안정 버전 이상이 필요하다.