怎樣用 Gemini CLI 和 Chrome DevTools MCP 操作網頁

Gemini CLI 能操作 Chrome 嗎？

可以，前提是項目設定暴露了對應工具，且模型帳號和審批策略允許調用。Gemini CLI 是 MCP 客戶端，Chrome DevTools MCP 啓動或連接瀏覽器，負責打開 URL 和讀無障礙快照。模型登入與瀏覽器連接是兩件事。終端顯示 Connected 之後，還要用一張已知頁面核對結果。 一位使用者曾回報舊版 Gemini CLI 無法連上 DevTools MCP，但另一個客戶端可以連線。遇到類似情形，先檢查專案設定和傳輸方式。 GitHub #178

官方擴展目錄也列出了 Chrome DevTools MCP。本文用顯式的項目設定，版本、啓動參數和範圍都能核對。 Gemini CLI MCP 指南 Chrome DevTools 設定 瀏覽器中的 Gemini

重點

• 在專案註冊 Chrome DevTools MCP，先使用獨立的瀏覽器設定檔。

• 用 gemini mcp list 查連線，再從 Gemini CLI 執行 /mcp desc 查工具。

• 開啟已知網頁，核對工具傳回的最終 URL、主標題和連結。

• 分別確認模型驗證、工作區信任與工具核准。

搜索和瀏覽器操作各能驗證什麼

搜索結果可找到發佈公告，不能說明當前帳號或點擊後的狀態。瀏覽器快照能確認顯示內容，卻不會自動判斷它是不是最新的官方資料。先明確要驗證的事實，再選能返回證據的工具。 搜索與瀏覽器操作 AI Agent 的職責

在小項目鎖定版本

以下是依官方文件整理的設定範例，固定 Gemini CLI 0.67.0 與 Chrome DevTools MCP 1.12.0，方便核對工具參數。先確認伺服器要求的 Node.js 與 Chrome 版本，並保留依賴鎖定檔。 Chrome DevTools MCP v1.12.0

mkdir browser-mcp-check
cd browser-mcp-check
npm init -y
npm install --save-exact @google/gemini-cli@0.67.0 chrome-devtools-mcp@1.12.0
./node_modules/.bin/gemini --version
./node_modules/.bin/chrome-devtools-mcp --version

將下列條目放進項目的 .gemini/settings.json。將路徑替換為本機項目內可執行檔案絕對路徑；如已有設定，合併服務條目。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "/absolute/path/browser-mcp-check/node_modules/.bin/chrome-devtools-mcp",
      "args": ["--headless", "--isolated", "--no-usage-statistics"],
      "includeTools": ["new_page", "take_snapshot", "list_pages", "close_page"],
      "trust": false
    }
  }
}

includeTools 限定 Gemini CLI 暴露的工具，不限制域名。--isolated 使用臨時瀏覽器資料。先存取自己控制或獲准檢視的頁面。需要復用登入時，單獨確認連接方式和會話帳號。Google 的 Codelab 使用完整測試應用，初次核對只需已知標題和連結的小頁面。 連接現有瀏覽器 Google UI 測試實驗

信任工作區後，Gemini 才能載入專案設定。trust: false 讓伺服器的工具呼叫繼續受目前政策管控。先用互動模式，看到核准提示時確認伺服器名稱、動作和 URL。ask_user 規則在非互動模式下會拒絕呼叫。如果需要限制可存取網址，請在 Chrome DevTools MCP 另行設定。--allowed-url-pattern 需要 Chrome 149 以上版本。 Gemini CLI 核准政策 Chrome DevTools MCP 設定

從握手檢查到網頁快照

在專案目錄執行 ./node_modules/.bin/gemini mcp list。信任的工作區可載入專案設定。進入 Gemini CLI 的互動介面後，執行 /mcp desc 檢查工具和參數。模型存取需另行設定。 Gemini CLI 驗證方式

若要重複驗證，可以在第二個終端機進入測試專案，啟動本機測試頁。預期主標題為 “MCP browser check”，連結指向 #details。請用工具回傳的結果核對兩項。

mkdir -p fixture
cat > fixture/index.html <<'HTML'
<!doctype html>
<meta charset="utf-8">
<title>MCP browser check</title>
<h1>MCP browser check</h1>
<a href="#details">Details</a>
<p id="details">Local fixture</p>
HTML
python3 -m http.server 8765 --bind 127.0.0.1 --directory fixture

此範例固定的版本需要把 new_page 回傳的頁面 ID 當成 pageId 傳給 take_snapshot。若頁面重新導向，以實際回傳的 URL 和標題為準。 v1.12.0 工具文件

用 chrome-devtools MCP 開啟 http://127.0.0.1:8765/。 返回頁 ID、最終 URL、主標題和一條預期連結。按打開結果的頁 ID 取快照。存取失敗時返回工具錯誤。不要輸入憑證、提交表單或修改內容。

根據失敗發生在哪一層排查

如果服務無法註冊，先核對設定範圍、版本和傳輸。GitHub 上有用戶報告舊版 Gemini CLI 連接失敗，同一任務在另一客戶端可連接。它是歷史環境問題，先檢查本地參數再判斷。另有 Apple Silicon 用戶發現 MCP 進程通過 PATH 用了 Intel Node，修正 PATH 後自己的問題解決。先核對真正使用的 Node 和架構。 GitHub 原 issue Reddit 原帖

如果能打開網頁但快照報錯，檢查該版本的工具參數，從打開結果獲取頁 ID。如果跳到登入頁，則暫停並記錄需要人工接管。 核對登入會話

保留最小回執

保存 CLI、MCP 和瀏覽器版本，設定範圍、瀏覽器模式、工具列表、最終 URL、頁 ID 和預期結果。記錄在哪一步發生了權限批准或失敗。再跑時可以定位是哪一層不同。 第一個瀏覽器任務 按任務選瀏覽器連接 什麼是 Agent 瀏覽器

需要在 Gemini CLI 讀取 Chrome 的即時狀態時，先用專案層級的設定開啟一個已知頁面。每多開放一項工具，就為它訂出可核對的預期結果。

Secholar.L

Tabbit 成長與內容

Secholar.L 專注 AI 瀏覽器與 Agent 工作流的實測寫作,基於真實調研比較工具,引用可查證的一手來源。