Chrome Devtools

Core Concepts

Browser lifecycle: Browser starts automatically on first tool call using a persistent Chrome profile. Configure via CLI args in the MCP server configuration: npx chrome-devtools-mcp@latest --help.

Page selection: Tools operate on the currently selected page. Use list_pages to see available pages, then select_page to switch context.

Element interaction: Use take_snapshot to get page structure with element uids. Each element has a unique uid for interaction. If an element isn't found, take a fresh snapshot - the element may have been removed or the page changed.

Workflow Patterns

Before interacting with a page

1. Navigate: navigate_page or new_page 2. Wait: wait_for to ensure content is loaded if you know what you look for. 3. Snapshot: take_snapshot to understand page structure 4. Interact: Use element uids from snapshot for click, fill, etc.

Efficient data retrieval

• Use filePath parameter for large outputs (screenshots, snapshots, traces)
• Use pagination (pageIdx, pageSize) and filtering (types) to minimize data
• Set includeSnapshot: false on input actions unless you need updated page state

Tool selection

• Automation/interaction: take_snapshot (text-based, faster, better for automation)
• Visual inspection: take_screenshot (when user needs to see visual state)
• Additional details: evaluate_script for data not in accessibility tree

Parallel execution

You can send multiple tool calls in parallel, but maintain correct order: navigate → wait → snapshot → interact.

Troubleshooting

If chrome-devtools-mcp is insufficient, guide users to use Chrome DevTools UI:

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

If there are errors launching chrome-devtools-mcp or Chrome, refer to https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md.

Chrome DevTools MCP（本庫技能）

本目錄提供 Chrome DevTools MCP 相關的 Agent 技能定義：透過 MCP 使用 Chrome DevTools 除錯、自動化瀏覽、分析效能與檢視網路請求。

本目錄檔案

安裝與上游專案

• 官方倉庫與說明：ChromeDevTools/chrome-devtools-mcp
• CLI 參考：於 MCP 設定中可搭配 npx chrome-devtools-mcp@latest --help 調整啟動參數（例如瀏覽器 profile）。

補充資源

• Chrome DevTools 文件：developer.chrome.com/docs/devtools
• DevTools AI 輔助：AI assistance
• 啟動或連線錯誤：上游疑難排解

注意

使用 `--slim` 模式的 MCP 設定時，不適用本技能（見 SKILL.md 開頭說明）。