skills.rest
akornmeier
akornmeierCOMMUNITY
Explore all skills by this author →
𝕏@akornmeierGitHub

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
One-click install
npx skills add https://github.com/akornmeier/claude-config --skill chrome-debug-akornmeier
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
GraffiohGraffioh

web-browser

Automate Chrome browser interactions via the Chrome DevTools Protocol.

Community
Advanced
viably-labsviably-labs

playwright-screenshot-inspector

Analyze Playwright screenshots to validate UI rendering accuracy semantically.

Official
Advanced
danbridanbri
1

debug-ux-headlessbrowser

Drive headless Chromium via chrome-devtools MCP to verify interactive UX behaviors.

Community
Advanced
liauw-medialiauw-media
3

browser-automation-debugging

Automate Chrome DevTools tasks for debugging and visual regression workflows.

Community
Advanced