Frontend website debugging toolkit using Chrome DevTools Protocol with Playwright/WebKit fallbacks. Use this skill when: (1) Debugging CSS, HTML, or JavaScript issues on a webpage, (2) Taking screenshots to verify visual changes, (3) Inspecting DOM structure or console errors, (4) Testing responsive layouts, (5) Extracting selectors for automation, (6) Self-debugging frontend work Claude has created, (7) User says "debug this page", "check my site", "why doesn't this look right", or "fix the frontend". Supports Chrome (primary) and Safari/WebKit (via Playwright). Designed for agent-driven debugging loops.
View on GitHubFebruary 1, 2026
Select agents to install to:
npx add-skill https://github.com/AnthemFlynn/ccmp/blob/main/plugins/website-debug/skills/website-debug/SKILL.md -a claude-code --skill website-debugInstallation paths:
.claude/skills/website-debug/# Website Debugging Skill Lightweight, token-efficient browser debugging toolkit for frontend development. Uses CLI scripts instead of MCP servers to minimize context usage (~300 tokens vs 13k-18k). ## Quick Start Use the slash commands for easiest access: - `/debug-page <url>` - Start debugging session - `/screenshot` - Take screenshot - `/pick-element` - Interactive element selection - `/test-responsive` - Test at all breakpoints - `/verify-changes` - Verify after making changes ### Or use scripts directly: ```bash # Start browser node scripts/browser-start.js node scripts/browser-start.js --profile # Preserve logins node scripts/browser-start.js --webkit # Safari/WebKit # Navigate node scripts/browser-nav.js https://localhost:3000 # Debug node scripts/browser-screenshot.js node scripts/browser-eval.js 'document.title' node scripts/browser-pick.js "Select element" node scripts/browser-console.js --errors node scripts/browser-network.js --failures ``` ## Core Tools Reference | Script | Purpose | Output | |--------|---------|--------| | `browser-start.js` | Launch Chrome/WebKit with debug port | Status message | | `browser-nav.js <url>` | Navigate to URL | Confirmation | | `browser-screenshot.js` | Capture viewport | File path (PNG) | | `browser-eval.js '<js>'` | Run JS in page | Result or error | | `browser-pick.js "<msg>"` | Interactive selector | CSS selectors | | `browser-console.js` | Get console output | Logs/errors | | `browser-network.js` | Network activity | Request/response data | | `browser-dom.js "<sel>"` | Get DOM snapshot | HTML fragment | | `browser-close.js` | Close browser | Confirmation | ## Self-Debugging Workflow When debugging frontend code Claude has written or modified: ### 1. Visual Verification Loop ```bash # After making CSS/HTML changes, verify visually node scripts/browser-screenshot.js # Claude reads the screenshot, identifies issues, iterates ``` ### 2. Console Error Detection ```bash # Check for JavaScript errors after