skills.rest
krazyuniks
krazyuniksCOMMUNITY
Explore all skills by this author →
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
One-click install
npx skills add https://github.com/krazyuniks/guitar-tone-shootout-archive --skill chrome-devtools-krazyuniks
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
BorisserzBorisserz
1

browser-testing-with-devtools

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

Community
Intermediate
NSEvteevNSEvteev
31

test-ui

Run Playwright UI smoke tests and output a PASS/FAIL report.

Community
Intermediate
mymx2mymx2
4

browser-testing-with-devtools

Inspect DOM, network traffic, and screenshots via Chrome DevTools MCP.

Community
Advanced
pacphipacphi
14

Chrome DevTools

Debug web pages via Chrome DevTools MCP with performance, network, and DOM inspection.

Community
Advanced