Chrome DevTools MCP 指南：AI 驅動的網頁性能分析與除錯

為什麼我們需要 AI 來操作 DevTools？

作為前端開發者，Chrome DevTools 是我們每天賴以生存的工具。但在優化性能（如 Core Web Vitals）或排查複雜的 DOM 狀態時，我們往往需要重複執行相同的操作：打開面板、點擊錄製、分析瀑布流、截圖、對比數據...。

Chrome DevTools MCP 的出現改變了這一切。它是一個 Model Context Protocol (MCP) 伺服器，將 DevTools 的核心能力「API 化」，讓 AI Agent（如 Gemini CLI、Claude、Cursor 或 Copilot）能夠：

自動化重複流程：一鍵完成 "開啟頁面 -> 跑分 -> 分析報告 -> 給出建議"。
語意化分析：你不需要自己去解讀複雜的 JSON 或 Flame Chart，AI 會直接告訴你 "LCP 延遲是因為這張圖片沒有 Lazy Load"。
上下文感知：AI 能同時看到 DOM 結構、Console 錯誤和網路請求，進行跨維度的綜合診斷。

本指南將帶你深入了解這款工具，並透過實際案例展示它如何改變你的開發工作流。

核心功能與工具詳解

Chrome DevTools MCP 提供了 26 個強大的工具，涵蓋了開發者最關心的幾個面向：

1. 導航與頁面控制 (6 個工具)

工具名稱	功能說明
`new_page`	開啟新頁面並導航至指定 URL
`navigate_page`	將現有頁面導航至新的 URL
`select_page`	選擇特定的瀏覽器分頁進行操作
`list_pages`	列出所有開啟的分頁
`close_page`	關閉指定的分頁
`wait_for`	等待特定條件（如元素出現、網路閒置等）

2. 輸入自動化 (8 個工具)

工具名稱	功能說明
`click`	點擊指定元素
`fill`	在輸入框中填入文字
`fill_form`	批次填寫表單多個欄位
`hover`	滑鼠懸停在元素上
`drag`	拖放元素
`press_key`	模擬鍵盤按鍵
`upload_file`	上傳檔案
`handle_dialog`	處理彈出對話框（alert, confirm, prompt）

3. 深度性能分析 (3 個工具)

工具名稱	功能說明
`performance_start_trace`	啟動瀏覽器的性能追蹤（Performance Profiling）
`performance_stop_trace`	停止性能追蹤並取得原始數據
`performance_analyze_insight`	最強大的功能：深入分析關鍵指標（LCP, CLS, INP），回傳具體的渲染路徑與瓶頸

4. 網路監控 (2 個工具)

工具名稱	功能說明
`list_network_requests`	列出所有網路請求，可篩選狀態碼、類型等
`get_network_request`	取得特定請求的詳細資訊，包含 Headers、Body 等

5. 除錯與運行時檢測 (5 個工具)

工具名稱	功能說明
`list_console_messages`	讀取 Console 中的 Log、Warn 和 Error
`get_console_message`	取得特定 Console 訊息的詳細內容
`evaluate_script`	在頁面 Context 中執行任意 JavaScript
`take_screenshot`	截取頁面的視覺圖像
`take_snapshot`	取得頁面的 DOM 結構快照（用於 AI 理解頁面佈局）

6. 裝置模擬 (2 個工具)

工具名稱	功能說明
`emulate`	模擬特定裝置（如 iPhone、Pixel 等）
`resize_page`	調整視窗大小

實戰演練：優化一個慢速網頁

讓我們透過一個模擬情境，看看如何使用 Gemini CLI 搭配 DevTools MCP 來解決問題。

情境：使用者回報首頁載入很慢

你不需要手忙腳亂地打開各種面板，只需在 Gemini CLI 中輸入自然語言指令：

User: "幫我分析 https://example.com 的首頁性能，特別是 LCP，並檢查有沒有 Console 錯誤。"

Gemini CLI 的思考與執行過程：

初始化：調用 new_page(url="https://example.com") 開啟目標網頁。
初步檢查：調用 list_console_messages() 檢查是否有紅字錯誤干擾載入。
- 發現：Console 顯示幾個 404 圖片錯誤。
性能診斷：調用 performance_start_trace() 開始追蹤，等待頁面載入後調用 performance_analyze_insight()。
- 工具回傳：LCP 元素是一個巨大的 Hero Image，且沒有設定 fetchpriority="high"，加上伺服器回應時間 (TTFB) 過長。
綜合建議：

Gemini CLI 回覆：分析完成。該頁面的 LCP 為 3.8s（表現不佳）。
主要問題：
資源阻塞：Hero Image (hero-banner.jpg) 載入順序過低。
Console 錯誤：發現 logo-icon.png 回傳 404，這可能導致佈局偏移或不必要的重試。
建議行動：
在 Hero Image 加上 <img fetchpriority="high" ...>。
修復 logo-icon.png 的路徑錯誤。

進階應用：建立自動化驗收指令

你可以將這些檢查封裝成一個自訂命令，變成團隊的驗收標準。在專案的 .gemini/commands/ 目錄下建立一個 TOML 檔案：

# .gemini/commands/audit-page.toml
description = "執行完整的頁面性能審計"
content = """
請對以下網址進行完整的性能審計：{{USER_INPUT}}

執行步驟：
1. 開啟頁面並等待載入完成
2. 檢查 Console 是否有任何錯誤或警告
3. 執行性能分析，特別關注 LCP、CLS 和 INP
4. 檢查網路請求，找出任何 4xx 或 5xx 錯誤
5. 截圖當前頁面狀態
6. 綜合以上資訊，給出具體的優化建議
"""

以後每次部署前，只需執行 /audit-page https://staging.example.com，AI 就會自動幫你跑完所有檢查清單！

與 Playwright MCP 的區別

很多開發者會問：「這跟 Playwright MCP 有什麼不同？」

特性	Chrome DevTools MCP	Playwright MCP
核心強項	性能分析、底層協議、Console/Network 詳細資訊	端對端測試、複雜的使用者互動模擬（點擊、輸入）
使用場景	優化 LCP/CLS、除錯 JS 錯誤、分析渲染瓶頸	填寫表單、測試購物車流程、UI 回歸測試
操作層級	瀏覽器底層 (CDP)	使用者操作層級

最佳實踐：兩者結合使用。用 Playwright 模擬使用者走到「購物車頁面」，然後用 DevTools MCP 分析該頁面的「性能表現」。

快速開始

1. 安裝 Chrome Tools MCP Server

npm install @nicholmikey/chrome-tools

2. 在 Gemini CLI 設定中加入 MCP Server

編輯 ~/.gemini/settings.json：

{
  "mcpServers": {
    "chrome-tools": {
      "command": "npx",
      "args": ["-y", "@nicholmikey/chrome-tools"]
    }
  }
}

3. 開始使用

啟動 Gemini CLI 後，你就可以直接用自然語言控制 Chrome 了！

總結

Chrome DevTools MCP 讓性能優化不再是一門玄學，也不再是只有資深工程師才能駕馭的複雜工作。透過 AI 的輔助，我們可以更快地看見數據背後的意義，並將更多時間花在創造價值，而不是解讀圖表。

現在就開始在你的 Gemini CLI 中嘗試使用這些指令，體驗「對話式除錯」的快感吧！

支持作者 ☕

台灣用戶：

透過 LINE Pay 支持

國際用戶：

透過 Ko-fi 支持