Canopy Ruler - Web Inspector

A free, open-source web inspection toolkit for designers and developers. Measure elements, extract CSS and colors, identify and download fonts, capture screenshots, analyze page technologies, and more — all from a compact floating toolbar that stays out of your way. Canopy Ruler puts a complete set of dev tools right on any page you visit. No need to switch tabs or open DevTools — everything is accessible from a dock at the bottom of your screen. 🔍 ELEMENT INSPECTION Hover to highlight, click to select any DOM element. View dimensions, position, box model (margin, border, padding, content), layout, colors, typography, and the CSS selector — all in the side panel. Navigate parent/child elements with keyboard shortcuts. Copy CSS, selector, or HTML. Delete elements from the DOM. 📏 MEASUREMENT TOOLS - Floating rulers: click and drag anywhere on the page - Distance measurement: click two elements to measure the exact pixel gap - Page rulers: pixel-scale rulers on viewport edges - Grid overlay: alignment grid for layout debugging 🔤 WHATFONT Hover over any text to identify its font family, weight, style, size, line height, and color. Click to pin a detailed popover with live font preview. Download the actual font file (.woff2, .woff, .ttf) — works with Google Fonts, Adobe Fonts, Typekit, Bunny Fonts, Fontshare, and any @font-face declaration. 🎨 COLORS - Eyedropper: pick any color from the page, copied to clipboard - Color Palette: view every color detected on the page, sorted by hue. Hover for hex codes, click to copy individual colors, or copy the entire palette at once 📸 SCREENSHOT Capture the visible tab as a PNG with one click. Automatically downloads with a timestamped filename. 🔬 PAGE ANALYSIS Open the Page tab to see meta tags, SEO information, and a full technology audit detecting 100+ frameworks, libraries, analytics platforms, CDNs, CMS, and backend languages — all grouped by category. Export to CSV. 👁️ VISUAL TOOLS - X-Ray Mode: outline every element to visualize DOM structure - CSS Breakpoints: detect responsive breakpoints - Responsive Mode: resizable viewport simulator - Viewport Info: window, document, and screen dimensions with DPR 🖼️ RESOURCES Extract and preview all images and SVGs from a selected element. SVGs render as actual graphics. Download individually or all at once. 🌐 BILINGUAL Toggle between English and Spanish with flag icons. Preference is saved and persists across sessions. 🎹 KEYBOARD SHORTCUTS Alt+Shift+S → Activate dock | Alt+↑/↓ → Parent/child | Esc → Exit tool No frameworks. No dependencies. No tracking. Just vanilla JavaScript and a green forest theme inspired by a canopy of trees.