偵錯 WebMCP 工具

使用 Chrome 開發人員工具中的 WebMCP 面板，檢查、偵錯及測試網站向 AI 代理程式公開的用戶端 AI 工具。這個面板可提供工具生命週期的完整端對端檢視畫面，包括註冊、結構定義驗證和叫用記錄。

開啟 WebMCP 窗格

「WebMCP」WebMCP窗格位於「Application」(應用程式) 面板中。如要開啟，請按照下列步驟操作：

  1. 在採用 WebMCP 工具的頁面上開啟 Chrome 開發人員工具。
  2. 按一下「應用程式」分頁標籤。
  3. 在側欄頂層，選取「WebMCP」WebMCP窗格。
開發人員工具的「應用程式」面板，且「應用程式」側欄中已選取「WebMCP」窗格。

介面總覽

WebMCP 面板採用雙窗格版面配置，可協助您管理及監控工具：

  • 叫用的工具：AI 代理與頁面互動的時間記錄。
  • 可用工具：顯示在有效分頁中偵測到的所有 WebMCP 工具即時清單。

可用的工具

「Available tools」(可用工具) 專區會顯示 AI 代理看到的工具名稱和說明。此外，每個工具都有叫用計數器，顯示在目前工作階段中，工具被呼叫的次數。

「Available Tools」清單，顯示叫用計數器，以及可點選的狀態圖示，用於篩選。

叫用的工具

「Invoked tools」記錄會永久保存工具互動記錄。選取記錄中的項目後，即可檢查下列詳細資料：

  • 狀態：叫用結果 (已完成、已取消、進行中或錯誤)。
  • 輸入：代理預測並傳送至工具的確切參數。
  • 輸出內容：工具提供的傳回值或錯誤訊息。

篩選記錄

使用「篩選」列，依下列條件縮小叫用工具的清單範圍：

  • 名稱或說明：輸入文字，尋找符合特定名稱或用途的工具。
  • 狀態類型：依目前狀態篩選呼叫，例如「Completed」(已完成)、「Error」(錯誤)、「Cancelled」(已取消)或「In Progress」(進行中)。
  • 工具類型：選取這項篩選條件，即可篩選 HTML 定義的「宣告式」工具，以及 JavaScript 定義的「指令式」工具。如要查看所有工具類型，請確認兩個篩選器都未啟用。

手動測試工具

您可以略過 AI 代理程式的決策邏輯，獨立測試工具的可靠性。這項功能可用於驗證函式邏輯，不必等待特定代理提示。

  1. 在「可用工具」清單中，按一下要測試的工具。 或者，在「Invoked Tools」(叫用的工具) 記錄中，將滑鼠游標懸停在工具上，顯示「Play」(播放) (➜) 圖示，然後按一下該圖示。系統會開啟手動測試區域。

  2. 在手動測試區域中，輸入或調整輸入欄位中的參數。

  3. 按一下「執行工具」。

將游標懸停在「已叫用工具」清單中的項目上，即可顯示「播放」圖示，並開啟預先填入內容的手動測試區域。

排解整合問題

WebMCP 面板可協助您診斷常見的整合失敗問題：

  • 結構定義違規：如果工具參數或回傳值與定義的結構定義不符，輸出窗格就會顯示錯誤訊息。
  • 代理拒絕：查看「Available Tools」(可用工具) 清單中的叫用計數器，確認代理是否曾考慮使用您的工具處理特定提示。

自動化與代理

WebMCP 專為代理式網路設計，AI 代理可探索及與網站工具互動。如要進行代理程式輔助開發，代理程式專用的 Chrome 開發人員工具專案提供專用介面，可使用這個通訊協定，協助 AI 代理程式測試及使用 WebMCP 工具。

指令列旗標

代理專用 Chrome 開發人員工具 (list_webmcp_tools 和 execute_webmcp_tool) 中的 WebMCP 工具預設為關閉。如要啟用，請在伺服器引數中加入 --categoryExperimentalWebmcp 旗標：

"args": ["chrome-devtools-mcp@latest", "--categoryExperimentalWebmcp"]

如需更多選項，請參閱「設定」。

相關資源

如要進一步瞭解 WebMCP 和代理式網路，請參閱下列資源：