back
loading skill details...
Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions,…
Chrome DevTools integration for debugging, performance analysis, and browser automation via MCP. Provides tools for page navigation, element inspection via snapshots, clicking, form filling, screenshot capture, and JavaScript evaluation Operates on a persistent Chrome profile with automatic browser startup; switch between multiple pages using list_pages and select_page Supports efficient workflows: navigate, wait for content, take snapshots to identify elements by uid, then interact with those elements Handles large outputs via file paths and offers pagination/filtering to minimize data transfer; use take_snapshot for automation and take_screenshot for visual inspection 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. To enable extensions, use --categoryExtensions. 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. Efficient data retrieval
don't have the plugin yet? install it then click "run inline in claude" again.