WebMCP ツールをデバッグする

Chrome DevTools の WebMCP パネルを使用して、ウェブサイトが AI エージェントに公開するクライアントサイドの AI ツールを検査、デバッグ、テストします。このパネルでは、登録、スキーマ検証、呼び出し履歴など、ツールのライフサイクル全体をエンドツーエンドで可視化できます。

WebMCP ペインを開く

[WebMCP] ペインは [アプリケーション] パネル内にあります。開く手順は次のとおりです。

  1. WebMCP ツールを使用するページで Chrome DevTools を開きます。
  2. [アプリケーション] タブをクリックします。
  3. サイドバーの最上位で、[WebMCP] ペインを選択します。
DevTools の [Application] パネルで、[Application] サイドバーの [WebMCP] ペインが選択されている状態。
DevTools の [Application] パネル。アプリケーション サイドバーで [WebMCP] ペインが選択されています。

インターフェースの概要

[WebMCP] パネルは、ツールを管理およびモニタリングするのに役立つ 2 つのペインのレイアウトを使用します。

  • 呼び出されたツール: AI エージェントとページ間のインタラクションの時系列ログ。
  • Available Tools（利用可能なツール）: アクティブなタブで検出されたすべての WebMCP ツールのライブリスト。

使用可能なツール

[使用可能なツール] セクションには、AI エージェントに表示されるツールの名前と説明が表示されます。また、各ツールの呼び出しカウンターも含まれており、現在のセッション中にツールが呼び出された回数が表示されます。

[利用可能なツール] リスト。呼び出しカウンタと、フィルタリング用のクリック可能なステータス アイコンが表示されています。
呼び出しカウンタと、フィルタリング用のクリック可能なステータス アイコンが表示された [利用可能なツール] リスト。

呼び出されたツール

[呼び出されたツール] ログには、ツール操作の永続的な記録が残ります。ログでエントリを選択すると、次の詳細情報を確認できます。

  • ステータス: 呼び出しの結果（完了、キャンセル、進行中、エラー）。
  • 入力: エージェントが予測してツールに送信した正確なパラメータ。
  • 出力: ツールによって提供される戻り値またはエラー メッセージ。

ログをフィルタする

[フィルタ] バーを使用して、次の条件に基づいて呼び出されたツールのリストを絞り込みます。

  • 名前または説明: 特定の名前または目的に一致するツールを見つけるためのテキストを入力します。
  • ステータス タイプ: 完了、エラー、キャンセル済み、進行中などの現在の状態に基づいて呼び出しをフィルタします。
  • ツールの種類: HTML で定義された宣言型ツールと JavaScript で定義された命令型ツールをフィルタするために選択します。すべてのツールタイプを表示するには、どちらのフィルタも有効になっていないことを確認します。

テストツールを手動でテストする

AI エージェントの決定ロジックをバイパスして、ツールの信頼性を個別にテストできます。これは、特定のエージェント プロンプトを待たずに関数ロジックを検証する場合に便利です。

  1. [利用可能なツール] リストで、テストするツールをクリックします。または、[Invoked Tools] ログでツールにカーソルを合わせ、表示された [Play]（➜）アイコンをクリックします。手動テストエリアが開きます。注: [Available tools] リストからツールを選択した場合、手動テスト領域のパラメータは空になります。それ以外の場合、呼び出されたツールを選択すると、そのセッションのパラメータが事前入力された状態で手動テスト領域が開きます。
  2. 手動テスト領域で、入力フィールドにパラメータを入力または調整します。
  3. [ツールを実行] をクリックします。
[呼び出されたツール] リストの項目にカーソルを合わせると、再生アイコンが表示され、事前入力された手動テスト領域が開きます。
呼び出されたツールリストの項目にカーソルを合わせると、再生アイコンが表示され、事前入力された手動テスト領域が開きます。

統合に関する問題のトラブルシューティング

WebMCP パネルは、一般的な統合の失敗を診断するのに役立ちます。

  • スキーマ違反: ツール パラメータまたは戻り値が定義されたスキーマと一致しない場合、出力ペインにエラー メッセージが表示されます。
  • エージェントの拒否: [Available Tools] リストの呼び出しカウンタを確認して、エージェントが特定のプロンプトに対してツールを検討したことがあるかどうかを確認します。

自動化とエージェント

WebMCP は、AI エージェントがサイトのツールを検出して操作できるエージェント ウェブ用に設計されています。エージェント支援開発の場合、エージェント向け Chrome DevTools プロジェクトは、このプロトコルを使用して AI エージェントが WebMCP ツールをテストして使用できるようにする専用のインターフェースを提供します。

コマンドライン フラグ

一部のエージェント インターフェースでは、--categoryWebMCP フラグを明示的に有効にする必要があります。

関連資料

WebMCP とエージェント ウェブの詳細については、以下のリソースをご覧ください。