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 uid s. 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
-
Navigate: navigate_page or new_page
-
Wait: wait_for to ensure content is loaded if you know what you look for.
-
Snapshot: take_snapshot to understand page structure
-
Interact: Use element uid s 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: