본문으로 건너뛰기

트렌딩 - GitHub 인기 레포 & HuggingFace 모델

ChromeDevTools/chrome-devtools-mcp

TypeScript3 / 0

MCP 서버를 통해 AI 코딩 에이전트가 Chrome DevTools 기능을 원격으로 호출해 브라우저 제어·성능 트레이스·네트워크·메모리 진단을 수행할 수 있다.

TL;DR

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

핵심 포인트

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

46k

STARS

3k

FORKS

+273

TRENDING

3

조회수

watchers 46kopen issues 92Apache License 2.0

관련 토론

아직 관련 토론이 없습니다.

댓글

댓글을 작성하려면 로그인이 필요합니다.