에이전트가 코드를 올바르게 빌드, 디버그, 검증하도록 지원합니다. 에이전트용 Chrome DevTools를 사용하면 AI 에이전트가 Chrome 브라우저와 상호작용하여 출시 전에 Chrome DevTools의 기능을 사용하여 코드를 테스트하고, 사용자를 에뮬레이션하고, 버그를 포착할 수 있습니다.
시작하기 GitHub에서 보기

지금 설치

GitHub에서 모든 설치 옵션 확인하기

에이전트용 Chrome DevTools는 Antigravity 2.0과 함께 사전 번들로 제공됩니다. 브라우저 하위 에이전트를 사용하여 즉시 사용할 수 있습니다. 다음과 같은 슬래시 명령어를 사용해 보세요.

/browser Navigate to the Google homepage

특수 에이전트 기술에 액세스하려면 초기 설정의 Build with Google 단계 또는 애플리케이션 설정 내에서 DevTools 플러그인을 설치하세요.

  # Install as a Gemini extension (MCP+Skills):
  gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
 
  # Install as a plugin (MCP+Skills)
  # Add the marketplace registry:
  /plugin marketplace add ChromeDevTools/chrome-devtools-mcp
  # Install
  /plugin install chrome-devtools-mcp@chrome-devtools-plugins
 
  codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Copilot 또는 OpenCode와 같은 다른 코딩 에이전트를 사용하는 경우 GitHub 저장소의 안내를 따르세요.

에이전트가 할 수 있는 작업

에이전트가 웹브라우저와 상호작용할 수 있도록 합니다. 에이전트가 할 수 있는 다른 작업에 대해 알아보려면 사용 사례 문서를 참고하세요.

반응형 디자인, 다양한 지리적 위치, 실제 사용자 흐름을 테스트합니다. 자세히 알아보기
활성 Chrome 세션에 연결하여 실시간으로 검사, 일시중지, 문제 해결을 할 수 있습니다. 자세히 알아보기.
코드를 프로덕션에 푸시하기 전에 접근성, SEO, 성능 감사를 실행하여 실행 가능한 체크리스트를 제공합니다. 자세히 알아보기

더 나은 사용자 환경을 유도하는 프롬프트

완전 관리형 브라우저 인스턴스를 통해 AI 에이전트가 웹사이트를 탐색하고, 버튼과 상호작용하고, 페이지를 탐색하고, 즉각적인 접근성 감사를 실행할 수 있도록 지원하세요. 
Go to developer.chrome.com on mobile, click the burger menu, and check for top-level navigation items.
 
Go to https://chrome.dev/devtools-store-locator. Simulate your location is Berlin and check if the store locator shows the Rosenthaler Strasse branch.
 
Run a Lighthouse accessibility audit and suggest fixes for any low-contrast elements.
 
Perform an SEO audit and verify all images have descriptive alt text.
에이전트용 Chrome DevTools를 설정하고 에이전트가 자율적으로 디버깅하고 검증하는 방법을 알아보세요. 이 동영상에서는 설치, 핸드셰이크, 일괄 작업에 CLI 사용을 다룹니다.