發布日期：2026 年 6 月 18 日
如要有效偵錯現代網頁應用程式，AI 代理不僅需要您的原始碼，還需要瞭解應用程式在執行階段的行為。
我們很高興為 Chrome 開發人員工具 (代理程式專用) 推出第三方開發人員工具。現在，應用程式和架構可讓 AI 代理直接查看內部狀態。這有助於服務專員將螢幕上發生的情況與幕後執行的邏輯連結起來。
目標：超越靜態分析
現代網頁開發是以抽象化為基礎，例如 Angular、React 或 Vue 等架構；WordPress 或 Shopify 等 CMS 平台；以及 CSS、3D 繪圖或動畫的程式庫。雖然開發人員工具可直接存取最終算繪的 DOM，但應用程式的「真相」通常存在於架構的內部狀態中：元件階層、JavaScript 信號或後端狀態。
我們提供第三方開發人員工具，是為了讓任何程式庫都能與 AI 代理分享豐富實用的情境資訊。這麼做可讓服務專員偵錯先前「看不到」的問題，例如：
- 元件階層：將網頁上的 DOM 元素直接對應至相應的架構元件和內部狀態。
- 檢查內部狀態：在偵錯工作階段中，直接存取伺服器端狀態或資料庫內容。
運作方式：Discovery API
第三方開發人員工具會使用以事件為基礎的 JavaScript API。Chrome 開發人員工具 MCP 伺服器會透過在全域 window 物件上傳送 devtoolstooldiscovery 事件，探索這些工具。每次網頁導覽或選取的網頁變更時，系統都會自動傳送 devtoolstooldiscovery 事件，您也可以使用 list_3p_developer_tools MCP 工具明確傳送事件。
導入自己的工具
如要公開程式庫或應用程式中的工具，您需要監聽這項探索事件，並以 ToolGroup 回應。
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: "My Library Tools",
description: "Tools for inspecting internal library state",
tools: [
{
name: "getInternalState",
description: "Returns the current internal state of the framework.",
inputSchema: {
type: "object",
properties: {
componentId: { type: "string" }
}
},
execute: async (input) => {
// Access your framework's internal registry
return myFramework.getState(input.componentId);
}
}
]
});
});
實作方式如下：
- 定義結構定義：使用 JSON 結構定義定義工具預期的輸入內容。
- 處理邏輯：實作
execute函式，在網頁的環境中執行，並傳回可序列化的資料。 - DOM 元素：無法序列化的物件無法在網頁和代理程式的開發人員工具之間傳送。DOM 元素是例外情況。當工具傳回 DOM 元素時，代理程式的開發人員工具會自動將這些元素對應至
take_snapshot工具使用的相同 UID。這樣一來，無論頁面元素來自架構或頁面快照，代理程式都能以相同方式與所有元素互動。
使用 MCP 與工具互動
註冊工具後，程式設計代理就能透過代理專用的開發人員工具與工具互動。list_3p_developer_tools MCP 工具會傳回網頁上可用的第三方工具說明。此外，選取的頁面變更時 (例如導覽後)，開發人員工具會將可用工具清單附加至 MCP 工具回應。
如要使用這些工具，代理程式會呼叫 execute_3p_developer_tool。開發人員工具會自動驗證輸入參數，確保參數符合工具的定義。
您也可以使用 evaluate_script MCP 工具叫用工具。您的代理程式會提供 JavaScript 片段，開發人員工具會在網頁上執行該片段。這個程式碼片段可以呼叫第三方開發人員工具，並立即使用其輸出內容進行進一步計算。
使用 evaluate_script 進行複雜的偵錯作業時，代理程式可以：
- 組合作業：將多個步驟合併為單一執行作業。
- 處理無法序列化的值：直接在網頁環境中處理架構專屬物件或信號。
- 提升效能：盡量減少序列化負擔，並避免在代理程式和瀏覽器之間進行多次往返。
初期成功：Angular 整合
我們與 Angular 團隊合作，實作了兩項第三方開發人員工具：
- 信號圖工具：讓代理程式以視覺化方式呈現狀態和檢視畫面之間的關係，協助找出導致無限迴圈或更新失敗的依附元件。
- 依附元件注入 (DI) 圖表工具：公開元素注入器，讓代理商確切瞭解服務的提供位置或缺漏位置。由於 Angular 的 DI 圖表是僅限於執行階段的建構函式，因此單靠靜態分析無法偵錯供應商錯誤。
React 團隊也開始試用第三方開發人員工具。
與我們攜手打造 AI 代理輔助偵錯的未來
這項實驗性功能適用於 Chrome 開發人員工具，代理程式版本須為 0.25.0 以上。如要啟用，請使用 --categoryExperimentalThirdParty 指令列標記。
如果您維護框架、程式庫或工具，並想提升程式碼代理程式的偵錯體驗，歡迎與我們合作：
- 探索說明文件： GitHub 上的技術指南。
- 與我們聯絡：我們正在尋找合作夥伴，共同反覆測試這些 API，協助定義以 AI 技術為基礎的網頁偵錯功能未來發展。如要與我們聯絡，請在 GitHub 存放區中建立問題。
歡迎加入我們，一同打造 AI 代理輔助的網頁開發未來！