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 도구를 테스트하고 사용할 수 있도록 지원하는 특수 인터페이스를 제공합니다.
명령줄 플래그
에이전트용 Chrome DevTools의 WebMCP 도구 (list_webmcp_tools 및 execute_webmcp_tool)는 기본적으로 사용 중지되어 있습니다. 사용 설정하려면 서버 인수에 --categoryExperimentalWebmcp 플래그를 추가합니다.
"args": ["chrome-devtools-mcp@latest", "--categoryExperimentalWebmcp"]
추가 옵션은 구성을 참고하세요.
관련 리소스
WebMCP 및 에이전트 웹에 관해 자세히 알아보려면 다음 리소스를 참고하세요.