skills.rest
Handy369
Handy369COMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools-mcp

Diagnose browser runtime issues with Chrome DevTools MCP reference guidance.

Updated Apr 27, 2026
Search Tags:#accessibility#mcp#chrome devtools#lighthouse#memory leaks#lcp#performance tracing
One-click install
npx skills add https://github.com/Handy369/passto-pi-frame --skill chrome-devtools-mcp-handy369
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools-mcp
Source: https://github.com/Handy369/passto-pi-frame/tree/main/skills/chrome-devtools-mcp
Command: npx skills add https://github.com/Handy369/passto-pi-frame --skill chrome-devtools-mcp-handy369

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides low-level Chrome DevTools MCP reference material so you can reliably inspect and diagnose page issues (performance, accessibility, Lighthouse insights, and memory behavior) when higher-level flows need deeper tool guidance.

Core Features & Use Cases

  • DevTools MCP low-level reference: Pinpoint the exact tools, parameters, and workflow patterns for interacting with live pages via MCP.
  • Performance / Lighthouse guidance: Use Core Web Vitals-oriented trace workflows (e.g., LCP breakdown) and interpret insight outputs for bottleneck isolation.
  • A11y debugging snippets: Apply targeted DOM evaluation snippets for accessibility checks such as missing labels and contrast approximations.
  • Memory leak workflows: Follow safe heap snapshot and memlab-based leak analysis guidance, with a fallback snapshot comparison script.
  • Troubleshooting: Handle common MCP/Chrome issues like remote debugging setup, protocol failures, and platform-specific quirks.

Quick Start

Ask the AI to use the chrome-devtools-mcp reference to guide the next DevTools MCP steps for diagnosing why a page has poor LCP and list the relevant low-level tool calls to run.

Frequently Asked Questions about chrome-devtools-mcp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Chrome DevTools MCP to diagnose poor LCP and performance issues?▼

To diagnose poor LCP with Chrome DevTools MCP, you run Core Web Vitals-oriented trace workflows that capture performance insights and isolate rendering bottlenecks. This Skill provides the low-level tool calls and reference guidance needed to interact with live pages and interpret Lighthouse outputs.

Can I take accessibility snapshots with Chrome DevTools MCP for a11y debugging?▼

Yes, you can take accessibility snapshots with Chrome DevTools MCP by using targeted DOM evaluation snippets. This Skill guides you through selecting pages, capturing a11y snapshots with uids, and validating issues like missing labels and contrast approximations.

What is the best way to analyze memory leaks in a browser runtime using DevTools?▼

The best way to analyze memory leaks is by following safe heap snapshot and memlab-based leak analysis workflows. This Skill provides the reference guidance for safe snapshot handling and includes fallback snapshot comparison scripts to isolate memory retention issues.

Does Chrome DevTools MCP require remote debugging setup for network and console troubleshooting?▼

Chrome DevTools MCP often requires remote debugging setup for network and console troubleshooting. This Skill covers common troubleshooting steps for protocol failures, remote debugging configuration, and platform-specific quirks during live page inspection.

How do I handle common MCP and Chrome protocol failures when inspecting a page?▼

To handle MCP and Chrome protocol failures, you follow specific troubleshooting steps for remote debugging setup and platform-specific quirks. This Skill provides reference guidance to resolve common protocol failures encountered during live browser runtime investigations.

Related Skills

Explore More Data & Analytics Skills→
BorisserzBorisserz
1

browser-testing-with-devtools

Inspect DOM, console, network, and performance data via Chrome DevTools MCP.

Community
Intermediate
chavangorakh1999chavangorakh1999
1

memory-debug

Diagnose memory leaks in Node.js applications by analyzing V8 heap snapshots.

Community
Advanced
yash-gargyash-garg

web-perf

Analyze web performance bottlenecks and identify optimization opportunities using Chrome DevTools.

Community
Advanced
kevindreekevindree

browser-testing-with-devtools

Inspect live DOM, console, network, and accessibility data via Chrome DevTools MCP.

Community
Advanced