게시일: 2026년 5월 19일
AI 코딩 도구는 코드를 작성하는 데 매우 강력하지만 실행과는 종종 연결이 끊어집니다. 복잡한 웹 앱을 생성할 수는 있지만 라이브 브라우저에서 동작을 관찰하거나 출력을 검사할 수는 없습니다.
에이전트용 Chrome DevTools는 코딩 에이전트 가 코드를 실시간으로 확인, 디버그, 최적화하는 데 필요한 가시성을 제공합니다. 몇 달 전에 처음으로 선보였으며 이제 에이전트용 Chrome DevTools가 안정적인 1.0 버전으로 제공된다는 소식을 전해 드리게 되어 기쁩니다.
에이전트를 브라우저에 연결
에이전트용 Chrome DevTools를 사용하면 에이전트가 실제 사용자와 마찬가지로 사이트를 경험할 수 있습니다. 이 안정적인 버전에는 사용자와 에이전트가 Chrome과 상호작용할 수 있는 여러 방법이 포함되어 있습니다.
- 모델 컨텍스트 프로토콜 (MCP) 서버: 대규모 언어 모델 (LLM)을 DevTools 디버깅 기능에 연결하는 서버입니다.
- 명령줄 인터페이스 (CLI): 에이전트가 작업을 스크립트로 일괄처리할 수 있는 토큰 효율적인 대안입니다.
- 에이전트 기술: 접근성 또는 성능 디버깅과 같은 작업에 특정 도구를 사용하는 방법과 시기를 에이전트에게 알려주는 전문가 지침입니다.
자동으로 디버그, 에뮬레이션, 감사
1.0 버전에서는 코딩 에이전트가 이전에 수동으로 수행했던 고급 디버깅 작업을 수행할 수 있습니다.
품질 감사 자동화
이제 에이전트가 Lighthouse 감사를 실행하여 웹사이트 품질을 평가할 수 있습니다. 접근성, SEO, 권장사항, 에이전트 브라우징 문제를 식별할 수 있습니다. 런타임을 이해하는 린터와 같습니다. 품질 게이트로 사용하면 코딩 에이전트가 프로덕션에 도달하기 전에 중요한 차단기를 포착하는 전문가가 됩니다.
실제 사용자 환경 에뮬레이션
에이전트는 에이전트용 DevTools를 사용하여 에뮬레이션 도구를 통해 다양한 기기 또는 여러 위치에서 사이트가 표시되고 작동하는 방식을 테스트할 수 있습니다. 창 크기를 조절하고, 위치정보를 시뮬레이션하고, 네트워크 및 CPU 속도를 제한하여 실제 조건을 모방할 수 있습니다. 이렇게 하면 에이전트가 브라우저 크기를 수동으로 조절하지 않고도 햄버거 메뉴와 같은 모바일 전용 동작을 테스트할 수 있습니다.
Chrome 확장 프로그램 개발 및 디버그
에이전트가 Chrome 확장 프로그램을 개발하는 데 도움을 줄 뿐만 아니라 디버그할 수도 있습니다. 에이전트는 확장 프로그램 작업을 직접 설치, 다시 로드, 트리거할 수 있습니다. 이렇게 하면 개발 중에 자주 발생하는 '저장 및 새로고침' 주기를 자동화할 수 있습니다. 또한 백그라운드 스크립트와 확장 프로그램 페이지를 자세히 살펴보고 더 복잡한 브라우저 설정에서 버그를 수정할 수 있습니다.
WebMCP 도구 디버그 및 테스트
또한 이 새로운 API를 구현하는 데 도움이 되도록 WebMCP (웹 모델 컨텍스트 프로토콜) 오리진 트라이얼에 대한 심층적인 가시성을 제공합니다.
에이전트가 신호에 의존하여 DOM 탐색 계획을 추론하는 대신 WebMCP를 사용하여 노출하는 구조화된 도구와 직접 상호작용할 수 있습니다. 이렇게 하면 이러한 도구를 더 쉽게 개발, 테스트, 디버그할 수 있습니다. 에이전트는 실시간으로 도구를 나열하고 프로그래매틱 방식으로 호출하고 정확성을 검증할 수 있습니다. 이렇게 하면 사이트에 WebMCP 지원을 추가하고 테스트하는 프로세스가 간소화됩니다.
메모리 누수 감지 및 디버그
메모리 분석을 위한 전용 도구도 추가되었습니다. 이제 에이전트가 힙 스냅샷을 가져와 분리된 DOM 노드와 같은 메모리 누수를 식별할 수 있습니다. 에이전트는 특수 메모리 누수 디버깅 기술을 사용하여 성능 전문가 역할을 하여 애플리케이션을 간결하고 빠르게 유지할 수 있도록 지원합니다.
자동 연결로 세션 전달
에이전트가 자체 샌드박스 처리된 브라우저 인스턴스를 여는 대신 (에이전트용 DevTools가 일반적으로 에이전트에게 브라우저 액세스 권한을 부여하는 방식) 현재 브라우저 컨텍스트를 에이전트와 공유할 수 있습니다. 이는 인증된 대시보드와 같이 로그인해야 하는 항목을 디버그하는 데 적합합니다. 이 경우 모든 항목을 다시 인증하지 않고도 AI 에이전트가 기술 조사를 대신 수행하도록 할 수 있습니다.
서드 파티 개발자 도구로 내부 상태 노출
서드 파티 개발자 도구를 사용하면 웹 애플리케이션이 내부 상태 및 구성요소 세부정보를 AI 에이전트와 직접 공유할 수 있습니다. 일반적으로 표준 분석에서 숨겨진 데이터에 대한 액세스 권한을 제공함으로써 이러한 도구는 에이전트에게 복잡한 로직을 이해하는 데 필요한 컨텍스트를 제공합니다. 이렇게 하면 애플리케이션이 브라우저에서 실제로 작동하는 방식에 따라 더 정확한 디버깅 제안이 제공됩니다.
시작하기
npm을 사용하여 안정적인 버전을 설치하거나 선택한 에이전트에서 직접 구성할 수 있습니다.
Antigravity
에이전트용 Chrome DevTools는 Antigravity 2.0과 함께 사전 번들로 제공됩니다. 브라우저 하위 에이전트를 사용하여 즉시 사용할 수 있습니다. 다음과 같은 슬래시 명령어를 사용해 보세요.
/browser Navigate to the Google homepage
특수 에이전트 기술에 액세스하려면 초기 설정의 Build with Google 단계 또는 애플리케이션 설정 내에서 DevTools 플러그인을 설치하는 것이 좋습니다. 자세한 내용은 Antigravity 브라우저 하위 에이전트 문서를 참고하세요.
Gemini CLI
MCP 패키지 및 기술을 확장 프로그램으로 설치하려면 다음 명령어를 사용하세요.
$ gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Claude Code
에이전트용 Chrome DevTools를 Claude Code 플러그인으로 설치하려면 Claude Code에서 다음 슬래시 명령어를 사용하세요. Marketplace 레지스트리를 추가합니다.
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Marketplace 레지스트리에서 플러그인을 설치합니다.
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
자세한 가이드 및 예시 프롬프트는 에이전트용 Chrome DevTools 문서를 참고하세요. GitHub에서 소스 코드를 살펴볼 수도 있습니다.