Chrome DevTools の [WebMCP] パネルを使用すると、ウェブサイトが AI エージェントに公開するクライアントサイドの AI ツールを検証、デバッグ、テストできます。このパネルでは、登録、スキーマ検証、呼び出し履歴など、ツールのライフサイクル全体をエンドツーエンドで可視化できます。
[WebMCP] ペインを開く
[WebMCP] ペインは [Application] パネル内にあります。開くには、次の手順を行います。
- WebMCP ツールを使用するページで Chrome DevTools を開きます。
- [Application] タブをクリックします。
- サイドバーの最上位で、[WebMCP] ペインを選択します。
インターフェースの概要
[WebMCP] パネルは、ツールを管理、モニタリングしやすいように、2 つのペインで構成されています。
- 呼び出されたツール: 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 とエージェント ウェブの詳細については、次のリソースをご覧ください。