chromedevtools/chrome-devtools-mcp
6 skills8.6k installs259k starsGitHub
Install
npx skills add https://github.com/chromedevtools/chrome-devtools-mcpSkills in this repo
1Chrome Devtoolschrome-devtools is an agent skill that wires your coding assistant to real Chrome through the chrome-devtools-mcp server, so solo builders can debug pages, reproduce user flows, and read performance or network evidence without context-switching out of the agent. It assumes MCP is configured (and explicitly does not apply to --slim mode). The mental model is straightforward: pick a page, stabilize loading with wait_for, snapshot structure for stable element uids, then act. When elements go stale, the skill tells you to re-snapshot rather than retry blindly—a pattern that prevents flaky automation during ship-week fixes. Extension and memory categories are opt-in via server flags, which matters for Electron-like apps or leak hunts. For Prism’s audience, this skill shines on marketing sites, dashboards, and extension popups where visual bugs and slow LCP are blockers. It complements unit tests by giving the agent eyes on the rendered tree and DevTools-grade timelines, which is especially valuable when you are one person owning frontend and ops.3.8kinstalls2Chrome Devtools CliChrome-devtools-cli teaches your agent to use the chrome-devtools-mcp command-line interface so you can script browser automation from the terminal instead of only through chat turns. Solo builders install the package once globally, confirm status, then run DevTools-oriented commands that start the backing MCP server on demand—useful when you are stitching together local QA, scraping flows, or agent demos that need real Chrome targets. The skill separates one-time setup troubleshooting (PATH, EACCES, stale installs) from the repeat loop of executing list_pages-style tools during development. It pairs naturally with Chrome DevTools MCP in Build for agent-tooling and spills into Ship testing when you want repeatable shell-driven checks. It is an integration skill for CLI control, not a replacement for full end-to-end test frameworks unless you compose it into those flows.1.3kinstalls3Debug Optimize Lcpdebug-optimize-lcp is an agent skill that teaches how Largest Contentful Paint is measured and which elements qualify, so you can stop guessing why Lighthouse or field data flag a slow hero. Solo and indie builders shipping SaaS landings, stores, or content sites use it when paint timing is dominated by an image, video poster, background, or large text block. The skill walks through element eligibility, browser exclusion heuristics, and size calculation rules—the same concepts Chrome DevTools MCP debugging builds on. It does not replace running traces or network waterfalls; it gives procedural knowledge to interpret what DevTools reports and prioritize fixes (defer non-critical assets, right-size heroes, avoid invisible full-screen layers). Use in the Ship phase when perf is on your checklist, especially before distribution or SEO pushes where Core Web Vitals affect rankings and conversion.958installs4A11y Debugginga11y-debugging packages browser-side accessibility probes for solo builders who ship fast but still need WCAG-minded checks without a full QA team. Each snippet runs through evaluate_script: surface unlabeled inputs, measure hit target dimensions from a snapshot uid, and estimate color contrast with documented AA thresholds. The skill is honest that contrast math is simplified—gradients, transparency, and background images may need axe-core injection for production sign-off. Use it in ship review before launch, during build when polishing forms and mobile layouts, and in grow when iterating onboarding flows. It complements automated CI a11y linters by validating what users actually see in a live DOM snapshot.947installs5TroubleshootingTroubleshooting is a structured wizard skill for Chrome DevTools MCP that your agent runs when browser tooling breaks—failed page listing, navigation, new tabs, or server startup. It prioritizes reading real MCP configuration from common editor and agent paths, interpreting flags and environment variables, and matching error text to known connection patterns such as DevToolsActivePort issues tied to autoConnect. Solo builders benefit because MCP wiring spans multiple JSON locations and one wrong argument silently blocks every downstream browser command. The skill is invoked on failure rather than during happy-path coding, which places it on the Operate errors shelf while still supporting Build-time agent-tooling setup. It complements chrome-devtools-cli by fixing the server and config layer instead of teaching routine command execution. Expect stepwise diagnostics and configuration corrections, not automatic patching of proprietary Chrome installs.877installs6Memory Leak Debuggingmemory-leak-debugging is a Chrome DevTools MCP companion skill for solo builders shipping web UIs that stay open for hours. When memlab or similar tooling surfaces a retainer trace, this skill gives a structured checklist: event listeners that never detach, DOM nodes removed from the tree but still referenced, globals that never die, and closures holding oversized captures. It explicitly warns that detached nodes can be intentional caches, so the agent should confirm with you before nulling references or rewriting navigation code. Use it during ship perf hardening, during operate when users report tab slowdowns, and during build when reviewing SPA lifecycle code. It does not replace full heap profiling setup; it accelerates turning trace shapes into likely code smells and fixes.664installs