Verified:GitHub

chrome-devtools

Connect to a running Chrome browser for interactive debugging and inspection.

Updated Aug 27, 2026

Search Tags:#debugging #web-development #chrome-devtools #network-inspection #performance-profiling #interactive-debugging

Ready to run

npx skills add https://github.com/krazyuniks/guitar-tone-shootout-archive --skill chrome-devtools-krazyuniks

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/krazyuniks/guitar-tone-shootout-archive/tree/main/.claude/skills/chrome-devtools
Command: npx skills add https://github.com/krazyuniks/guitar-tone-shootout-archive --skill chrome-devtools-krazyuniks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables developers to connect to a live Chrome session for interactive debugging, CSS inspection, and performance profiling, reducing iteration time and improving UI/UX quality.

Core Features & Use Cases

Live element inspection and computed styles via Chrome DevTools MCP
Real-time network request inspection and timing data
Performance profiling and CPU/memory metrics during development
Complementary workflows with automated testing tools when needed
Use Case: During a UI bug, attach MCP to Chrome, inspect element styles, monitor network, and profile rendering to identify layout thrash.

Quick Start

Attach the MCP to a running Chrome session to begin interactive debugging, CSS inspection, and performance profiling.

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema

How do I inspect live CSS styles on a running Chrome browser?▼

You can inspect live CSS styles by attaching the Chrome DevTools MCP to a running Chrome session, which enables interactive element inspection and computed style monitoring directly within your environment.

Can I monitor network requests and performance metrics during web development?▼

Yes, you can monitor network requests and performance metrics by connecting to a running Chrome session to capture real-time network timing data and analyze CPU/memory metrics during iterative development changes.

What is interactive debugging with Chrome DevTools MCP?▼

Interactive debugging with Chrome DevTools MCP is a process that connects your environment to a live Chrome browser to enable console monitoring, DOM navigation, and performance profiling across iterative UI changes.

Does Chrome DevTools MCP require a specific browser setup?▼

Chrome DevTools MCP requires a running Chrome browser session to attach to, allowing you to begin interactive debugging, network analysis, and CSS inspection without additional component dependencies.

How do I fix layout thrash and UI bugs using performance profiling?▼

To fix layout thrash and UI bugs using performance profiling, attach the Chrome DevTools MCP to your live session to monitor rendering performance, inspect element styles, and identify bottlenecks during iterative changes.