게시일: 2026년 5월 19일
AI 코딩 도구는 코드를 작성하는 데 매우 강력하지만, 코드 실행과는 종종 연결되지 않습니다. 복잡한 웹 앱을 생성할 수는 있지만 라이브 브라우저에서 동작을 관찰하거나 출력을 검사할 수는 없습니다.
에이전트용 Chrome DevTools는 코딩 에이전트가 코드를 실시간으로 확인, 디버그, 최적화하는 데 필요한 가시성을 제공합니다. 몇 달 전에 처음으로 선보인 Chrome DevTools for agents가 이제 안정적인 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
전문 에이전트 기술에 액세스하려면 초기 설정의 Google로 빌드 단계 또는 애플리케이션 설정 내에서 DevTools 플러그인을 설치하는 것이 좋습니다. 자세한 내용은 Antigravity Browser 하위 에이전트 문서를 참고하세요.
Gemini CLI
MCP 패키지와 스킬을 확장 프로그램으로 설치하려면 다음 명령어를 사용하세요.
$ gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Claude Code
에이전트용 Chrome DevTools를 Claude Code 플러그인으로 설치하려면 Claude Code에서 다음 슬래시 명령어를 사용하세요. 마켓 레지스트리를 추가합니다.
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
마켓 레지스트리에서 플러그인을 설치합니다.
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
자세한 가이드와 예시 프롬프트는 상담사를 위한 Chrome DevTools 문서를 참고하세요. GitHub의 소스 코드를 살펴볼 수도 있습니다.