Do I need to manually start Google Chrome?

No, the skill is designed to manage Chrome through the DevTools MCP, although it provides specific commands to clear profile locks if manual intervention is required.

How does it handle CSS updates?

The skill includes specialized commands to perform hard refreshes that bypass the browser cache and provides guidance on when a Zensical server restart is necessary.

Zensical is a web development framework; this skill provides a specialized environment within Claude Code to debug and verify sites built using it.

Can I use this skill to check for mobile responsiveness?

Yes, by utilizing the visual verification commands and script evaluation, you can check viewport widths and detect horizontal overflow issues commonly found in mobile layouts.

Zensical Visual Debugger

Name: Zensical Visual Debugger
Author: zeulewan

byzeulewan

브라우저 자동화

Debugs and visually verifies Zensical websites using Chrome DevTools integration and automated layout inspections.

소개

Zensical Visual Debugger is a specialized tool for Claude Code designed to streamline the development and testing of Zensical-based web projects. It automates the complex process of managing Chrome debugging ports, starting Zensical local servers, and performing visual audits. By integrating Chrome DevTools MCP, it allows Claude to capture screenshots, detect horizontal layout overflows, audit image rendering, and handle hard refreshes, ensuring that frontend changes are accurately reflected and visually sound during the development lifecycle.

주요 기능

Automated troubleshooting for Chrome profile locks and stale instances
Automated Chrome DevTools port management and conflict resolution
0 GitHub stars
Advanced layout inspection for horizontal overflow and CSS rendering issues
Visual verification tools for screenshots and image rendering audits
Integrated Zensical server lifecycle management and health checks

사용 사례

Verifying UI responsiveness and layout integrity on local Zensical deployments
Automating visual regression testing after applying CSS or component updates
Managing local development environments by automatically resolving port conflicts

소개

주요 기능

Automated troubleshooting for Chrome profile locks and stale instances
Automated Chrome DevTools port management and conflict resolution
0 GitHub stars
Advanced layout inspection for horizontal overflow and CSS rendering issues
Visual verification tools for screenshots and image rendering audits
Integrated Zensical server lifecycle management and health checks

사용 사례

Verifying UI responsiveness and layout integrity on local Zensical deployments
Automating visual regression testing after applying CSS or component updates
Managing local development environments by automatically resolving port conflicts