UI Surgeon

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.