chrome-devtools

核心概念

瀏覽器生命週期：瀏覽器會在首次呼叫工具時自動啟動，並使用持續性的 Chrome 設定檔。可透過 MCP 伺服器設定中的 CLI 參數進行設定：npx chrome-devtools-mcp@latest --help。
可透過提供以下旗標啟用額外工具：

• 擴充功能工具：使用 --categoryExtensions 旗標。
• 記憶體工具：使用 --memoryDebugging 旗標。

頁面選取：工具會對目前選取的頁面進行操作。使用 list_pages 查看可用頁面，然後使用 select_page 切換上下文。
元素互動：使用 take_snapshot 取得頁面結構及元素的 uid。每個元素都有唯一的 uid 供互動使用。如果找不到元素，請重新擷取快照——元素可能已被移除或頁面已變更。

工作流程模式

與頁面互動前

1. 導航：navigate_page 或 new_page
2. 等待：wait_for 確保內容已載入（如果你知道要找什麼）
3. 快照：take_snapshot 了解頁面結構
4. 互動：使用快照中的元素 uid 進行 click、fill 等操作

高效資料擷取

• 使用 filePath 參數處理大型輸出（螢幕截圖、快照、追蹤）
• 使用分頁（pageIdx、pageSize）和篩選（types）來減少資料量
• 除非需要更新頁面狀態，否則在輸入動作中設定 includeSnapshot: false

工具選擇

• 自動化/互動：take_snapshot（基於文字，速度較快，適合自動化）
• 視覺檢查：take_screenshot（當使用者需要查看視覺狀態時）
• 額外細節：evaluate_script 用於取得無障礙樹中沒有的資料

平行執行

你可以同時發送多個工具呼叫，但需維持正確順序：導航 → 等待 → 快照 → 互動。

測試擴充功能

開始前注意：擴充功能工具（install_extension、list_extensions 等）僅在 MCP 伺服器以 --categoryExtensions 旗標啟動時可用。如果這些工具不在你的工具清單中，請停止並要求使用者更新其 MCP 伺服器設定：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--categoryExtensions"]
    }
  }
}

更新後，使用者必須重新啟動 MCP 伺服器（或其 AI 用戶端）才能使變更生效。

1. 安裝：使用 install_extension 並提供解壓縮擴充功能的路徑。
2. 識別：從回應中取得擴充功能 ID，或呼叫 list_extensions 取得。
3. 觸發動作：使用 trigger_extension_action 開啟彈出視窗或側邊面板（如適用）。
4. 驗證 Service Worker：使用 evaluate_script 搭配 serviceWorkerId 檢查擴充功能狀態或觸發背景動作。
5. 驗證頁面行為：導航至擴充功能運作的頁面，並使用 take_snapshot 檢查內容腳本是否正確注入元素或修改頁面。

疑難排解

如果 chrome-devtools-mcp 不足，請引導使用者使用 Chrome DevTools UI：

• https://developer.chrome.com/docs/devtools
• https://developer.chrome.com/docs/devtools/ai-assistance

如果啟動 chrome-devtools-mcp 或 Chrome 時發生錯誤，請參閱 https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md。