Chrome DevTools의 WebMCP 패널을 사용하여 웹사이트가 AI 에이전트에 노출하는 클라이언트 측 AI 도구를 검사, 디버그, 테스트합니다. 이 패널은 등록, 스키마 유효성 검사, 호출 기록 등 도구 수명 주기에 대한 완전한 엔드 투 엔드 가시성을 제공합니다.
WebMCP 창 열기
WebMCP 창은 애플리케이션 패널 내에 있습니다. 이 도구를 열려면 다음 단계를 따르세요.
- WebMCP 도구를 사용하는 페이지에서 Chrome DevTools를 엽니다.
- 애플리케이션 탭을 클릭합니다.
- 사이드바의 최상위 수준에서 WebMCP 창을 선택합니다.
인터페이스 개요
WebMCP 패널은 이중 창 레이아웃을 사용하여 도구를 관리하고 모니터링합니다.
- 호출된 도구: AI 에이전트와 페이지 간의 상호작용을 시간순으로 기록한 로그입니다.
- 사용 가능한 도구: 활성 탭에서 감지된 모든 WebMCP 도구의 라이브 목록입니다.
사용 가능한 도구
사용 가능한 도구 섹션에는 AI 에이전트에 표시되는 도구 이름과 설명이 표시됩니다. 또한 각 도구의 호출 카운터도 포함되어 있어 현재 세션 중에 도구가 호출된 횟수를 확인할 수 있습니다.
호출된 도구
호출된 도구 로그는 도구 상호작용의 영구 기록을 제공합니다. 로그에서 항목을 선택하면 다음 세부정보를 검사할 수 있습니다.
- 상태: 호출 결과입니다 (완료됨, 취소됨, 진행 중 또는 오류).
- 입력: 에이전트가 예측하여 도구에 전송한 정확한 매개변수입니다.
- 출력: 도구에서 제공하는 반환 값 또는 오류 메시지입니다.
로그 필터링
필터 막대를 사용하여 다음 기준에 따라 호출된 도구 목록의 범위를 좁힙니다.
- 이름 또는 설명: 특정 이름이나 용도에 맞는 도구를 찾을 텍스트를 입력합니다.
- 상태 유형: 완료됨, 오류, 취소됨, 진행 중과 같은 현재 상태별로 통화를 필터링합니다.
- 도구 유형: HTML에 정의된 선언적 도구와 JavaScript에 정의된 명령적 도구를 필터링하려면 선택합니다. 모든 도구 유형을 보려면 필터가 활성화되어 있지 않은지 확인하세요.
테스트 도구를 수동으로 테스트
AI 에이전트의 결정 로직을 우회하여 도구의 안정성을 독립적으로 테스트할 수 있습니다. 이는 특정 에이전트 프롬프트를 기다리지 않고 함수 로직을 확인하는 데 유용합니다.
사용 가능한 도구 목록에서 테스트할 도구를 클릭합니다. 또는 호출된 도구 로그에서 도구 위로 마우스를 가져가 재생 (➜) 아이콘을 표시하고 클릭합니다. 수동 테스트 영역이 열립니다.
수동 테스트 영역에서 입력 필드에 매개변수를 입력하거나 조정합니다.
도구 실행을 클릭합니다.
통합 문제 해결
WebMCP 패널은 일반적인 통합 실패를 진단하는 데 도움이 됩니다.
- 스키마 위반: 도구 매개변수 또는 반환 값이 정의된 스키마와 일치하지 않으면 출력 창에 오류 메시지가 표시됩니다.
- 에이전트 거부: 사용 가능한 도구 목록에서 호출 카운터를 확인하여 에이전트가 특정 프롬프트에 도구를 고려했는지 확인합니다.
자동화 및 에이전트
WebMCP는 AI 에이전트가 사이트의 도구를 검색하고 상호작용할 수 있는 에이전트 웹을 위해 설계되었습니다. 상담사 지원 개발의 경우 상담사용 Chrome DevTools 프로젝트는 이 프로토콜을 사용하여 AI 상담사가 WebMCP 도구를 테스트하고 사용할 수 있도록 지원하는 특수 인터페이스를 제공합니다.
명령줄 플래그
특정 에이전트 인터페이스와 상호작용하려면 --categoryWebMCP 플래그를 명시적으로 사용 설정해야 합니다.
관련 리소스
WebMCP 및 에이전트 웹에 대해 자세히 알아보려면 다음 리소스를 참고하세요.