使用 Chrome 開發人員工具代理程式 1.0,簡化 AI 程式碼編寫工作流程

發布日期:2026 年 5 月 19 日

AI 程式設計工具在撰寫程式碼方面非常強大,但通常與程式碼執行作業無關。他們可以產生複雜的網頁應用程式,但無法在即時瀏覽器中觀察其行為或檢查輸出內容。

代理專用的 Chrome 開發人員工具可為程式碼編寫代理提供所需的可見度,即時驗證、偵錯及最佳化程式碼。幾個月前,我們首次展示了這項功能,現在很高興宣布,代理程式專用的 Chrome 開發人員工具已推出 1.0 穩定版。

將代理程式連結至瀏覽器

代理專用的 Chrome 開發人員工具可讓代理像一般使用者一樣瀏覽網站,這個穩定版提供多種方式,讓您和服務專員與 Chrome 互動:

  • Model Context Protocol (MCP) 伺服器:這類伺服器可將大型語言模型 (LLM) 連線至開發人員工具的偵錯功能。
  • 指令列介面 (CLI):可有效節省權杖用量,讓代理程式將動作批次處理成指令碼。
  • 代理程式技能:專家指令,可教導代理程式如何及何時使用特定工具,執行無障礙或效能偵錯等工作。

自動偵錯、模擬及稽核

在 1.0 版中,程式設計代理現在可以執行先前需要手動進行的進階偵錯工作。

自動執行品質稽核

代理程式現在可以執行 Lighthouse 稽核,評估網站品質。這項工具可找出無障礙、SEO、最佳做法和代理瀏覽的問題。這就像是擁有可瞭解執行階段的 Linter。這項功能可做為品質閘道,讓程式設計代理程式成為專家,在重大阻礙進入正式環境前就加以排除。

模擬實際使用者體驗

您的代理程式可以使用代理程式專用的開發人員工具,透過模擬工具測試網站在各種裝置上或不同地區的顯示方式和效能。可調整視窗大小、模擬地理位置,以及限制網路和 CPU 速度,模擬實際情況。這樣一來,代理程式就能測試行動裝置專屬行為 (例如漢堡選單),而不必手動調整瀏覽器大小。

開發及偵錯 Chrome 擴充功能

您也可以讓代理程式協助您開發及偵錯 Chrome 擴充功能。代理程式可以直接安裝、重新載入及觸發擴充功能動作。這有助於在開發期間自動執行頻繁的「儲存並重新整理」週期。此外,它還能深入瞭解背景指令碼和擴充功能頁面,協助您修正更複雜的瀏覽器設定中的錯誤。

偵錯及測試 WebMCP 工具

我們也將深入瞭解 WebMCP (Web Model Context Protocol) 來源試用,協助您導入這項新 API。

代理程式不必依據信號推斷 DOM 的導覽計畫,而是直接與您使用 WebMCP 公開的結構化工具互動。這項功能可讓您更輕鬆地開發、測試及偵錯這些工具:代理程式可以列出、以程式輔助方式叫用工具,並即時驗證工具的正確性。這項功能可簡化在網站中新增 WebMCP 支援及測試的程序。

偵測及偵錯記憶體流失問題

我們也新增了記憶體分析專用工具。您的代理程式現在可以擷取堆積快照,找出記憶體洩漏問題,例如已卸離的 DOM 節點。運用專業的記憶體流失偵錯技能,協助您維持應用程式的精簡和快速,成為您的效能專家。

透過自動連線功能交接工作階段

您可以與代理程式共用目前的瀏覽器環境,而不是讓代理程式開啟自己的沙箱瀏覽器執行個體 (代理程式開發人員工具通常會以這種方式授予代理程式瀏覽器存取權)。這非常適合用來偵錯需要登入的項目,例如需要驗證的資訊主頁,您希望 AI 代理接手技術調查,不必重新驗證所有項目。

使用第三方開發人員工具公開內部狀態

第三方開發人員工具可讓網頁應用程式直接與 AI 代理分享內部狀態和元件詳細資料。這些工具可讓專員存取一般分析中通常會隱藏的資料,瞭解複雜的邏輯。這樣一來,系統就能根據應用程式在瀏覽器中的實際行為,提供更準確的偵錯建議。

開始使用

您可以使用 npm 安裝穩定版本,或直接在所選代理程式中設定:

Antigravity

服務專員專用的 Chrome 開發人員工具已預先與 Antigravity 2.0 組合。您可以使用瀏覽器子代理程式立即開始使用。請嘗試使用斜線指令,例如:

/browser Navigate to the Google homepage

如要存取專業代理程式技能,建議在初始設定的「使用 Google 建構」步驟中,或在應用程式設定中安裝開發人員工具外掛程式。詳情請參閱 Antigravity 瀏覽器子代理程式說明文件

Gemini CLI

如要以擴充功能形式安裝 MCP 套件和技能,請使用下列指令:

$ gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

Claude Code

如要將代理程式專用的 Chrome 開發人員工具安裝為 Claude 程式碼外掛程式,請在 Claude 程式碼中使用下列斜線指令。新增 Marketplace 登錄檔:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

然後從 Marketplace 登錄檔安裝外掛程式:

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

如需更詳細的指南和範例提示,請參閱 Chrome 開發人員工具代理程式說明文件。您也可以探索 GitHub 上的原始碼