ChromeDevTools/chrome-devtools-mcp

어떤 프로젝트인가요?

핵심 기능

• 01Chrome DevTools를 사용해 성능 트레이스를 기록하고 실행 가능한 인사이트를 도출합니다.
• 02네트워크 요청을 검사하고, 스크린샷을 찍고, 소스 맵이 적용된 스택 트레이스가 포함된 콘솔 메시지를 읽습니다.
• 03Puppeteer로 브라우저 작업을 자동화하고 결과를 자동으로 기다립니다.
• 04기본 도구를 제공하는 slim mode와 headless 옵션을 지원합니다.
• 05MCP 없이 사용할 수 있는 CLI를 제공합니다.

활용 사례

• AI 코딩 도우미가 웹 페이지의 콘솔 오류와 네트워크 실패를 디버깅하도록 합니다.
• 사이트의 성능을 점검하고 트레이스 기반 권장 사항을 얻습니다.
• 개발 중 에이전트가 제어하는 브라우저 테스트를 자동화합니다.
• 에이전트형 도구에 브라우저 서브에이전트를 통합합니다.

빠른 시작

1. 1

   Node.js LTS와 Chrome(최신 안정 버전)을 설치합니다

2. 2

   MCP 클라이언트에 MCP 서버 설정을 추가합니다

   npx -y chrome-devtools-mcp@latest
3. 3

   MCP 클라이언트에 테스트 프롬프트를 입력하여 작동하는지 확인합니다

사용 전 알아둘 점

• !공식적으로 지원되는 브라우저는 Google Chrome과 Chrome for Testing뿐이며, 다른 Chromium 브라우저는 작동을 보장하지 않습니다.
• !도구를 통해 브라우저의 모든 데이터가 MCP 클라이언트에 노출될 수 있으므로 민감한 정보를 공유하지 마세요.
• !사용 통계 수집은 기본적으로 활성화되어 있으며, 플래그나 환경 변수로 옵트아웃해야 합니다.

토픽

자주 묻는 질문

chrome-devtools-mcp은(는) 무엇인가요?

코딩 에이전트가 Chrome DevTools를 사용해 실행 중인 Chrome 브라우저를 제어하고 검사하며, 디버깅과 성능 분석을 수행하도록 지원하는 MCP 서버입니다. 에이전트를 위한 Chrome DevTools(chrome-devtools-mcp)는 Claude, Cursor, Copilot, Antigravity와 같은 AI 코딩 도우미가 실행 중인 Chrome 브라우저에 접근할 수 있게 해주는 Model Context Protocol 서버입니다. 에이전트는 이를 통해 페이지를 조작하고, 스크린샷을 찍고, 소스 맵이 적용된 스택 트레이스가 포함된 네트워크 요청과 콘솔 메시지를 읽고, 성능 트레이스를 기록할 수 있습니다.

chrome-devtools-mcp은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

chrome-devtools-mcp은(는) Apache-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

chrome-devtools-mcp은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. chrome-devtools-mcp의 마지막 커밋은 2026년 10월 19일입니다.

chrome-devtools-mcp은(는) 어디에 사용할 수 있나요?

AI 코딩 도우미가 웹 페이지의 콘솔 오류와 네트워크 실패를 디버깅하도록 합니다. 사이트의 성능을 점검하고 트레이스 기반 권장 사항을 얻습니다. 개발 중 에이전트가 제어하는 브라우저 테스트를 자동화합니다. 에이전트형 도구에 브라우저 서브에이전트를 통합합니다.

chrome-devtools-mcp는 어떻게 설치하나요?

Node.js LTS와 Chrome(최신 안정 버전)을 설치합니다 MCP 클라이언트에 MCP 서버 설정을 추가합니다: npx -y chrome-devtools-mcp@latest MCP 클라이언트에 테스트 프롬프트를 입력하여 작동하는지 확인합니다

chrome-devtools-mcp은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/ChromeDevTools/chrome-devtools-mcp