ChromeDevTools/chrome-devtools-mcp

에이전트용 Chrome DevTools (chrome-devtools-mcp)

무엇인가요 – Model‑Context‑Protocol (MCP) 를 통해 Chrome DevTools 기능을 노드 기반 서버로 노출합니다. 이는 AI 코딩 어시스턴트(Claude, Copilot, Cursor, Antigravity 등)가 실제 Chrome 브라우저를 제어할 수 있게 해주며, 페이지 검사, 성능 트레이스 기록, 네트워크 트래픽 디버깅, 스크린샷 캡처, Puppeteer를 활용한 자동화 작업을 수행할 수 있습니다.

왜 중요한가요 – 현대의 AI 에이전트는 코드 생성에는 능하지만 여전히 실시간 브라우저와 신뢰할 수 있는 방식으로 상호작용할 방법이 필요합니다. MCP를 사용하면 에이전트는 "이 URL을 열고 성능 보고서를 주세요" 또는 "이 버튼을 클릭하고 콘솔 출력을 반환해 주세요"와 같은 요청을 커스텀 Selenium 스크립트를 작성하지 않고도 수행할 수 있습니다. 서버는 Chrome을 시작하고 결과를 기다리며 DevTools 데이터를 JSON으로 변환하는 등의 무거운 작업을 처리하므로, 에이전트는 고차원적 사고에 집중할 수 있습니다.

주요 기능

• 성능 인사이트 – Chrome 트레이스를 기록하고 메트릭을 추출하며, 필요 시 CrUX API에서 실제 사용자 데이터를 추가로 보강합니다.
• 디버깅 유틸리티 – 네트워크 로그, 콘솔 메시지(소스맵된 스택 트레이스 포함), 스크린샷에 접근 가능합니다.
• 신뢰할 수 있는 자동화 – Puppeteer를 래핑하여 클릭, 탐색, 폼 채우기 등을 수행하며, 페이지 안정성을 자동으로 대기합니다.
• MCP 인터페이스 – 위 모든 기능을 AI 에이전트가 도구로 호출할 수 있는 표준 JSON over WebSocket 프로토콜로 노출합니다.
• CLI 모드 – MCP 클라이언트 없이 즉시 사용 가능한 독립형 명령줄 도구(npx chrome-devtools-mcp)입니다.

시작 방법

1. Node LTS와 최신 안정 버전의 Chrome을 설치합니다.
2. 에이전트의 MCP 구성에 서버를 추가합니다. 예시:

   {
     "mcpServers": {
       "chrome-devtools": {
         "command": "npx",
         "args": ["-y", "chrome-devtools-mcp@latest"]
       }
     }
   }
   

3. 에이전트의 프롬프트에서 Check the performance of https://developers.chrome.com와 같은 작업을 요청합니다. 서버는 Chrome을 시작하고 트레이스를 기록한 후 분석 결과를 반환합니다.
4. 가벼운 사용을 원한다면 --slim --headless 옵션으로 서버를 시작합니다.

구성 및 고급 사용 – 헤드리스 모드, 고립된 사용자 데이터 디렉터리, 동시 세션 수, 기존 Chrome 인스턴스 연결, 안드로이드 디버깅 등을 제어하는 플래그가 있습니다. 전체 목록은 링크된 문서를 참조하세요.

개인정보 및 데이터 – 기본적으로 익명 사용 통계를 전송하며, 필드 성능 데이터를 얻기 위해 CrUX API를 쿼리할 수 있습니다. --no-usage-statistics 또는 환경 변수 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS / CI를 사용하여 비활성화할 수 있습니다.

주요 사용자 – 웹을 탐색하고, 페이지 속도를 프로파일링하거나, 프론트엔드 코드를 디버깅해야 하는 AI 기반 코딩 어시스턴트, IDE 확장 프로그램, 자율 에이전트를 개발하는 개발자들입니다.

---

모든 세부 정보는 리포지토리의 README에서 직접 가져왔습니다.