[Open Source] AI 輔助 Chrome 操作，上手時間倒數計時！

用 Chrome DevTools MCP 讓 AI 幫你操控 Chrome 瀏覽器：初學者上手指南（台灣繁體中文）

大家好！今天我們要來聊一個超酷的東西，可以讓你的 AI 助手（像是 Gemini、Claude 或 Copilot）直接控制你的 Chrome 瀏覽器！這聽起來是不是很神奇？ 沒錯，這就是 chrome-devtools-mcp 的厲害之處。 讓我們一起來看看，它到底是什麼，以及作為初學者，我們可以怎麼開始使用它！

什麼是 Chrome DevTools MCP？

chrome-devtools-mcp 是一個扮演「模型-上下文-協定（Model-Context-Protocol, MCP）」伺服器的工具。 簡單來說，它讓你的 AI 程式碼助手可以使用 Chrome 瀏覽器內建的「開發人員工具（DevTools）」來進行各種操作，像是：

• 自動化測試： 讓 AI 幫你點擊按鈕、填寫表單、截圖等等。
• 除錯： 讓 AI 幫你查看網頁的錯誤訊息、網路請求，找出問題所在。
• 效能分析： 讓 AI 幫你分析網頁載入速度，找出優化的方法。

有了 chrome-devtools-mcp，你就不用自己手動操作瀏覽器，可以把這些繁瑣的事情交給 AI， 讓你更專注於程式碼的開發和設計！

為什麼這對台灣的開發者很重要？

• 提升效率： 減少重複性、手動的操作，節省時間，讓你能更快完成專案。
• 更深入的除錯： AI 可以幫助你分析更複雜的網頁問題，找出程式碼中的 bug。
• 優化效能： 透過 AI 的分析，可以更容易地找到網頁的效能瓶頸，提升使用者體驗。
• 擁抱 AI 時代： 熟悉 chrome-devtools-mcp 可以讓你更好地利用 AI 工具，站在技術的最前沿。

開始使用前的準備

在開始之前，你需要準備以下幾樣東西：

1. Node.js： 你需要安裝 Node.js v20.19 或更新的版本。 你可以在 Node.js 官網 https://nodejs.org/ 下載安裝。
2. Chrome 瀏覽器： 請確保你使用的是最新版本的 Chrome 瀏覽器。
3. npm： npm 會隨著 Node.js 一起安裝，不需要額外安裝。
4. 一個 MCP 客户端（例如：Copilot、Gemini Code Assist 等）： 你需要一個可以與 MCP 伺服器溝通的 AI 程式碼助手，這裡我們假設你已經有使用這些 AI 程式碼助手的經驗。

安裝與設定 (以 Copilot 為例)

現在，我們來看看如何在你的 AI 程式碼助手（以 Copilot 為例）中設定 chrome-devtools-mcp：

1. 開啟 Copilot CLI (或你使用的 AI 程式碼助手)： 在你的終端機或命令提示字元中輸入 copilot 並執行。
2. 新增 MCP 伺服器： 在 Copilot CLI 中，輸入 /mcp add 來開啟新增 MCP 伺服器的對話框。
3. 設定 MCP 伺服器資訊： 按照以下步驟填寫：
   • 伺服器名稱 (Server name): chrome-devtools (這個可以自訂，但建議使用這個名稱)
   • 伺服器類型 (Server Type): [1] Local (選擇 1，表示在本地端執行)
   • 指令 (Command): npx -y chrome-devtools-mcp@latest (這個指令會下載並執行 chrome-devtools-mcp 的最新版本)
   • 按下 CTRL+S 儲存設定。

   備註： 如果你的 AI 程式碼助手不是 Copilot，請參考其官方文件，了解如何在你的工具中設定 MCP 伺服器。 在參考資料中，提供了其他 AI 程式碼助手（例如：Gemini、Cursor 等）的設定方法。

4. 測試設定： 設定完成後，可以嘗試在你的 AI 程式碼助手輸入指令，例如：
   檢查 https://developers.chrome.com 的效能
   如果一切順利，你的 AI 程式碼助手應該會開啟 Chrome 瀏覽器，並對 developers.chrome.com 網站進行效能分析。

初學者常用的工具與功能

chrome-devtools-mcp 提供了許多功能，以下列出幾個初學者可以快速上手、常用的工具：

• click（點擊）： 讓 AI 幫你點擊網頁上的元素，例如按鈕、連結等。
• fill（填寫）： 讓 AI 幫你填寫表單欄位，例如輸入帳號密碼。
• navigate_page（導航頁面）： 讓 AI 幫你前往指定的網頁。
• take_screenshot（截圖）： 讓 AI 幫你截取網頁的畫面。
• performance_analyze_insight（效能分析）： 讓 AI 分析網頁的效能，並提供優化建議。
• get_console_message（獲取控制台訊息）： 讓 AI 幫你查看網頁的 JavaScript 錯誤訊息，方便除錯。

