UI Surgeon

About

UI Surgeon: Operate on Your Web UI with Precision
Stop fighting with complex DevTools panels just to make simple visual tweaks. UI Surgeon is a professional-grade extension designed for Developers, Product Owners, and BAs to surgically inspect, edit, and audit any live website.

Whether you are debugging a layout, checking accessibility, or prototyping new content, UI Surgeon provides the precise tools you need in a clean, side-panel interface.

 Why You Should Install UI Surgeon
Surgical Precision: Select any element on a page to instantly view its accurate CSS rules and computed styles. No more digging through nested DOM trees.

AI-Powered Styling: Get instant, context-aware color and style suggestions from Gemini. Perfect for finding accessible palettes that match your brand.

Layout Stress-Testing: Instantly see if your design breaks with long text or different font sizes. Test "Copy-Fit" before you even touch the code.

Accessibility (WCAG) Audits: Real-time contrast checks (AA/AAA) ensure your site is inclusive and compliant with international standards.

Live Prototyping: Swap images and rewrite text directly on the live page to demonstrate new ideas to stakeholders in seconds.

 Key Features
Deep CSS Inspection: Fetches accurate CSS paths and rules using Chrome's Debugger API for 100% accuracy.

Live Editor: Change colors, margins, and fonts via an intuitive UI and see the result live on the page.

Smart Content Swapper: Easily test different images or headlines without a staging environment.

VS Code Ready: Quickly copy CSS selectors or generate code-search queries to find the exact component in your source files.

Clean & Lightweight: Operates entirely within the Chrome Side Panel to keep your workspace uncluttered.

 Who is this for?
Developers: For rapid CSS prototyping and layout debugging.

BAs & Product Owners: For verifying copy-fit, accessibility, and branding consistency on live builds.

Designers: For auditing live implementations against original design specs.