코딩 에이전트가 실행 중인 크롬 브라우저의 성능과 오류를 직접 진단하게 만드는 연결고리
웹페이지가 느리거나 버그가 나는 이유를 코딩 에이전트가 스스로 찾아내도록 돕습니다. 이 도구는 AI 코딩 어시스턴트가 크롬 개발자 도구의 기능을 직접 호출할 수 있게 해주는 서버입니다. 브라우저가 실행 중인 상태에서 네트워크 요청, 콘솔 메시지, 성능 추적을 분석하고 필요한 조치를 취합니다.
브라우저 내부의 데이터를 에이전트에게 전달
이 도구는 MCP(Model-Context-Protocol) 서버와 CLI 두 가지 형태로 제공됩니다. MCP 서버는 Claude, Cursor, Copilot 같은 코딩 에이전트가 크롬 브라우저의 상태를 실시간으로 확인하고 조작할 수 있게 합니다. Puppeteer를 사용해 브라우저 내 액션을 자동화하고, 결과가 나올 때까지 자동으로 대기합니다. 이를 통해 에이전트는 단순히 코드를 작성하는 것을 넘어, 실제 브라우저 환경에서의 동작을 검증하고 디버깅할 수 있습니다.
성능 추적과 디버깅 기능
크롬 개발자 도구의 성능 추적 기능을 활용해 실행 가능한 성능 인사이트를 추출합니다. 네트워크 요청을 분석하고 스크린샷을 촬영하며, 소스 매핑이 적용된 스택 트레이스를 포함해 브라우저 콘솔 메시지를 확인합니다. 성능 분석 시 Google CrUX API를 호출해 실제 사용자 경험 데이터를 함께 제공하기도 합니다. 이 데이터는 --no-performance-crux 플래그로 비활성화할 수 있습니다.
에이전트가 배우는 스킬 세트
패키지에는 에이전트가 크롬 개발자 도구를 효과적으로 사용하도록 돕는 스킬들이 포함되어 있습니다. 페이지 디버깅과 자동화, 접근성 문제 수정, 쿠키 및 인증 디버깅, LCP(Largest Contentful Paint) 최적화, 메모리 누수 탐지 등이 대표적입니다. 이러한 스킬은 플러그인 형태로 설치하거나 에이전트의 스킬 디렉토리에 직접 복사해 사용할 수 있습니다. 스킬은 특정 버전의 도구를 설명하므로, 서버나 CLI를 업데이트할 때마다 스킬도 함께 갱신해야 합니다.
설치와 초기 설정
Node.js LTS 버전, 최신 크롬 스테이블 버전, npm이 필요합니다. MCP 클라이언트 설정에 npx -y chrome-devtools-mcp@latest 명령을 추가하면 됩니다. 서버는 브라우저가 필요한 도구가 호출될 때 자동으로 브라우저를 시작합니다. CLI를 사용하려면 npm i chrome-devtools-mcp@latest -g로 전역 설치 후 터미널에서 명령을 실행합니다. 사용 통계 수집은 기본으로 켜져 있으며, --no-usage-statistics 플래그나 환경 변수로 비활성화할 수 있습니다.
사용 전 확인해야 할 보안과 호환성
이 도구는 브라우저 인스턴스의 내용을 MCP 클라이언트에 노출하므로, 공유하고 싶지 않은 민감한 정보가 브라우저에 남아 있으면 안 됩니다. 공식적으로 지원되는 브라우저는 Google Chrome과 Chrome for Testing이며, 다른 Chromium 기반 브라우저는 동작이 보장되지 않습니다. 최신 Extended Stable Chrome 버전에 대한 수정과 지원을 제공합니다. 브라우저의 사용 통계와 이 도구의 사용 통계는 독립적으로 관리되므로, 크롬의 메트릭을 비활성화해도 이 도구의 통계 수집은 계속됩니다.
