browser-debugger

The Browser Debugger is a professional-grade skill designed for web developers and QA engineers to automate UI verification and debugging workflows. By integrating directly with Chrome DevTools via MCP, it allows agents to inspect the DOM, monitor network traffic, capture console errors, and perform visual analysis on rendered pages. It serves as an essential bridge between code implementation and actual visual output, ensuring that what developers build aligns perfectly with design specifications.

• Performs automated visual regression testing to detect layout shifts, CSS styling inconsistencies, and component misalignment.

• Utilizes advanced vision-language models (such as Qwen, Gemini, or GPT-4o) via Claudish to validate design fidelity against reference images.

• Monitors browser console output for runtime errors, warnings, and performance bottlenecks, providing actionable debugging reports.

• Tracks network requests to verify API interactions, identifying failed requests or payload discrepancies in real-time.

• Facilitates form and interaction testing, enabling agents to simulate user flows and verify expected application state changes.

• This skill is best invoked during post-implementation verification, regression testing cycles, or when troubleshooting specific browser-based bugs reported by users.

• Prerequisites include the installation of the Chrome DevTools MCP server and an optional OpenRouter API key for high-quality visual analysis capabilities.

• To maintain efficiency, the skill includes a multi-tiered model selection guide, allowing users to balance speed, cost, and analytical depth based on the specific requirements of the testing session.

• It supports persistent preference saving for preferred vision models, ensuring consistent behavior across multiple development sessions.

• Users should define their visual model choice through interactive prompts during the initial analysis phase to optimize token usage and accuracy. Always verify the presence of the Chrome DevTools MCP before initiating a test sequence.