讓 Coding Agent 直接接管你的瀏覽器除錯：Chrome DevTools MCP 新能力讀後筆記

本篇文章更新時間：2026/03/16
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知或向一介資男的 LINE 社群反應。
如果本站內容對你有幫助，歡迎贊助支持 。

讓 Coding Agent 自動連上你的 Chrome 除錯環境

Chrome M144 帶來的 MCP 自動連線功能，如何改變我們的開發流程？

編輯前言：這篇文章來自 Let your Coding Agent debug your browser session with Chrome DevTools MCP，介紹了 Chrome DevTools MCP 的一項新功能：Coding Agent 可以直接連到你正在使用的 Chrome session。對我這種常在 DevTools 與 AI 工具間切換的開發者來說，是很實用的升級。

核心觀點 (Key Takeaways)

• Coding agent 能直接使用你已登入的瀏覽器 session，不需要重複登入、重新開環境。
• Coding agent 可讀取你在 DevTools 中選取的元素或 network request，也就是能從你手動查看的上下文直接接手除錯。
• Chrome M144 新增的 remote debugging flow 以使用者授權為核心，避免自動連線帶來安全風險。

深入解析

原文的重點在於：Chrome DevTools MCP server 終於可以「自動接上」你正在使用的 Chrome，而不是一定要開啟一個特製的 profile 或用 remote debug port 連接。這對日常的除錯流程其實是一個很大的質變。

1. Coding Agent 可以直接接手你的工作環境

作者提到：

"Imagine you want your coding agent to fix an issue that is gated behind a sign-in."

這句話非常有感。以前如果你想請 AI 工具幫忙看一個需要登入的頁面，你往往得：

1. 開新的 Chrome profile
2. 再登入一次
3. 再讓工具從 remote port 接上去

現在完全不需要。Coding agent 可以直接用你現在的 session，更貼近真正的「接手你正在做的事情」。

2. 與 DevTools UI 的互動更緊密

這次升級最讓我驚訝的是：

Coding agents can now access an active debugging session in the DevTools UI.

也就是說：

• 你在 Elements panel 選取了一個元素 → 叫 AI 幫你研究它為什麼跑版。
• 你在 Network panel 選了一個 failed request → 叫 AI 查 request/response、推斷原因。

以前是你手動查；現在是「看到問題 → 點一下 → AI 自動接手」。
我覺得這是更自然的除錯方式，能讓「人工操作 + AI 輔助」真正融合。

3. 新的 Remote Debugging Flow：安全性被放在第一位

Chrome M144 引入一個新的授權流程：

• Remote debugging 預設是關閉的（chrome://inspect/#remote-debugging）。
• 每次 MCP server 請求連線時 Chrome 都會跳出詢問視窗。
• 連線期間 Chrome 會顯示「Chrome is being controlled by automated test software」警告。

從設計上可以看出 Google 很在意安全性，避免這功能被惡意程式用來監控使用者的瀏覽器。

筆者心得與啟發

這篇文章給我的最大啟發是：AI 輔助開發的下一步，不是生成程式碼，而是直接插入你的工作現場。

以前 AI 雖然能寫程式，但和我們的瀏覽器、DevTools 基本上是兩個世界。這次 Chrome DevTools MCP 的升級，讓 Coding Agent 變成一個真正的「對話式協作者」，能在你已經觀察到的上下文中一起除錯，而不是從遠端猜測。

若用更實際的角度看，我覺得以下幾個場景會受到最直接的影響：

• 前端工程師 debugging 時遇到奇怪的 CSS/JS 問題，可以直接選元素丟給 AI 查。
• QA 和 PM 在測試環境發現 bug，可以不用描述半天，直接：選 request → 叫 agent 看。
• 想用 Lighthouse 或性能追蹤，不用新開乾淨 profile，AI 會用你現在的 session。

未來如果更多 DevTools panel（像 Performance、Application、Memory）也被開放給 agent，我覺得 AI 在前端除錯的參與度會再上一階。

總結來說，這是一個小功能，但對開發流程的影響會是質變。