讓 Coding Agent 透過 Chrome 開發人員工具 MCP 偵錯瀏覽器工作階段

發布日期:2025 年 12 月 11 日

我們已推出 Chrome 開發人員工具 MCP 伺服器強化功能,許多使用者都要求這項功能:讓程式碼編寫代理程式直接連線至有效瀏覽器工作階段。

這項改良功能可讓程式設計代理程式執行下列操作:

  1. 重複使用現有瀏覽器工作階段:假設您想讓程式碼編寫代理程式修正登入後才能存取的問題,現在,編碼代理程式可以直接存取目前的瀏覽工作階段,不必額外登入。
  2. 存取進行中的偵錯工作階段:現在,程式碼代理程式可以在開發人員工具使用者介面中存取進行中的偵錯工作階段。舉例來說,在 Chrome 開發人員工具的網路面板中發現失敗的網路要求時,請選取該要求,並要求程式碼代理程式進行調查。在「元素」面板中選取的元素也適用相同做法。我們很高興推出這項新功能,讓您能在手動和 AI 輔助偵錯之間順暢切換。

實際運作情況:

自動連線功能是 Chrome 開發人員工具 MCP 連線至 Chrome 執行個體的現有方式。請注意,您仍可:

  • 使用 Chrome 開發人員工具 MCP 伺服器專屬的使用者設定檔 (目前預設) 執行 Chrome。
  • 連線至執行中的 Chrome 執行個體,並使用遠端偵錯連接埠。
  • 以暫時設定檔執行多個 Chrome 執行個體,彼此互不干擾。

運作方式

我們在 Chrome M145 (目前為 Canary 版) 中新增了一項功能,可讓 Chrome 開發人員工具 MCP 伺服器要求遠端偵錯連線。這項新流程以 Chrome 現有的遠端偵錯功能為基礎,根據預設,Chrome 會停用遠端偵錯連線。開發人員必須先前往 chrome://inspect#remote-debugging 明確啟用這項功能。

使用 --autoConnect 選項設定 Chrome 開發人員工具 MCP 伺服器時,MCP 伺服器會連線至有效的 Chrome 執行個體,並要求遠端偵錯工作階段。為避免惡意行為人濫用,每當 Chrome 開發人員工具 MCP 伺服器要求遠端偵錯工作階段時,Chrome 都會向使用者顯示對話方塊,並要求他們授予遠端偵錯工作階段的權限。此外,在偵錯工作階段處於啟用狀態時,Chrome 會在頂端顯示「Chrome 目前受到自動測試軟體控制」橫幅。

遠端偵錯流程:首先啟用遠端偵錯功能。然後確認遠端偵錯連線要求。橫幅文字會指出偵錯工作階段。
Chrome 中的全新遠端偵錯流程和使用者介面。

開始使用

使用新的遠端偵錯功能。您必須先在 Chrome 中啟用遠端偵錯功能,然後設定 Chrome 開發人員工具 MCP 伺服器,才能使用新的自動連線功能。

步驟 1:在 Chrome 中設定遠端偵錯

在 Chrome 中,按照下列步驟設定遠端偵錯:

  1. 前往 chrome://inspect/#remote-debugging 啟用遠端偵錯。
  2. 按照對話方塊使用者介面操作,允許或拒絕連入的偵錯連線。
螢幕截圖:顯示如何在 Chrome 中啟用遠端偵錯
必須先啟用遠端偵錯功能,用戶端才能要求遠端偵錯連線。

步驟 2:設定 Chrome 開發人員工具 MCP 伺服器,自動連線至執行中的 Chrome 執行個體

如要將 chrome-devtools-mcp 伺服器連線至執行中的 Chrome 執行個體,請使用 MCP 伺服器集的 --autoConnect 指令列引數。

以下程式碼片段是 gemini-cli 的設定範例:

{
   "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--channel=canary"
      ]
    }
  }
}

步驟 3:測試設定

現在開啟 gemini-cli,然後執行下列提示:

Check the performance of https://developers.chrome.com

Chrome 開發人員工具 MCP 伺服器會嘗試連線至正在執行的 Chrome 執行個體。系統會顯示要求使用者授權的對話方塊:

Chrome 對話方塊,要求使用者啟用遠端偵錯工作階段。
Chrome 要求使用者授權啟動遠端偵錯工作階段。

按一下「允許」後,Chrome 開發人員工具 MCP 伺服器會開啟 developers.chrome.com,並擷取效能追蹤記錄。

如需完整操作說明,請參閱 GitHub 上的 README

讓程式碼代理接管偵錯工作階段

連線至即時 Chrome 執行個體後,您就不必在自動化和手動控制之間做選擇。您可以自行使用開發人員工具,或是將偵錯工作交給程式碼代理。如果在網站上發現問題,可以開啟開發人員工具查看,找出導致問題的元素。如要讓程式碼代理程式修正問題,現在可以使用 Chrome 開發人員工具 MCP 伺服器。您可以在「元素」面板中選取元素,並要求編碼代理程式調查問題。

這項功能也適用於「網路」面板。您可以選取網路要求,並要求程式碼代理程式進行調查。

但這只是第一步。我們計畫透過 Chrome 開發人員工具 MCP 伺服器,逐步向程式碼代理程式公開更多面板資料。敬請持續鎖定!