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