github/chrome-devtools

chrome-devtools은(는) 무엇을 하나요?

Chrome DevTools MCP를 사용한 전문가 수준의 브라우저 자동화, 디버깅 및 성능 분석. 웹 페이지와 상호작용, 스크린샷 캡처, 네트워크 트래픽 분석 및 성능 프로파일링에 사용합니다.

기능

• 브라우저 자동화: 웹 페이지 탐색, 요소와 상호작용, 양식 제출
• 디버깅: 콘솔 명령 실행, JavaScript 중단점 설정, 호출 스택 검사
• 성능 분석: 성능 메트릭 수집, 타임라인 기록, 네트워크 요청 분석
• 스크린샷: 전체 페이지 및 요소별 스크린샷 캡처
• 네트워크 검사: 네트워크 요청 및 응답 모니터링, 헤더 및 페이로드 검사

시작하기

사전 요구 사항

• Node.js v18 이상
• Chrome 또는 Chromium 브라우저

설치

npm install @anthropic/chrome-devtools-mcp

구성

1. Chrome DevTools MCP 서버를 시작합니다:

npx @anthropic/chrome-devtools-mcp

2. WebSocket URL을 사용하여 AI 에이전트나 개발 환경에 연결합니다:

ws://localhost:9222/devtools/browser/<타겟 ID>

사용 예제

// Chrome DevTools MCP를 사용한 기본 사용 예제
const { DevToolsClient } = require('@anthropic/chrome-devtools-mcp');

async function main() {
  const client = new DevToolsClient('ws://localhost:9222/devtools/browser/...');
  
  // 페이지로 이동
  await client.navigate('https://example.com');
  
  // 스크린샷 캡처
  const screenshot = await client.captureScreenshot();
  
  // 성능 메트릭 수집
  const metrics = await client.collectPerformanceMetrics();
  console.log(metrics);
  
  // 콘솔 명령 실행
  const result = await client.evaluate('document.title');
  console.log(result);
  
  // 연결 종료
  await client.close();
}

main();

지원되는 플랫폼

• Claude Code
• Cursor
• GitHub Copilot
• 기타 MCP 호환 AI 에이전트

라이선스

MIT