MMCPMarkets
DC

diegorafs/chrome-devtools-mcp

Developer tools

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

41 stars 6 forks 품질 73 트렌드 12Apache-2.0
Repository Install

자연적인 언어 성분 탐지를 가진 AI-powered Chrome 자동화 서버. 테스트, 디버깅 및 성능 분석을 위한 MCP 프로토콜을 통해 Chrome 브라우저를 제어합니다.

개요

chrome-devtools-mcp는 코딩 에이전트 ( Gemini, Claude, Cursor 또는 Copilot과 같은) 제어를 허용하고 라이브 크롬 브라우저를 검사합니다. 그것은 신뢰할 수있는 자동화, 심층 디버깅 및 성능 분석을위한 Chrome DevTools의 전체 전력에 AI 코딩 조수 액세스를 제공하는 모델 Context-Protocol (MCP) 서버로 작동합니다. - - 예제와 완벽한 가이드 - - 빠른 액세스를위한 책갈피 - - AI가 작동하는 방법 - : CSS selectors 대신 Natural language ( "blue submit button")의 요소를 설명합니다. AI Guide → - 간단한 설명 - 무료 AI 모델 - 포괄적 인 오류 처리 - 신뢰성을위한 알고리즘 - 모든 웹 사이트와 작동 - 생산 예제 → - : 추적을 기록하고 행동 가능한 성능 통찰력을 추출하기 위해 Chrome DevTools를 사용합니다. - : Analyze 네트워크 요청, 스크린 샷을 찍고 브라우저 콘솔을 확인하십시오. - .. puppeteer를 사용하여 Chrome에서 작업을 자동화하고 작업 결과를 자동으로 기다립니다.

개요(AI 번역)

chrome-devtools-mcp 는 코딩 에이전트 (젬니, 클로드, 커서 또는 코파이롯과 같은) 제어 및 라이브 크롬 브라우저를 검사합니다. 그것은 Model-Context-Protocol로 작동합니다. (MCP) 서버, AI 코딩 어시스턴트 액세스를 제공하여 전체 전력에 액세스 신뢰할 수있는 자동화, 심층 디버깅 및 성능 분석을 위한 Chrome DevTools.

♨ NEW: AI-Powered Element 위치

** 천연어를 사용하는 자동 ANY 웹 사이트 ** - CSS 선택기 필요 없음! ** → AI 자동화 빠른 시작 가이드를 읽으십시오 **

** 빠른 링크:**

  • ** AI Automation Guide** - 예를 들어 완전한 가이드
  • ** ** ** - 빠른 액세스를위한 책갈피
  • ** Re Reliability Guide** - AI가 작동하는 방법

도구 참조 | Changelog | 기여 | 문제 해결

키 기능

  • ** AI-Powered Automation**: CSS 셀렉터 대신 Natural language( “blue submit button”)의 요소를 설명합니다. AI 가이드 보기 →
  • 91% 정확도 간단한 설명
  • **75-85% 적은 토큰 ** 무료 AI 모델 -Production-ready 포괄적인 오류 처리
  • 10-strategy matching 신뢰성을 위한 알고리즘
  • 모든 웹 사이트로 작업
  • 생산 예제 →
  • ** 성능 통찰력**: Chrome 사용

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

README

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

Chrome DevTools MCP

chrome-devtools-mcp lets your coding agent (such as Gemini, Claude, Cursor or Copilot) control and inspect a live Chrome browser. It acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.

🚀 NEW: AI-Powered Element Location

Automate ANY website using natural language - No CSS selectors needed!
→ Read the AI Automation Quick Start Guide

// Just describe what you want to click:
{
  "tool": "find_and_click",
  "arguments": {
    "description": "blue submit button"
  }
}
// ✅ Done! 95%+ accuracy, works with FREE AI models

📖 Quick links:

Tool reference | Changelog | Contributing | Troubleshooting

Key features

  • 🤖 AI-Powered Automation: Describe elements in natural language (“blue submit button”) instead of CSS selectors. See AI Guide →
    • 91% accuracy with simple descriptions
    • 75-85% fewer tokens for free AI models
    • Production-ready with comprehensive error handling
    • 10-strategy matching algorithm for reliability
    • Works with any website
    • Production Examples →
  • Get performance insights: Uses Chrome DevTools to record traces and extract actionable performance insights.
  • Advanced browser debugging: Analyze network requests, take screenshots and check the browser console.
  • 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.

Requirements

Getting started

GitHub에서 전체 README 보기

설치

npx -y chrome-devtools-mcp@latest
MCP 초보자라면? mcpskill.org 가이드부터 시작하세요 →

설정

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