Requires the chrome-devtools-mcp server to be running. Navigate to the target page, take a snapshot to get element UIDs, then interact using those UIDs. Use take_snapshot for automation (faster) and take_screenshot for visual inspection.

Chrome DevTools

Uses Chrome DevTools via MCP for efficient debugging, troubleshooting, and browser automation.

Core Concepts

Browser lifecycle: Browser starts automatically on first tool call using a persistent Chrome profile.

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.

Workflow Patterns

Before interacting with a page

1. Navigate: navigate_page or new_page
2. Wait: wait_for to ensure content is loaded.
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 minimise 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

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