website-debug

Close the browser session gracefully. Use --force to kill all Chrome processes.

Execute JavaScript in the browser's page context. Great for inspecting DOM, computed styles, or testing fixes.

Start Chrome or WebKit browser with debugging enabled. Use --profile to preserve logins, --webkit for Safari testing.

Start a debugging session for a webpage. Launches browser, takes screenshot, and checks for errors.

Run comprehensive diagnostics on an element or the entire page. Checks CSS, JS errors, accessibility, and more.

Inspect DOM structure. Get page summary, element HTML, or tree visualization.

Diagnose and fix CSS issues for a specific element. Uses the css-debugger agent for expert analysis.

Navigate the browser to a URL. Use --new to open in new tab.

Analyze page performance - load times, DOM size, memory, and large resources.

Launch interactive element picker for user to select DOM elements. Returns selectors and computed styles.

Resize browser viewport. Use presets like --mobile or custom dimensions.

Take a screenshot of the current browser viewport. Use --full for full page, --selector for specific element.

Test responsive design across mobile, tablet, and desktop viewports. Takes screenshots at each breakpoint.

Verify frontend changes after editing code. Takes screenshot, checks for errors, and reports results.

Watch browser console in real-time. Shows errors, warnings, and logs as they happen.

Watch network requests in real-time. Great for debugging API calls.

Specialized CSS debugging expert. Use when diagnosing layout issues, styling problems, flexbox/grid bugs, visibility issues, z-index stacking, or responsive design problems. Invoked automatically when user mentions CSS, styling, layout, or visual issues.

JavaScript debugging expert. Use when diagnosing JavaScript errors, event handling issues, async problems, state management bugs, or console errors. Invoked when user mentions JS errors, events not firing, functionality not working.

Network request debugging specialist. Use when diagnosing API failures, CORS issues, 404/500 errors, slow requests, or authentication problems. Invoked when user mentions network, API, fetch, request, or loading issues.

Performance analysis specialist. Use when diagnosing slow page loads, large DOM, memory issues, or render performance. Invoked when user mentions slow, performance, lag, or loading time.

Responsive design testing specialist. Use when testing mobile/tablet/desktop layouts, checking breakpoints, or verifying cross-device compatibility. Invoked when user mentions responsive, mobile, tablet, breakpoints, or viewport.

Self-debugging specialist that verifies frontend changes work correctly. Use PROACTIVELY after making any CSS, HTML, or JavaScript changes to verify they applied correctly. Essential for the edit-verify-iterate loop.

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.