Does this skill require external API keys?

Basic automation and console monitoring require only the Chrome DevTools MCP. Advanced visual analysis features require an OpenRouter API key to access vision models.

Which vision models work best with this skill?

Qwen VL 32B is recommended for high-precision design fidelity, while Gemini 2.5 Flash offers a great balance of speed and cost for quick smoke tests.

Can I use this for regression testing?

Yes, the skill is designed to capture screenshots and compare them against expected results or designs to identify layout shifts and styling bugs.

What is the Browser Debugger skill for Claude Code?

It is a specialized capability that allows Claude to control a real Chrome browser to test, debug, and validate web applications directly from the terminal.

Browser Debugger & UI Tester

Name: Browser Debugger & UI Tester
Author: involvex

byinvolvex

브라우저 자동화

Validates UI functionality and design fidelity using real browser automation and AI-powered visual analysis.

소개

The Browser Debugger skill empowers Claude to interact directly with web applications using the Chrome DevTools MCP. It enables automated UI testing, visual regression analysis, and console error monitoring by capturing screenshots and utilizing advanced vision-language models to detect layout shifts and styling inconsistencies. This skill is essential for developers who want to ensure their code works as intended in a live environment while maintaining high design standards through systematic verification and debugging reports.

주요 기능

0 GitHub stars
Interactive model selection to balance cost and analysis depth
Advanced visual analysis using state-of-the-art vision models like Qwen VL and GPT-4o
Automated design fidelity checks against reference screenshots
Automated browser interaction and navigation via Chrome DevTools MCP
Real-time console error monitoring and network request tracking

사용 사례

Verifying UI implementation against design specs immediately after code changes
Reproducing and debugging browser-specific bugs or intermittent console errors
Performing visual regression testing to detect layout shifts before deployment

소개

주요 기능

0 GitHub stars
Interactive model selection to balance cost and analysis depth
Advanced visual analysis using state-of-the-art vision models like Qwen VL and GPT-4o
Automated design fidelity checks against reference screenshots
Automated browser interaction and navigation via Chrome DevTools MCP
Real-time console error monitoring and network request tracking

사용 사례

Verifying UI implementation against design specs immediately after code changes
Reproducing and debugging browser-specific bugs or intermittent console errors
Performing visual regression testing to detect layout shifts before deployment