skills.rest
loagma
loagmaCOMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools-mcp

Measure web performance metrics and validate fixes using Chrome DevTools MCP automation.

Updated Feb 7, 2026
Search Tags:#automation#testing#tdd#performance#debugging#devtools#web
One-click install
npx skills add https://github.com/loagma/LoagmaPMS --skill chrome-devtools-mcp-loagma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools-mcp
Source: https://github.com/loagma/LoagmaPMS/tree/main/.claude/skills/chrome-devtools-mcp
Command: npx skills add https://github.com/loagma/LoagmaPMS --skill chrome-devtools-mcp-loagma

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use Chrome DevTools MCP for performance measurement, debugging, and TDD workflows. Measure performance issues, identify bottlenecks, fix problems, and validate improvements using Chrome DevTools automation. Use when working on performance issues, debugging browser behavior, measuring page load times, analyzing network requests, validating performance fixes, or debugging UI issues.

Core Features & Use Cases

  • Performance measurement automation to baseline and compare changes.
  • UI/UX and network debugging with reproducible workflows.
  • TDD-style validation of fixes with repeatable checks across pages.

Quick Start

Open the target page, start MCP automation, and run a baseline performance test to compare against a subsequent improvement.

Frequently Asked Questions about chrome-devtools-mcp

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

FAQPage Schema
How do I automate web performance measurement using Chrome DevTools?▼

Automate web performance measurement by running Chrome DevTools MCP tasks to collect core web vitals like FCP, LCP, TTI, and CLS, establishing a baseline to compare against subsequent code improvements.

Can I validate performance fixes within a TDD workflow?▼

Yes, you can validate performance fixes within TDD-like workflows by running repeatable DevTools MCP checks across pages to ensure code changes produce measurable improvements over your baseline metrics.

What's the best way to debug network requests and page load times automatically?▼

Debug network requests and page load times automatically by scripting DevTools MCP workflows, which collect network timings and browser behavior data to identify bottlenecks through reproducible testing.

Does Chrome DevTools MCP automation require manual browser inspection to identify bottlenecks?▼

No, Chrome DevTools MCP automation eliminates manual inspection by scripting tasks that measure performance metrics, analyze network requests, and identify bottlenecks in web applications through automated, repeatable workflows.

How do I start debugging UI issues with DevTools MCP automation?▼

Start debugging UI issues by opening the target page, starting MCP automation, and running a baseline performance test to collect metrics that reveal rendering or network anomalies for comparison.

When should I not use DevTools MCP automation for performance debugging?▼

Avoid DevTools MCP automation for one-off, exploratory performance checks where setting up scripted workflows outweighs the benefit of repeatable, TDD-style validation across multiple test runs.

Related Skills

Explore More Software Engineering Skills→
STier-AiSTier-Ai
5

web-perf

Measure web page performance metrics using Chrome DevTools MCP.

Official
Advanced
Exia-thdExia-thd

performance-engineer

Profile web applications and generate k6/Artillery load testing scripts.

Community
Advanced
KozmosaKozmosa

web-perf

Analyze web performance metrics and identify optimization opportunities for page load speed.

Community
Advanced
chlmmchlmm

chrome-devtools-mcp

Debug Chrome browsers and inspect DOM via DevTools Protocol.

Community
Intermediate