Yi Page Ruler Pro

Premium page ruler, grid overlay, element specs inspector, and Figma-style distance measurer for developers and QA.

✨A premium, feature-rich Manifest V3 Chrome extension designed specifically for frontend developers, UI/UX designers, and QA testing engineers. Upgraded from a basic page grid ruler to an interactive specs inspector and layout measurement suite. 🚀 KEY FEATURES 📐 1. Infinite Pixel Grid Overlay • High-DPI canvas overlay with adjustable size (8px, 16px, etc.), color, and opacity. • Smart scroll tracking for smooth 120fps scrolling alignment. 📊 2. Responsive Column Layout Grid • Renders Bootstrap/Tailwind-style layout guides. • Adjust container max-width, column counts, outer margins, and gutter sizes. 🔍 3. Specs Inspector HUD • Hover over page elements to view tag selector, sizing, font family, font size, line-height, text color, and background color. • Renders a 4-color layout highlight representing the element's actual Box Model (Content, Padding, Border, Margin) similar to Chrome DevTools. 📏 4. Figma-Style Spacing Measurer • Click an element to lock it, then hover over any other element to compute exact pixel spacing. • Draws layout dimension lines showing exact spacings for nested parent-child measurements. ❄️ 5. Specs Freeze Mode • Press "F" or click the Snowflake button to lock boundary borders, margins, paddings, and the Specs HUD card on your screen. • Ideal for analyzing tooltips, dynamic dropdowns, or hovering over the Specs badge. ⏱️ 6. Inspect Tooltip Delay Timer • Click the Stopwatch button or press "T" to start a 3-second lock-on countdown timer. • Hover over dynamic dropdown menus, fragile popups, or tooltips; at 0s, the extension automatically locks highlights on the target. 📍 7. Interactive Guidelines • Double-click to drop vertical guidelines. Shift + Double-click to drop horizontal guidelines. • Drag lines to adjust coordinate offsets. Hover and press Delete / Backspace to remove. 🎨 8. Premium Draggable HUD Panel • Sleek glassmorphic controller dashboard with custom input controls and dynamic settings persistence. 🎯 9. Dynamic Extension Toolbar Icon • Updates dynamically when active (glowing indigo-violet) or inactive (dark charcoal) for clear visual feedback. ⌨️ PRO KEYBOARD SHORTCUTS• • [ F ] : Toggle Specs/Gaps Freeze Mode (Locks active overlay and HUD) • [ T ] : Start/Cancel Inspect Tooltip Countdown Timer (3-second delay target lock) • [ I ] : Toggle Element Specs Inspector • [ M ] : Toggle Figma Spacing Gaps Measurer • [ Double-Click ] : Drop a vertical guideline • [ Shift + Double-Click ] : Drop a horizontal guideline • [ Hover + Backspace/Delete ] : Delete specific guideline • [ Escape ] : Deselect Locked Element / Clear Freeze / Turn off Specs Inspect modes • [ Drag Header ] : Reposition floating HUD panel on viewport