Chrome DevTools の [WebMCP] パネルを使用して、ウェブサイトが AI エージェントに公開するクライアントサイドの AI ツールを検査、デバッグ、テストします。このパネルでは、登録、スキーマ検証、呼び出し履歴など、ツールのライフサイクル全体をエンドツーエンドで可視化できます。
[WebMCP] ペインを開く
[WebMCP] ペインは [Application] パネル内にあります。開く手順は次のとおりです。
- WebMCP ツールを使用するページで Chrome DevTools を開きます。
- [Application] タブをクリックします。
- サイドバーの最上位で [WebMCP] ペインを選択します。
インターフェースの概要
[WebMCP] パネルは、ツールを管理、モニタリングしやすいように 2 つのペインで構成されています。
- Invoked Tools: AI エージェントとページ間のインタラクションの時系列ログ。
- Available Tools: アクティブなタブで検出されたすべての WebMCP ツールのライブリスト。
使用可能なツール
[Available tools] セクションには、AI エージェントに表示されるツール名と説明が表示されます。また、各ツールの呼び出しカウンター も表示されます。これは、現在のセッション中にツールが呼び出された回数を示します。
呼び出されたツール
[Invoked tools] ログには、ツールのインタラクションの永続的な記録が保存されます。 ログでエントリを選択すると、次の詳細を確認できます。
- ステータス: 呼び出しの結果（完了、キャンセル、処理中、エラー）。
- 入力: エージェントが予測してツールに送信した正確なパラメータ。
- 出力: ツールから提供された戻り値またはエラー メッセージ。
ログをフィルタする
[Filter] バーを使用して、次の条件に基づいて呼び出されたツールのリストを絞り込みます。
- 名前または説明: テキストを入力して、特定の名前または目的に一致するツールを検索します。
- ステータス タイプ: 呼び出しを現在の状態（完了、 エラー、キャンセル済み、処理中など）でフィルタします。
- ツールタイプ: 選択すると、HTML で定義された宣言型 ツールと JavaScript で定義された命令型 ツールがフィルタされます。すべてのツールタイプを表示するには、どちらのフィルタも有効になっていないことを確認します。
ツールを手動でテストする
AI エージェントの決定ロジックをバイパスして、ツールの信頼性を個別にテストできます。これは、特定のエージェント プロンプトを待たずに、関数ロジックを確認する場合に便利です。
[Available Tools] リストで、テストするツールをクリックします。 または、[Invoked Tools] ログでツールにカーソルを合わせて [Play]（➜）アイコンを表示し、クリックします。手動テスト領域が開きます。
手動テスト領域で、入力フィールドにパラメータを入力または調整します。
[Run tool] をクリックします。
統合の問題のトラブルシューティング
[WebMCP] パネルは、一般的な統合の失敗を診断するのに役立ちます。
- スキーマ違反: ツールのパラメータまたは戻り値が定義されたスキーマと一致しない場合、出力ペインにエラー メッセージが表示されます。
- エージェントの拒否: [Available Tools] リストの呼び出しカウンターを確認して、エージェントが特定のプロンプトに対してツールを検討したかどうかを確認します。
自動化とエージェント
WebMCP は、AI エージェントがサイトのツールを検出して操作できるエージェント ウェブ向けに設計されています。エージェント支援開発の場合、Chrome DevTools for agents プロジェクトは、このプロトコルを使用して AI エージェントが WebMCP ツールをテストして使用できるようにする専用のインターフェースを提供します。
コマンドライン フラグ
特定のエージェント インターフェースを操作するには、--categoryWebMCP フラグを明示的に有効にする必要があります。
関連資料
WebMCP とエージェント ウェブの詳細については、以下のリソースをご覧ください。