chromedevtools/chrome-devtools-mcp

Developer tools

이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기

5.5만 stars 5.3천 forks 품질 91 트렌드 100Apache-2.0

Repository Install

코딩 에이전트용 크롬 개발자 도구

개요

Chrome DevTools for agents(chrome-devtools-mcp)는 코딩 에이전트(예: Antigravity, Claude, Cursor, Copilot)가 라이브 크롬 브라우저를 제어하고 검사할 수 있게 합니다. 이 도구는 모델 컨텍스트 프로토콜(MCP) 서버 역할을 하여 AI 코딩 어시스턴트가 신뢰할 수 있는 자동화, 심층 디버깅, 성능 분석을 위해 Chrome DevTools의 모든 기능을 활용할 수 있도록 합니다. 또한 MCP 없이 사용할 수 있는 CLI도 제공됩니다. - : Chrome DevTools를 사용하여 추적 기록과 실행 가능한 성능 인사이트를 추출합니다. - : 네트워크 요청을 분석하고, 스크린샷을 찍으며, 브라우저 콘솔 메시지(소스 매핑된 스택 트레이스 포함)를 확인합니다. - . Puppeteer를 사용해 크롬에서 동작을 자동화하고 자동으로 행동 결과를 기다립니다. Chrome-DevTools-MCP는 브라우저 인스턴스의 콘텐츠를 MCP 클라이언트에 노출하여 MCP 클라이언트가 브라우저나 DevTools 내 데이터를 검사, 디버깅, 수정할 수 있도록 합니다. MCP 클라이언트와 공유하고 싶지 않은 민감하거나 개인적인 정보는 피하세요.

개요(AI 번역)

Chrome DevTools for agents(chrome-devtools-mcp)는 코딩 에이전트(예: Antigravity, Claude, Cursor, Copilot)를 사용할 수 있게 해줍니다. 라이브 크롬 브라우저를 제어하고 검사할 수 있습니다. 이 브라우저는 모델-컨텍스트-프로토콜(MCP) 서버와 [CLI][CLI]로 사용됩니다. 둘 다 AI를 제공합니다. 코딩 어시스턴트: 신뢰성 높은 크롬 개발자 도구의 완전한 기능 접근 자동화, 심층 디버깅, 성능 분석.

주요 특징

성능 인사이트 확인: 크롬 사용 DevTools를 기록하기 위해 추적하고 실행 가능한 성과 인사이트를 추출합니다.
고급 브라우저 디버깅: 네트워크 요청 분석, 스크린샷 촬영 및 브라우저 콘솔 메시지(소스 매핑된 스택 트레이스 포함)를 확인하세요.
신뢰할 수 있는 자동화. 용도 Puppeteer는 행동을 자동화하기 위해 크롬을 사용해 자동으로 행동 결과를 기다리세요.

면책 조항

chrome-devtools-mcp는 브라우저 인스턴스의 콘텐츠를 MCP 클라이언트에 노출합니다 이를 통해 브라우저나 DevTools의 데이터를 검사, 디버깅, 수정할 수 있습니다.

이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요.

README

원문 README의 일부입니다. 원문 보기.

Chrome DevTools for agents

Chrome DevTools for agents (chrome-devtools-mcp) lets your coding agent (such as Antigravity, Claude, Cursor or Copilot) control and inspect a live Chrome browser. It is available as a Model-Context-Protocol (MCP) server and as a [CLI][cli]. Both give your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.

Key features

Get performance insights: Uses Chrome DevTools to record traces and extract actionable performance insights.
Advanced browser debugging: Analyze network requests, take screenshots and check browser console messages (with source-mapped stack traces).
Reliable automation. Uses puppeteer to automate actions in Chrome and automatically wait for action results.

Disclaimers

chrome-devtools-mcp exposes content of the browser instance to the MCP clients allowing them to inspect, debug, and modify any data in the browser or DevTools. Avoid sharing sensitive or personal information that you don’t want to share with MCP clients.

chrome-devtools-mcp officially supports Google Chrome and Chrome for Testing only. Other Chromium-based browsers may work, but this is not guaranteed, and you may encounter unexpected behavior. Use at your own discretion. We are committed to providing fixes and support for the latest version of Extended Stable Chrome.

Performance tools may send trace URLs to the Google CrUX API to fetch real-user experience data. This helps provide a holistic performance picture by presenting field data alongside lab data. This data is collected by the Chrome User Experience Report (CrUX). To disable this, run with the --no-performance-crux flag.

Usage statistics

Google collects usage statistics (such as tool invocation success rates, latency, and environment information) to improve the reliability and performance of Chrome DevTools MCP.

Data collection is enabled by default. You can opt-out by passing the --no-usage-statistics flag when starting the server:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google handles this data in accordance with the Google Privacy Policy.

GitHub에서 전체 README 보기

설치

npx -y chrome-devtools-mcp@latest

MCP 초보자라면? mcpskill.org 가이드부터 시작하세요 →

설정

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