chromedevtools/chrome-devtools-mcp
6 skills13.8k installs286k starsGitHub
Install
npx skills add https://github.com/chromedevtools/chrome-devtools-mcpSkills in this repo
1Chrome DevtoolsThe chrome-devtools skill teaches agents to use Chrome DevTools via MCP for debugging, troubleshooting, and browser automation. The browser starts automatically on the first tool call using a persistent Chrome profile, with extra flags for extension tooling (--categoryExtensions) and memory tooling (--memoryDebugging). Tools operate on the currently selected page: list_pages then select_page to switch context. Before interacting, navigate with navigate_page or new_page, wait_for expected content, take_snapshot to collect element uids, then click, fill, or similar actions. For large outputs use filePath; paginate with pageIdx and pageSize; set includeSnapshot false on input actions unless you need updated page state. Prefer take_snapshot for automation, take_screenshot for visual inspection, and evaluate_script when data is not in the accessibility tree. Parallel calls are allowed but keep navigate, wait, snapshot, interact order. Extension testing requires --categoryExtensions, then install_extension, list_extensions, trigger_extension_action, and evaluate_script with serviceWorkerId. If MCP is insufficient, the skill points to Chrome DevTools UI documentation and the chrome-devto.5.4kinstalls2Chrome Devtools CliThe chrome devtools mcp CLI lets you interact with the browser from your terminal _Note If this is your very first time using the CLI see references installation md references installation md for setup Installation is a one time prerequisite and is not part of the regular AI workflow _ 1 Execute Run tools directly e g chrome devtools list_pages The background server starts implicitly do not run start status stop before each use 2 Inspect Use take_snapshot to get an element uid 3 Act Use click fill etc State persists across commands uid 1_0 RootWebArea Example Domain url https example com uid 1_1 heading Example Domain level 1 sh chrome devtools tool arguments flags The chrome devtools cli agent skill provides documented workflows prerequisites triggers and safety guidance from its SKILL md source Agents load it when user requests match the description and follow step by step instructions without inventing capabilities It integrates with standard agent tooling for the tasks inputs outputs and failure modes described in the repository2.2kinstalls3Debug Optimize Lcpdebug-optimize-lcp is an agent skill from chromedevtools/chrome-devtools-mcp that guides debugging and optimizing largest contentful paint (lcp) using chrome devtools mcp tools. use this skill whenever the user asks about lcp performance, slow page loads, core web vitals optimizati. ## What is LCP and why it matters Largest Contentful Paint (LCP) measures how quickly a page's main content becomes visible. It's the time from navigation start until the largest image or text block renders in the viewport. - **Good**: 2.5 seconds or less - **Needs improvement**: 2.5–4.0 seconds - **Poor**: greater than 4.0 seconds LCP is a Core Developers invoke debug-optimize-lcp during ship/testing work for testing & qa tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md.1.7kinstalls4A11y Debugginga11y-debugging is an agent skill from chromedevtools/chrome-devtools-mcp that uses chrome devtools mcp for accessibility (a11y) debugging and auditing based on web.dev guidelines. use when testing semantic html, aria labels, focus states, keyboard navigation, tap targets, and c. ## Core Concepts **Accessibility Tree vs DOM**: Visually hiding an element (e.g., `CSS opacity: 0`) behaves differently for screen readers than `display: none` or `aria-hidden="true"`. The `take_snapshot` tool returns the accessibility tree of the page, which represents what assistive technologies "see", making it the most reliable source of truth Developers invoke a11y-debugging during ship/testing work for testing & qa tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills.1.7kinstalls5TroubleshootingThe troubleshooting skill acts as a wizard for Chrome DevTools MCP server setup when list_pages, new_page, navigate_page, or server initialization fails. Step one locates MCP config in .mcp.json, gemini-extension.json, .claude/settings.json, .vscode/launch.json, or .gemini/settings.json and checks bad flags, missing env vars, or incompatible --autoConnect usage. It triages Could not find DevToolsActivePort by confirming the correct Chrome version, enabling remote debugging at chrome://inspect/#remote-debugging, then calling list_pages before heavier fixes. Other symptoms cover empty profiles from argument typos and sandbox issues. Documentation references guide advanced browserUrl and connection fixes. Use when Chrome DevTools MCP connections fail during agent browser automation setup.1.6kinstalls6Memory Leak DebuggingThe memory-leak-debugging skill diagnoses and resolves memory leaks in JavaScript/Node.js applications. Use when a user reports high memory usage, OOM errors, or wants to analyze heapsnapshots or run memory leak detection tools like memlab. # Memory Leak Debugging This skill provides expert guidance and workflows for finding, diagnosing, and fixing memory leaks in JavaScript and Node.js applications. ## Core Principles - **Prefer `memlab`:** Do NOT attempt to read raw `.heapsnapshot` files directly, as they are extremely large and will consume too many tokens. Always recommend and use `memlab` to process snapshots and identify leak traces. - **Isolate the Leak:** Determine if the leak is in the browser (client-side) or Node.js (server-side). - **Common Culprits:** Look for detached DOM nodes, unhandled closures, global variables, event listeners not being removed, and caches growing unbounded. _Note: Detached DOM nodes are sometimes intentional caches; always ask the user before nulling them._ ## Workflows ### 1.1.4kinstalls