chrome-devtools

Installation
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

  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.
Installs
4.3K
GitHub Stars
43.7K
First Seen
Jan 27, 2026
chrome-devtools — chromedevtools/chrome-devtools-mcp