런타임 통계 잠금 해제: 에이전트용 Chrome DevTools의 서드 파티 개발자 도구 소개

Wolfgang Beyer
Wolfgang Beyer
X GitHub

게시일: 2026년 6월 18일

최신 웹 애플리케이션을 효과적으로 디버그하려면 AI 에이전트가 소스 코드 이상을 필요로 합니다. 런타임에 애플리케이션이 어떻게 작동하는지 이해해야 합니다.

에이전트용 Chrome DevTools를 위한 서드 파티 개발자 도구를 소개하게 되어 기쁩니다. 이제 앱과 프레임워크에서 AI 에이전트가 내부 상태를 직접 확인할 수 있습니다. 이를 통해 상담사는 화면에서 발생하는 상황과 백그라운드에서 실행되는 로직 간의 연관성을 파악할 수 있습니다.

목표: 정적 분석을 넘어

최신 웹 개발은 추상화(Angular, React, Vue와 같은 프레임워크, WordPress, Shopify와 같은 CMS 플랫폼, CSS, 3D 그래픽, 애니메이션 라이브러리)를 기반으로 합니다. DevTools는 최종 렌더링된 DOM에 직접 액세스할 수 있지만 애플리케이션의 '진실'은 프레임워크의 내부 상태(구성요소 계층 구조, JavaScript 신호 또는 백엔드 상태) 내에 있는 경우가 많습니다.

서드 파티 개발자 도구의 목표는 모든 라이브러리가 AI 에이전트와 풍부하고 실행 가능한 컨텍스트를 공유할 수 있는 경로를 제공하는 것입니다. 이렇게 하면 상담사가 이전에 '보이지 않던' 문제를 디버그할 수 있습니다. 예를 들면 다음과 같습니다.

  • 구성요소 계층 구조: 페이지의 DOM 요소를 해당 프레임워크 구성요소 및 내부 상태에 직접 매핑합니다.
  • 내부 상태 검사: 디버깅 세션 내에서 서버 측 상태 또는 데이터베이스 콘텐츠에 직접 액세스합니다.

작동 방식: Discovery API

서드 파티 개발자 도구는 이벤트 기반 JavaScript API를 사용합니다. Chrome DevTools MCP 서버는 전역 window 객체에서 devtoolstooldiscovery 이벤트를 디스패치하여 이러한 도구를 검색합니다. devtoolstooldiscovery 이벤트는 모든 페이지 탐색 시 또는 선택한 페이지가 변경된 경우 자동으로 디스패치되며 list_3p_developer_tools MCP 도구를 사용하여 명시적으로 디스패치할 수 있습니다.

자체 도구 구현

라이브러리나 애플리케이션의 도구를 노출하려면 이 검색 이벤트를 수신 대기하고 ToolGroup로 응답해야 합니다.

window.addEventListener('devtoolstooldiscovery', (event) => {
  event.respondWith({
    name: "My Library Tools",
    description: "Tools for inspecting internal library state",
    tools: [
      {
        name: "getInternalState",
        description: "Returns the current internal state of the framework.",
        inputSchema: {
          type: "object",
          properties: {
            componentId: { type: "string" }
          }
        },
        execute: async (input) => {
          // Access your framework's internal registry
          return myFramework.getState(input.componentId);
        }
      }
    ]
  });
});

구현은 다음과 같습니다.

  1. 스키마 정의: JSON 스키마를 사용하여 도구에서 예상하는 입력을 정의합니다.
  2. 로직 처리: 페이지 컨텍스트에서 실행되고 직렬화 가능한 데이터를 반환하는 execute 함수를 구현합니다.
  3. DOM 요소: 직렬화할 수 없는 객체는 페이지와 에이전트용 DevTools 간에 전송할 수 없습니다. DOM 요소는 예외입니다. 도구에서 DOM 요소를 반환하면 에이전트용 DevTools가 take_snapshot 도구에서 사용하는 동일한 UID에 자동으로 매핑합니다. 이렇게 하면 상담사가 프레임워크에서 가져온 요소든 페이지 스냅샷에서 가져온 요소든 모든 페이지 요소와 동일한 방식으로 상호작용할 수 있습니다.

MCP를 사용하여 도구와 상호작용

도구를 등록하면 코딩 에이전트가 에이전트용 DevTools를 통해 도구와 상호작용할 수 있습니다. list_3p_developer_tools MCP 도구는 페이지에서 사용할 수 있는 서드 파티 도구의 설명을 반환합니다. 또한 선택한 페이지가 변경되면 (예: 탐색 후) DevTools는 사용 가능한 도구 목록을 MCP 도구 응답에 추가합니다.

이러한 도구를 사용하려면 에이전트가 execute_3p_developer_tool를 호출합니다. DevTools는 입력 매개변수가 도구의 정의와 일치하는지 자동으로 검증합니다.

evaluate_script MCP 도구를 사용하여 도구를 호출할 수도 있습니다. 에이전트는 DevTools가 페이지에서 실행하는 JavaScript 스니펫을 제공합니다. 이 스니펫은 서드 파티 개발자 도구를 호출하고 출력을 즉시 사용하여 추가 계산을 할 수 있습니다.

evaluate_script를 사용하면 상담사가 다음 작업을 할 수 있으므로 복잡한 디버깅에 효과적입니다.

  • 작업 작성: 여러 단계를 단일 실행으로 결합합니다.
  • 직렬화할 수 없는 값 처리: 페이지 컨텍스트에서 프레임워크별 객체 또는 신호를 직접 처리합니다.
  • 성능 최적화: 직렬화 오버헤드를 최소화하고 에이전트와 브라우저 간의 여러 왕복을 방지합니다.

초기 성공: Angular 통합

Google은 서드 파티 개발자 도구 두 가지를 구현한 Angular팀과 협력해 왔습니다.

  1. 신호 그래프 도구: 상담사가 상태와 뷰 간의 관계를 시각화하여 무한 루프 또는 업데이트 실패를 유발하는 종속성을 식별할 수 있습니다.
  2. 종속 항목 삽입 (DI) 그래프 도구: 요소 인젝터를 노출하여 에이전트가 서비스가 제공되는 위치나 누락된 위치를 정확하게 확인할 수 있습니다. Angular의 DI 그래프는 런타임 전용 구조이므로 정적 분석만으로는 제공자 오류를 디버그할 수 없습니다.
Angular Signal Graph 도구를 사용하여 반응형 루프를 디버깅하는 AI 에이전트를 보여주는 스크린캐스트

React팀은 서드 파티 개발자 도구를 실험하기 시작했습니다.

Google과 함께 에이전트형 디버깅의 미래를 구축하세요

이 실험용 기능은 버전 0.25.0부터 에이전트용 Chrome DevTools에서 사용할 수 있습니다. 사용 설정하려면 --categoryExperimentalThirdParty 명령줄 플래그를 사용하세요.

프레임워크, 라이브러리 또는 도구를 유지관리하고 코딩 에이전트의 디버깅 환경을 개선하고 싶다면 Google과 협력해 주세요.

함께 에이전트형 웹 개발의 미래를 만들어 보세요.