chrome-debug

Debug browser UI issues with Chrome DevTools MCP in headless mode.

4|Updated Nov 16, 2025

Search Tags:#automation #debugging #screenshots #visual regression #Chrome DevTools MCP #UI verification #headless Chrome

Ready to run

npx skills add https://github.com/akornmeier/claude-config --skill chrome-debug-akornmeier

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: chrome-debug
Source: https://github.com/akornmeier/claude-config/tree/main/skills/chrome-debug
Command: npx skills add https://github.com/akornmeier/claude-config --skill chrome-debug-akornmeier

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about chrome-debug

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

FAQPage Schema

How do I capture screenshots for visual regression testing in headless Chrome?▼

This Skill enables visual regression testing in headless Chrome by issuing Chrome DevTools MCP commands to navigate pages and capture screenshots, diagnosing rendering issues without manual inspection.

Can I inspect DOM and network conditions using Chrome DevTools MCP?▼

Yes, you can inspect DOM and network conditions using Chrome DevTools MCP. This Skill provides commands for precise UI troubleshooting and page inspection in headless or containerized browser environments.

Do I need to launch Chrome in headless mode with remote debugging enabled to use MCP commands?▼

Yes, you must launch Chrome in headless mode with remote debugging enabled to use MCP commands. Run a launch command like npm run chrome & wait a few seconds before issuing navigation and snapshot commands.

What is the best way to debug browser UI issues in containerized environments?▼

Using Chrome DevTools MCP to inspect pages and capture visual snapshots is the best way to debug browser UI issues in containerized environments. This Skill streamlines troubleshooting across different platforms without manual tool switching.

How do I verify UI changes without manual tool switching?▼

You can verify UI changes without manual tool switching by leveraging Chrome DevTools MCP to take visual snapshots and capture screenshots. This Skill automates page inspection to validate UI behavior efficiently in headless environments.