chrome-debug
CommunityVisual UI debugging with Chrome DevTools MCP.
Software Engineering#automation#debugging#screenshots#visual regression#Chrome DevTools MCP#UI verification#headless Chrome
Authorakornmeier
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill streamlines browser debugging by leveraging Chrome DevTools MCP to inspect pages, capture screenshots, and verify visual changes without manual tool switching.
Core Features & Use Cases
- Inspect DOM and network conditions using MCP for precise UI troubleshooting.
- Capture screenshots and visual snapshots to diagnose rendering issues and regressions.
- Validate UI behavior in headless or containerized environments across different platforms.
Quick Start
Launch Chrome in headless mode with remote debugging enabled using npm run chrome & wait a few seconds, then issue MCP commands to navigate pages, take snapshots, and capture screenshots.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: chrome-debug Download link: https://github.com/akornmeier/claude-config/archive/main.zip#chrome-debug Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.