chrome-devtools-mcp

Name: chrome-devtools-mcp
Availability: InStock
Author: loagma

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

Ready to run

npx skills add https://github.com/loagma/LoagmaPMS --skill chrome-devtools-mcp-loagma

💬 Prompt for ChatGPT / Claude Chat▼

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.