讓 Claude Code 操作我現有的 Chrome：從 Playwright 到 Chrome DevTools MCP

想用 AI 直接測試自己寫的網頁，我從業界常用的 Playwright 開始，卻卡在「獨立瀏覽器、沒有我的 session 與 cookie」的痛點。最後改用 Chrome DevTools MCP 連上我已開著的 Chrome——以及為什麼一開始一直失敗，後來怎麼解掉。

  • AI coding
  • Claude Code
  • MCP
  • Chrome DevTools
  • Playwright

時間回到 2026 年 3 月初，當我開始學習用 AI coding 來做各種開發時，很快就遇到一個實際問題：我要怎麼讓 AI 快速地幫我測試剛寫好的網頁？

從 Playwright 開始：業界的選擇

跟 Claude Code 簡單討論後，我發現業界普遍用 Playwright 來做瀏覽器自動化測試，所以一開始就裝了 Playwright 的 MCP 來試。

設定本身沒什麼障礙，但很快就撞上一個痛點：當 Claude Code 透過 MCP 啟動 Playwright 時，它會開一個獨立的瀏覽器頁面。這意味著我平常的 session、cookie、storage 全都用不上。如果測試流程需要登入，我還得額外設定一堆東西才能跑——反而變得很麻煩。

換個方向：能不能操作我已經開著的 Chrome？

於是我想：能不能讓 Claude Code 直接操作我現有、已經開著的 Google Chrome，而不是每次都開一個全新的空白視窗？這樣 session 和登入狀態就都還在。

我請 Claude Code 幫我查找做法。但這裡我犯了一個關鍵的錯——我沒有讓它使用 web search 去抓最新資料，所以它給我的，全是 LLM 既有訓練知識裡的方法。

卡關：AI 靠舊知識，撞上新版 Chrome DevTools

問題就出在這裡。新版的 Chrome DevTools 連接方式跟舊資料對不上，Claude Code 給的方法一個個失效。最典型的就是它建議我去改 Chrome 捷徑、加上 --remote-debugging-port=9222 這類做法——試了就是連不上。

它怎麼換方法都一直卡在一些奇怪的問題上，始終沒辦法正常地用 MCP 連上 Chrome 的 DevTools。折騰到某個時間點我才意識到：問題不是它不會，而是它手上的資料太舊了。

轉機：用 web search 找到社群最新解法

想通這點後，我改讓它用 web search 去找最新資訊——也自己用 Claude AI 搜了一輪，最後在 GitHub Issue 上找到社群整理的解法。關鍵在於一個比較新的功能參數：--autoConnect。

最終成功的做法

以下是最後真正跑通的步驟：

  1. 執行指令，把 Chrome DevTools MCP 加進 Claude Code：

    claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest

  2. 打開 ~/.claude.json，在 chrome-devtools 的 args 裡加上 "--autoConnect"。

  3. 重啟 Claude Code。

  4. 在 Chrome 開啟 chrome://inspect/#remote-debugging，啟用 Remote Debugging。

  5. 重啟 Chrome，看到 Server running at: 127.0.0.1:9222 就代表成功了。

這之後，Claude Code 就能透過 Chrome DevTools MCP 直接操作我現有的 Chrome，開發過程中讓 AI 接手測試，session 和登入狀態全都還在。

關鍵學習：--autoConnect 是當時比較新的功能。當 AI 給的方法一直失效、又卡在奇怪的地方時，往往不是邏輯問題，而是它的訓練資料跟不上工具的版本。這時直接去翻(當然是 AI 去翻)社群的 GitHub Issue，通常能挖到最新解法。

三個月後回頭看：Playwright 不是不好

這套做法是我在 2026 年 3 月嘗試、實驗出來的，到現在（6 月底）都還運作正常。

不過這不代表 Playwright 不好。經過大約三個月的 Web 全端學習後，我現在理解 Playwright 的優勢在於：它能用腳本化的方式去做重複驗證與自動化測試。如果你的需求是把一整條測試流程固化、反覆跑，那 Playwright 才是對的工具。

而如果只是想單純地操作瀏覽器、或操作一個已經開著的頁面——也就是把 AI 當成 computer use 工具來臨時驅動——那 Chrome DevTools MCP 連上現有 Chrome，反而是更順手的選擇。工具沒有絕對好壞，只有適不適合當下的場景。