Click Trace — CSS Inspector, Ruler & Spacing Tool

Inspect CSS, box model and contrast, measure with a snapping ruler, check spacing, grids and pixel-perfect design overlays.

Click Trace is a CSS inspector and pixel ruler for frontend developers, designers and QA. Inspect, measure and trace any element on a web page without opening DevTools. TOOLS • Inspect (I): hover to see the box model — margin, border, padding and content. Click to pin an element and read the click coordinates relative to it, any parent, the viewport or the page. Walk the DOM with the arrow keys. • Ruler (R): drag to measure anything. Edges snap to nearby elements; drag guides out of the pixel rulers. Measurements stay attached to the page while you scroll. • Spacing (D): see the distance between two elements, or from an element to its parent — Figma-style spacing lines. • Styles (S): grouped computed CSS for layout, box model, typography and visuals, including flex and grid gap. Copy a value or the whole block as CSS. • Color (C): eyedropper color picker with HEX, RGB, HSL and OKLCH, plus a WCAG contrast checker. • Grid (G): 12, 8 or 4-column layout grid and baseline grid overlay. • Outline (O): outline every element to debug layout, overflow and stray wrappers. • Overlay (P): drop or paste a design mockup and compare it with the live page using opacity or difference blending — pixel-perfect QA for @1x, @2x and @3x exports. • Screenshot (K): capture the page with your measurements, copied to the clipboard and saved. BUILT FOR REAL-WORLD SITES • Stays on top of modal dialogs and popovers, and stays clickable over them. • Page CSS can't break the toolbar or panels (Shadow DOM isolation). • Clicks are blocked while you measure, so links and buttons don't fire by accident. • Accessibility checks: text contrast ratio with AA/AAA grades and touch-target size warnings. • Units in px, rem or percent. Light and dark themes, custom accent color. • Inspects elements inside web components (open shadow roots). PRIVATE BY DESIGN Click Trace runs only on the tab where you open it (activeTab). It makes no network requests and collects no data. Settings stay in your browser. KEYBOARD FIRST Every tool has a one-key shortcut. Press ? on the page to see them all. Alt+Shift+I toggles Inspect from anywhere. Questions or ideas? https://github.com/vi5hnuu/click-trace-chrome-extension/issues