skills.rest
AnthemFlynn
AnthemFlynnCOMMUNITY
Explore all skills by this author →
GitHub

website-debug

Debug frontend issues via Chrome DevTools Protocol with Playwright fallback.

Updated Aug 23, 2026
Search Tags:#automation#debugging#frontend#playwright#puppeteer#selenium
One-click install
npx skills add https://github.com/AnthemFlynn/ccmp --skill website-debug
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-debug
Source: https://github.com/AnthemFlynn/ccmp/tree/main/plugins/website-debug/skills/website-debug
Command: npx skills add https://github.com/AnthemFlynn/ccmp --skill website-debug

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer-core, playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This lightweight, token-efficient browser debugging toolkit helps frontend developers diagnose CSS/HTML/JS issues quickly without heavy context switching. It leverages Chrome DevTools Protocol via Puppeteer and Playwright fallbacks to inspect DOM, take screenshots, test responsiveness, and extract selectors.

Core Features & Use Cases

  • Debug sessions: Start a debugging session for a page, then iterate on fixes with guided commands.
  • Screenshots and DOM inspection: Capture visuals and DOM structure to verify changes.
  • Responsive testing and automation: Validate layouts across breakpoints and extract reliable selectors.

Quick Start

Start a debugging session with /debug-page <url>, then use scripts like browser-screenshot.js, browser-pick.js, or browser-dom.js to diagnose and fix frontend issues.

Frequently Asked Questions about website-debug

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

FAQPage Schema
How do I debug frontend CSS and JavaScript issues on a live webpage?▼

Frontend debugging inspects and fixes CSS, HTML, and JavaScript problems by connecting to Chrome DevTools Protocol via Puppeteer or Playwright. Start a debug session with /debug-page <url>, then use browser-screenshot.js and browser-dom.js to capture visuals, inspect DOM structure, and verify fixes without leaving your CLI.

Can I use Puppeteer and Playwright together for browser automation?▼

Yes. This Skill uses Puppeteer as the primary engine for Chrome DevTools Protocol control and Playwright as a WebKit fallback. Both dependencies work in tandem to maximize engine coverage and provide token-efficient debugging loops across Chrome and WebKit environments.

How do I extract CSS selectors reliably during frontend testing?▼

Selector extraction isolates stable DOM paths for automation and testing. Use browser-pick.js to identify and extract reliable selectors from page elements, enabling accurate element targeting for responsive testing and functional validation across layout breakpoints.

What's the best way to test responsive design across different screen sizes?▼

Responsive testing validates layouts at multiple breakpoints without manual resizing. Configure viewport dimensions in your debug session, capture screenshots at each breakpoint, and inspect DOM changes to verify CSS media queries and layout stability across devices.

Can I automate screenshot capture and DOM inspection without writing complex code?▼

Yes. Pre-built scripts like browser-screenshot.js and browser-dom.js handle automation through structured agent-driven debugging loops. Each script runs token-efficiently via CLI commands, reducing context overhead while capturing visuals and DOM structure for rapid troubleshooting.

When should I use browser automation tools instead of manual DevTools inspection?▼

Automation suits repeatable debugging workflows, responsive validation across multiple viewports, and selector extraction at scale. Manual DevTools inspection works for one-off issues; automation accelerates diagnosis when you need consistent, scriptable verification across multiple pages or breakpoints.

Related Skills

Explore More Software Engineering Skills→
az9713az9713
2

setup-browser-cookies

Import Chromium browser cookies into a headless CDP session.

Community
Intermediate
atomeamatomeam
2

Browser Visibility & Debug

Capture screenshots, inspect DOM elements, and test selectors in browser automation.

Community
Advanced
mtsatryanmtsatryan
1

e2e-test-specialist

Automate end-to-end testing workflows across browsers, APIs, and mobile platforms.

Community
Advanced
mvellandimvellandi

chrome-devtools

Automate browser debugging and interactions via Chrome DevTools MCP.

Community
Advanced