這些工具讓你能夠快速開始自動化瀏覽器操作，並進行基本的網頁分析和除錯。

實際操作範例：截取網頁畫面

讓我們來實際操作一下，讓 AI 幫你截取 Google 首頁的畫面：

1. 在你的 AI 程式碼助手裡輸入指令：
   截取 google.com 的畫面
   你的 AI 程式碼助手會使用 take_screenshot 工具。
2. 等待 AI 完成操作： AI 會開啟 Chrome 瀏覽器，前往 google.com，然後截取畫面。
3. 查看截圖： AI 會將截圖的結果顯示給你，你就可以看到 Google 首頁的畫面了！

這個例子非常簡單，但它展示了 chrome-devtools-mcp 的基本功能：透過指令，AI 就可以自動完成你的任務。

進階應用：效能分析

除了基本的自動化操作，chrome-devtools-mcp 還可以幫助你分析網頁的效能。 讓我們來看看如何使用 performance_analyze_insight 工具：

1. 在你的 AI 程式碼助手裡輸入指令：
   分析 https://developers.chrome.com 的效能
   你的 AI 程式碼助手會使用 performance_analyze_insight 工具。
2. 等待 AI 完成分析： AI 會開啟 Chrome 瀏覽器，收集效能數據，並分析網頁的載入速度、資源使用情況等。
3. 查看分析結果： AI 會提供一份效能分析報告，給你網頁優化的建議。 這些建議可能包括：
   • 圖片優化
   • 程式碼壓縮
   • 減少 HTTP 請求
   • 等等。

透過 AI 的協助，你可以更容易地找到網頁的效能瓶頸，提升使用者體驗。

錯誤排除與注意事項

在使用 chrome-devtools-mcp 的過程中，可能會遇到一些問題。 以下是一些常見問題和解決方法：

• 無法連接到 Chrome：
  • 檢查 Chrome 是否正在運行： 確保你的 Chrome 瀏覽器已經啟動。
  • 檢查 --browser-url 設定： 如果你使用 --browser-url 連接，請確認 URL 是否正確 (預設為 `http://127.0.0.1:9222`)。
  • 檢查遠端偵錯是否啟用： 如果你使用自動連接（--autoConnect），請確認 Chrome 的遠端偵錯功能已啟用（chrome://inspect/#remote-debugging）。
  • 檢查防火牆設定： 確認你的防火牆沒有阻止 chrome-devtools-mcp 連接 Chrome。
• AI 無法找到網頁元素：
  • 檢查網頁元素選擇器： AI 可能無法正確找到網頁元素，需要使用正確的選擇器（例如 CSS 選擇器、XPath）。 有些 AI 程式碼助手允許你指定選擇器，或是在互動中調整選擇器。
  • 等待網頁載入： 確保網頁已經完全載入後，再執行操作。 你可以使用 wait_for 工具來等待網頁元素出現或載入完成。
• Chrome 啟動失敗：
  • 檢查 Chrome 路徑： 如果你使用 --executablePath 指定 Chrome 的路徑，請確認路徑是否正確。
  • 檢查 Chrome 版本： chrome-devtools-mcp 需要最新版本的 Chrome 才能正常運作。
• 隱私問題： chrome-devtools-mcp 可以存取 Chrome 瀏覽器的內容。 請注意，不要在包含敏感資訊的網頁上使用它。 避免與 MCP 客户端分享你不想分享的敏感或個人資訊。

• 效能問題： 某些性能分析工具可能會將追蹤 URL 發送到 Google CrUX API，以便獲取真實使用者的體驗數據。 透過 --no-performance-crux 旗標來停用此功能。

個人實作心得

我在使用 chrome-devtools-mcp 的過程中，學到了一些技巧和訣竅：

• 逐步測試： 一次只執行一個操作，確認它能正常運作，再進行下一步，這樣更容易找到問題。
• 仔細檢查 AI 的回應： AI 會告訴你它做了什麼，以及是否有錯誤。 仔細閱讀這些訊息，可以幫助你理解問題所在。
• 善用不同的工具： chrome-devtools-mcp 提供了許多工具，嘗試不同的工具組合，可以達到更強大的效果。
• 持續學習： chrome-devtools-mcp 仍在不斷發展， 學習如何使用最新的功能可以讓你在這個領域保持領先。

結論

chrome-devtools-mcp 是一個非常強大的工具，它可以讓你利用 AI 程式碼助手來控制 Chrome 瀏覽器。 即使你是初學者，也可以透過本文的介紹，快速上手，開始體驗 AI 帶來的便利。 只要掌握了基本的操作，你就可以利用它來提升工作效率、優化網頁效能，甚至探索更多可能性！ 趕快開始試試吧！

參考閱讀

https://github.com/ChromeDevTools/chrome-devtools-mcp