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. Addional tooling can be enabled by providing the following flags:

• For extension tooling, use the --categoryExtensions flag.
• For memory tooling, use the --memoryDebugging flag.

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.

Testing an extension

Before proceeding: Extension tools (install_extension, list_extensions, etc.) are only available when the MCP server is started with the --categoryExtensions flag. If these tools are not in your tool list, stop and ask the user to update their MCP server configuration:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--categoryExtensions"]
    }
  }
}

After updating, the user must restart the MCP server (or their AI client) for the change to take effect.