skills.rest
krzemienski
krzemienskiCOMMUNITY
Explore all skills by this author →
Website𝕏@nkrzemienskiGitHub

chrome-devtools

Diagnose performance, network, and DOM issues using Chrome DevTools MCP.

2|Updated Apr 8, 2026
Search Tags:#performance#debugging#mcp#devtools#playwright#chrome#network
One-click install
npx skills add https://github.com/krzemienski/validationforge --skill chrome-devtools-krzemienski
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/krzemienski/validationforge/tree/main/skill-audit-workspace/chrome-devtools/skill-snapshot
Command: npx skills add https://github.com/krzemienski/validationforge --skill chrome-devtools-krzemienski

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Deep browser inspection and debugging often require low-level access to performance traces, network data, and DOM state. Chrome DevTools MCP provides a centralized, scriptable interface to collect rich debugging signals, complementing Playwright MCP.

Core Features & Use Cases

  • Performance profiling with Core Web Vitals traces and Lighthouse audits
  • Detailed network inspection including headers, timing, and payloads
  • DOM element inspection, computed styles, and memory snapshots
  • Console monitoring and runtime diagnostics for complex issues

Quick Start

Start a DevTools MCP session against a running page to collect a performance trace and network data for debugging.

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema
How do I diagnose performance and network issues in a web application using Chrome DevTools?▼

You can diagnose performance and network issues by starting a Chrome DevTools MCP session against a running page to collect Core Web Vitals traces, Lighthouse audits, network payloads, and console diagnostics.

Can I capture Lighthouse audits and memory snapshots with Playwright?▼

Yes, Chrome DevTools MCP works alongside Playwright MCP integration to capture Lighthouse audits and memory snapshots by requiring a local DevTools MCP server and access to a running browser page.

Do I need a running browser page to inspect DOM elements and collect network data?▼

Yes, you need a running browser page to collect network data and inspect DOM elements, because the DevTools MCP server requires active browser access to gather traces and screenshots.

What's the best way to profile Core Web Vitals and inspect network payloads programmatically?▼

The best way to profile Core Web Vitals and inspect network payloads is using a centralized, scriptable Chrome DevTools MCP interface, which complements Playwright MCP for deep browser debugging.

Does Chrome DevTools MCP support runtime diagnostics and console monitoring for modern web apps?▼

Yes, Chrome DevTools MCP supports runtime diagnostics and console monitoring across modern web apps, providing low-level access to performance traces, network timing, and DOM state.

Why use Chrome DevTools MCP instead of standard browser inspection for performance profiling?▼

Chrome DevTools MCP offers a scriptable interface for performance profiling that standard manual inspection lacks, allowing you to programmatically collect rich debugging signals like traces and memory snapshots.

Related Skills

Explore More Software Engineering Skills→
sluongngsluongng
6

chrome-devtools

Attach to a live Chrome session via the Chrome DevTools MCP server.

Community
Intermediate
FilenCloudDiensteFilenCloudDienste
34

argent-native-profiler

Profile CPU hotspots, UI hangs, and memory leaks from Xcode xctrace data.

Official
Intermediate
CygnusfearCygnusfear
5

chrome-devtools

Control Chrome DevTools Protocol to automate browser interactions and capture console, network, and screenshots.

Community
Advanced
DonZzzillaDonZzzilla

node-inspect-debugger

Debug Node.js applications via Chrome DevTools Protocol with breakpoints and call stack inspection.

Community
Advanced