chrome-devtools

SKILL.md

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

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 uids from snapshot for click, fill, etc.