Canopy Ruler - Web Inspector

About

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.