Chrome DevTools

코딩 에이전트에서 실행 중인 Chrome 브라우저를 직접 제어하고 검사합니다. Chrome DevTools MCP는 브라우저 자동화, 성능 프로파일링, 네트워크 분석, 디버깅을 아우르는 29가지 도구를 제공하며, Puppeteer와 Chrome DevTools Protocol을 통해 Claude에게 완전한 DevTools 기능을 제공합니다.

클릭, 타이핑, 폼 작성, 파일 업로드, 페이지 탐색, 다이얼로그 처리 등의 도구로 브라우저 인터랙션을 자동화합니다. 모바일 기기 및 커스텀 뷰포트를 에뮬레이션하여 반응형 디자인을 테스트할 수 있습니다. 성능 트레이스와 메모리 스냅샷을 기록하여 병목 현상을 진단하고, Lighthouse 감사를 실행하며, CrUX 필드 데이터를 포함한 실행 가능한 성능 인사이트를 제공합니다.

네트워크 요청을 검사하고, 소스 맵이 적용된 스택 트레이스와 함께 콘솔 메시지를 읽고, 스크린샷 캡처, DOM 스냅샷 촬영, 페이지 컨텍스트에서 JavaScript 실행이 가능합니다. 가볍고 기본적인 브라우저 작업을 위한 슬림 모드도 제공됩니다.

사용 방법: Chrome에서 실행 중인 애플리케이션과 상호작용하도록 Claude에게 요청하세요. 예시 프롬프트: "localhost:3000에서 내 앱을 열고 로그인 버튼을 클릭해줘", "페이지를 스크롤하는 동안 성능 트레이스를 기록하고 느린 부분을 알려줘", "모바일 뷰포트에서 홈페이지 스크린샷을 찍어줘", "폼 제출 후 콘솔에서 오류를 확인해줘", "이 페이지에 Lighthouse 감사를 실행하고 결과를 요약해줘", "대시보드가 로드될 때 발생한 모든 네트워크 요청을 나열해줘".