UIdebug - Edit any page visually. Ship it to your source.
uidebug.com · Tools
Media
5 items
Description
Visually inspect and edit any page's styles. Tailwind-aware controls, AI chat, and file sync. No DevTools required. UIdebug lets you inspect and visually edit any web page's styles directly from your browser — no DevTools required. Click the extension icon (or press Alt+Shift+U) on any page, hover to highlight elements, and click to select one. A clean floating panel shows you that element's live styles, organized into controls for layout, spacing, typography, borders, radius, and opacity. Sign in with your Google account to get started — free accounts have full access to Properties, CSS, and Responsive editing. Every change applies live as you type. A reset button on each row restores the original value. TAILWIND CSS AWARE When the selected element uses Tailwind CSS, UIdebug detects it automatically. Numeric controls switch to scale-token pickers — so instead of writing inline styles, you select p-4, text-2xl, or rounded-lg from a dropdown. Values display in px for readability. Edits are written as class swaps, not inline styles, so your source diff stays clean. Off-scale values are committed as Tailwind arbitrary syntax. RESPONSIVE BREAKPOINT EDITING Switch between sm, md, lg, xl, and 2xl breakpoints from the panel. Editing on a breakpoint writes the correct variant prefix (md:text-2xl) without touching your base class. CSS TAB View the full computed stylesheet for any selected element, formatted and syntax-highlighted. Copy the exact rule with one click. AI CHAT TAB (Pro) Describe the change you want in plain English — "make the heading larger and bolder" or "reduce the padding so it feels tighter." UIdebug sends the element's tag, classes, and computed styles to Claude via your locally-running dev-server proxy. No API key is bundled in the extension. Edits are applied live and snapped to the nearest Tailwind token when applicable. FILE SYNC (Pro, localhost only) On localhost or 127.0.0.1, a Sync button appears. Link your project folder once via the browser's File System Access picker. After making edits, click Sync — a diff preview shows before/after. Confirm to write changes directly to your source files. File Sync is strictly gated to local pages and will never run on production URLs. No file contents are transmitted anywhere. KEYBOARD SHORTCUT Alt+Shift+U — toggle the panel on any page. WHO IT'S FOR Frontend developers and designers who want to tweak UI fast without leaving the browser — especially on Tailwind CSS projects.