Can I use this for debugging authenticated pages?

Yes, by using the --profile flag with the browser start script, you can preserve logins and session data within the Chrome instance.

How does this differ from standard MCP browser tools?

This skill uses lightweight CLI scripts designed to minimize token usage (approx. 300 tokens) compared to the 13k-18k typical of full MCP servers, making it faster and cheaper.

Does it support browsers other than Chrome?

Yes, it supports Chrome as the primary engine and provides WebKit/Safari support via Playwright for cross-browser layout verification.

How does it help with responsive design?

It includes built-in commands to instantly resize the viewport to common mobile, tablet, and desktop dimensions for rapid visual inspection.

Website Debugger

Name: Website Debugger
Author: AnthemFlynn

byAnthemFlynn

•

Browser Automation

Debugs frontend issues, inspects DOM structures, and performs visual verification using a lightweight browser automation toolkit.

The Website Debugger skill provides a token-efficient environment for Claude to interact directly with web browsers to diagnose and fix frontend issues. By utilizing the Chrome DevTools Protocol and Playwright fallbacks, it allows for real-time DOM inspection, console error logging, and visual screenshot verification without the heavy context overhead of traditional MCP servers. It is specifically designed for agentic workflows, enabling Claude to perform 'fix-and-verify' loops to ensure CSS, HTML, and JavaScript changes work as intended across different browser engines and responsive breakpoints.

Key Features

01Lightweight browser control using Chrome DevTools Protocol and WebKit fallbacks.

02Automated responsive testing across mobile, tablet, and desktop breakpoints.

03Interactive element selection and computed style inspection for CSS debugging.

04Integrated screenshot capture for immediate visual regression testing.

053 GitHub stars

06Real-time console and network activity monitoring for rapid error detection.

Use Cases

01Debugging complex CSS layout shifts and JavaScript runtime errors in real-time.

02Inspecting DOM structures to extract accurate selectors for automation and scraping.

03Verifying frontend code changes through automated visual comparisons and screenshots.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anthemflynn/dwc website-debug

For use in Claude.ai and ChatGPT

Download Skill