chrome-devtools

Chrome DevTools Agent

概述

一個專門用來控制與檢查即時 Chrome 瀏覽器的技能。此技能利用 chrome-devtools MCP 伺服器執行各種瀏覽器相關任務，從簡單的導航到複雜的效能剖析。

使用時機

在以下情況使用此技能：

• 瀏覽器自動化：導航頁面、點擊元素、填寫表單及處理對話框。
• 視覺檢查：擷取網頁的螢幕截圖或文字快照。
• 除錯：檢查主控台訊息、在頁面環境中執行 JavaScript，以及分析網路請求。
• 效能分析：記錄並分析效能追蹤，以找出瓶頸與 Core Web Vitals 問題。
• 模擬：調整視窗大小或模擬網路/CPU 條件。

工具分類

1. 導航與頁面管理

• new_page：開啟新分頁/頁面。
• navigate_page：前往特定 URL、重新整理或瀏覽歷史紀錄。
• select_page：切換已開啟頁面的上下文。
• list_pages：查看所有已開啟頁面及其 ID。
• close_page：關閉特定頁面。
• wait_for：等待頁面上出現特定文字。

2. 輸入與互動

• click：點擊元素（使用快照中的 uid）。
• fill / fill_form：在輸入框中輸入文字，或一次填寫多個欄位。
• hover：將滑鼠移到元素上。
• press_key：傳送鍵盤快捷鍵或特殊按鍵（例如 "Enter"、"Control+C"）。
• drag：拖放元素。
• handle_dialog：接受或關閉瀏覽器警示/提示。
• upload_file：透過檔案輸入上傳檔案。

3. 除錯與檢查

• take_snapshot：取得文字形式的無障礙樹（最適合用來識別元素）。
• take_screenshot：擷取頁面或特定元素的視覺表示。
• list_console_messages / get_console_message：檢查頁面的主控台輸出。
• evaluate_script：在頁面環境中執行自訂 JavaScript。
• list_network_requests / get_network_request：分析網路流量與請求細節。

4. 模擬與效能

• resize_page：變更視窗尺寸。
• emulate：限制 CPU/網路或模擬地理位置。
• performance_start_trace：開始記錄效能剖析。
• performance_stop_trace：停止記錄並儲存追蹤。
• performance_analyze_insight：從記錄的效能資料取得詳細分析。

工作流程模式

模式 A：識別元素（先快照）

尋找元素時，一律優先使用 take_snapshot 而非 take_screenshot。快照會提供互動工具所需的 uid 值。

1. 使用 `take_snapshot` 取得目前頁面結構。
2. 找到目標元素的 `uid`。
3. 使用 `click(uid=...)` 或 `fill(uid=..., value=...)`。

模式 B：錯誤排除

當頁面發生錯誤時，同時檢查主控台日誌與網路請求。

1. 使用 `list_console_messages` 檢查 JavaScript 錯誤。
2. 使用 `list_network_requests` 找出失敗的（4xx/5xx）資源。
3. 使用 `evaluate_script` 檢查特定 DOM 元素或全域變數的值。

模式 C：效能剖析

找出頁面變慢的原因。

1. 使用 `performance_start_trace(reload=true, autoStop=true)`
2. 等待頁面載入/追蹤完成。
3. 使用 `performance_analyze_insight` 找出 LCP 問題或版面位移。

最佳實務

• 上下文感知：如果不確定目前哪個分頁處於啟用狀態，請務必執行 list_pages 與 select_page。
• 快照：在重大導航或 DOM 變更後，請重新擷取快照，因為 uid 值可能會改變。
• 逾時：使用合理的逾時設定給 wait_for，避免因載入緩慢的元素而卡住。
• 螢幕截圖：適度使用 take_screenshot 進行視覺驗證，但邏輯判斷應依賴 take_snapshot。