Agent skill · software engineering · chromedevtools
chrome-devtools
Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation. Use when debugging web pages, automating browser interactions, analyzing performance, or inspecting network requests. This skill does not apply to `--slim` mode (MCP configuration).
Why this skill is useful
Adds specific commands and workflows for automating browser interactions and debugging that the AI wouldn't reliably generate on its own.
What it needs
Requires chrome-devtools-mcp installed locally. About 2k tokens when loaded. Last updated 2026-08-06. 48,655 stars on the source repository.
What this skill does
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 targeting: Page-scoped tools require a pageId parameter to target a specific page. Use listpages to see available pages and their IDs (e.g. pageId: 1), or use the ID returned when creating a page with newpage. Note: For evaluatescript, pageId is required when targeting pages. However, when --categoryExtensions is enabled, pageId is optional so you can pass serviceWorkerId instead to evaluate inside an extension background service worker. Element interaction: Use takesnapshot 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: navigatepage or newpage 2. Wait: waitfor to ensure content is loaded if you know what you look for. 3. Snapshot: takesnapshot with pageId to understand page structure 4. Interact: Use element uids from snapshot for click, fill, etc., passing the corresponding pageId. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills chromedevtools/chrome-devtools