🚨執行Chrome-Devtools MCP套件，需先備妥Google Gemini CLI執行環境 (亦即將AI神器，以命令提示方式，於本地端電腦執行)。
Chrome DevTools Wrapper 操作教學: 此工具能讓AI神器， 直接操作您的本地端⌈Chrome 瀏覽器⌋，執行網頁瀏覽、擷取內容、自動化測試等任務。
一 .AI使用本地端瀏覽器，經由chrome-devtools-mcp 套件 (它屬Google Gemini CLI擴展EXTENSIONS套件)
chrome-devtools-mcp 是一個本地端伺服器。
啟動後，它將成為AI神器(Gemini CLI)和您瀏覽器(Chrome)之間溝通的橋樑。您可以
透過⌈自然語言(母語對話)⌋對AI神器在命令提示列方式下達指令，AI神器依您的指示，自動下達指令轉換成對瀏覽器的具體操作。
二. 如何安裝與啟動
您已經擁有所有必要的檔案，只需按照以下步驟啟動它：
1. 進入專案目錄
AI神器將會執行 cd 命令來進入 chrome-devtools-mcp 資料夾。
2. 安裝依賴套件
接著，AI神器會執行 npm install 來安裝所有必要的 Node.js 模組。這個步驟通常只需要在第一次使用或更新後執行。
三. 啟動伺服器
最後，金會執行 npm start 來啟動伺服器。您會看到終端機顯示伺服器正在運行的訊息，這表示AI神器已經準備好可以控制瀏覽器了。
AI神器將為您執行以上指令： (此動作是以自然語言下達給Gemini CLI，由AI神器自動產生的部署安裝指令）
Shell cd C:\nodejs\chrome-devtools-mcp && npm install && npm start (進入 chrome-devtools-mcp 目錄，安裝依賴套件並啟動伺服器。)
四. 如何使用
現在伺服器正在運行，您可以直接用⌈自然語言⌋對AI神器下達指示，來操作瀏覽器。它能執行的操作定義在 gemini-extension.json 檔案中。
您可以(自然語言)嘗試下達 以下指示：
* "請幫我打開 Google 首頁"
* "請前往 https://www.wikipedia.org/ 並搜尋 '人工智慧'"
* "請幫我截取目前頁面的畫面"
* "請幫我看看頁面上有沒有 'Gemini' 這個詞"
* "列出目前開啟的所有分頁"
總結來說，啟動這個擴充功能後，您就可以透過與AI神器對話，讓它直接操作本地端CHROME瀏覽器，完成更複雜的網頁互動任務。
💜執行過程大致彙整如下: (各動作之指令，皆為AI神器自動下達，即可自動依您指示查找網頁內容)
✦ 好的，我們開始執行第一個指令。
正在為您打開 Google 首頁...
✓ navigate_page (chrome-devtools MCP Server) {"url":"https://www.google.com/"}
✦ 好的，Google 首頁已經打開。
接下來，我(AI神器)將前往維基百科並搜尋「人工智慧」。
✓ navigate_page (chrome-devtools MCP Server) {"url":"https://www.wikipedia.org/"}
✦ 好的，我(AI神器)已經到達維基百科。現在我需要查看頁面元素來找到搜尋框。
✓ take_snapshot (chrome-devtools MCP Server) {} 0
✦ 好的，我(AI神器)已經到達維基百科。現在我需要查看頁面元素來找到搜尋框。
✓ take_snapshot (chrome-devtools MCP Server) {}
✦ 好的，我(AI神器)已經找到搜尋框 (uid=1_43) 和搜尋按鈕 (uid=1_122)。
現在，我(AI神器)將輸入「人工智慧」並執行搜尋。
✓ fill (chrome-devtools MCP Server) {"value":"人工智慧","uid":"1_43"}
✦ 好的，已經成功搜尋「人工智慧」，目前在維基百科的「人工智慧」頁面。
接下來，我(AI神器)將為您截取目前頁面的畫面，並存檔為 wikipedia_ai_screenshot.png。
✓ take_screenshot (chrome-devtools MCP Server) {"filePath":"c:\\nodejs\\wikipedia_ai_screenshot.png"}
現在，我(AI神器)來檢查頁面上是否有 "Gemini" 這個詞。
✓ wait_for (chrome-devtools MCP Server) {"text":"Gemini"}
✦ 頁面上找到了 "Gemini" 這個詞。
最後，為您列出目前所有開啟的分頁。
✓ list_pages (chrome-devtools MCP Server) {}
✦ 好的，目前開啟的分頁只有一個：維基百科的「人工智慧」頁面。
我已經依序執行完您提供的所有指令：
1. 打開 Google 首頁。
2. 前往維基百科並搜尋「人工智慧」。
3. 截取了維基百科頁面的畫面並存檔。
4. 確認了頁面中包含 "Gemini" 這個詞。
5. 列出目前開啟的分頁。
接下來需要我做什麼呢？
💜 Chrome DevTools MCP Server 的其它參考用途
|-- 1. 網頁自動化 (Web Automation)
| |-- 表單填寫 (例如自動輸入帳號密碼登入)
| |-- 按鈕點擊與互動 (例如點擊「下一步」或「同意」)
| |-- 頁面導覽 (在不同頁面間跳轉)
| +-- 檔案上傳 (自動選擇並上傳本地檔案)
|
|-- 2. 資料提取與網路爬蟲 (Data Scraping & Crawling)
| |-- 擷取頁面文字內容 (例如抓取新聞文章、產品資訊)
| |-- 讀取表格或列表資料 (例如抓取股價、天氣預報)
| +-- 分析網路請求 (查看 API 回應，取得背後傳輸的資料)
|
|-- 3. 自動化測試與偵錯 (Automated Testing & Debugging)
| |-- UI/UX 視覺驗證 (透過截圖比對畫面是否符合預期)
| |-- 功能流程測試 (模擬完整的使用者操作流程，如購物、註冊)
| |-- 效能分析 (分析網頁載入速度、Core Web Vitals 等效能指標)
| +-- 檢查控制台訊息 (查看頁面在執行過程中是否出現錯誤訊息)
|
+-- 4. 內容生成與互動 (Content Generation & Interaction)
|-- 頁面截圖 (產生指定元素或整個網頁的圖片)
|-- 執行腳本 (在頁面中執行自訂的 JavaScript 來完成更複雜的互動)
+-- 等待特定元素或文字出現 (用於處理動態載入的頁面)
總之，它(Chrome DevTools MCP)讓開發者或使用者能用自然語言，指揮語言模型(Gemini CLI)去完成需要操作瀏覽器(CHROME)的各種任務，從簡單的網頁瀏覽到複雜的測試與資料抓取都能涵蓋 (您可以用AI神器再去下達PROMPT提示詞 ，請你再提供 執行腳本(如:動態內容的操作與驗證 (Dynamic Content Manipulation & Validation)) 之簡易基本詳細分析範例教學；請以ASCII圖示、階層式,細說本次範例處理流程及主要用意?包含測試結果詳細報告,以掌握CLI 、MCP Server 、本地端等核心關係?)
💜Chrome DevTools (27個工具,於CLI界面上，按下Ctrl+T 熱鍵叫出)│
├─── 📄 頁面管理 (Page Management)│ ├─ list_pages → 列出所有開啟的頁面
│ ├─ new_page → 創建新頁面
│ ├─ select_page → 選擇要操作的頁面
│ ├─ close_page → 關閉指定頁面
│ ├─ navigate_page → 導航到指定URL
│ ├─ navigate_page_history → 前進/後退頁面
│ └─ resize_page → 調整頁面視窗大小
│
├─── 🖱️ 用戶互動 (User Interaction)
│ ├─ click → 點擊元素
│ ├─ fill → 填寫單一表單欄位
│ ├─ fill_form → 批量填寫多個表單
│ ├─ hover → 滑鼠懸停在元素上
│ ├─ drag → 拖曳元素
│ ├─ upload_file → 上傳檔案
│ └─ handle_dialog → 處理彈出對話框
│
├─── 📸 頁面擷取 (Page Capture)
│ ├─ take_screenshot → 截圖(視覺化)
│ ├─ take_snapshot → 文字快照(結構化)
│ └─ wait_for → 等待特定內容出現
│
├─── 🔍 監控與除錯 (Monitoring & Debugging)
│ ├─ list_console_messages → 列出所有控制台訊息
│ ├─ get_console_message → 取得特定控制台訊息
│ ├─ list_network_requests → 列出所有網路請求
│ ├─ get_network_request → 取得特定網路請求
│ └─ evaluate_script → 執行JavaScript程式碼
│
├─── ⚡ 效能分析 (Performance Analysis)
│ ├─ performance_start_trace → 開始效能追蹤
│ ├─ performance_stop_trace → 停止效能追蹤
│ └─ performance_analyze_insight → 分析效能洞察
│
└─── 🔧 環境模擬 (Environment Emulation)
├─ emulate_cpu → 模擬CPU節流
└─ emulate_network → 模擬網路條件
