About
Canopy Ruler is a free, open-source Chrome extension that puts a complete web inspection toolkit into a floating toolbar. Inspect DOM elements, measure pixel-perfect distances, extract CSS and colors, identify and download fonts, capture screenshots, analyze page color palettes, and detect the technologies powering any website — all without leaving your tab.
Features
Everything you need to inspect, measure, and analyze web pages — accessible from a compact floating dock.
Element Inspector
Hover to highlight, click to select any DOM element. View dimensions, position, margin, border, padding, and computed CSS styles in the side panel. Navigate between parent and child elements with keyboard shortcuts.
Measure & Rulers
Add floating rulers with click-and-drag. Measure pixel-perfect distances between any two elements. Enable page rulers on the viewport edges for quick visual reference.
WhatFont
Hover over any text to instantly identify its font family, weight, style, size, line height, and color. Click to pin a detailed popover with a live preview. Download the actual font file (.woff2, .woff, .ttf) with one click — detects fonts from Google Fonts, Adobe Fonts, Typekit, and all standard @font-face declarations.
Color Picker & Palette
Pick any color from the page with the eyedropper tool. View the full page color palette in the Page tab — swatches sorted by hue for a beautiful gradient display. Hover for hex codes, click to copy. Copy the entire palette at once.
Screenshot Capture
Capture the visible tab as a PNG screenshot with one click. Automatically downloads with a timestamped filename. No extra dialogs or prompts.
X-Ray Mode
Toggle an outline overlay on every element in the page to visualize the DOM structure at a glance. Great for debugging layout and nesting issues.
Grid Overlay & Breakpoints
Superimpose a pixel grid over the page for alignment checks. View CSS breakpoints and test responsive design with a resizable viewport simulator.
Find Element
Search the DOM with CSS selectors. Type any valid selector and press Enter to jump directly to the matching element. Highlights matches for quick navigation.
Page Analysis
Open the Page tab to see meta tags, SEO information, detected technologies (100+ frameworks, libraries, analytics, CDNs), and head tag details — all grouped and collapsible. Export detected technologies as CSV.
Bilingual
Toggle between English and Spanish with a single click. Language preference is saved and persists across sessions. Both the floating dock and the side panel update instantly.
Resource Viewer & Viewport
Extract and preview all images (including SVGs) from a selected element. Download individual images or all at once. Check window, document, and screen dimensions with the viewport info overlay.
Installation
Get Canopy Ruler running in under a minute.
Clone the repository
git clone https://github.com/GustavoGutierrez/canopy-ruler.git
Open Chrome Extensions
Navigate to chrome://extensions/ in your browser.
Enable Developer Mode
Toggle the Developer mode switch in the top-right corner.
Load Unpacked
Click Load unpacked and select the canopy-ruler/ folder.
Start Inspecting
Press Alt+Shift+S or click the extension icon to activate the floating dock.
Keyboard Shortcuts
Alt + Shift + S
Toggle the floating dock toolbar
Alt + ↑
Navigate to parent element
Alt + ↓
Navigate to child element
Backspace / Delete
Remove selected ruler (when ruler is active)
Escape
Exit current tool or close the extension
Enter
Confirm find element search
Technology Detection
Canopy Ruler automatically detects over 100 technologies across these categories:
JavaScript Frameworks
React, Vue.js, Angular, Svelte, Next.js, Nuxt.js, Astro, Gatsby, Remix, Solid.js, Qwik, Preact, Alpine.js, Ember.js
UI Frameworks
Tailwind CSS, Bootstrap, MUI, Chakra UI, Ant Design, Vuetify, Semantic UI, Bulma, Materialize, Naive UI, Font Awesome
Analytics & Marketing
Google Analytics, Google Tag Manager, Facebook Pixel, Hotjar, Mixpanel, Amplitude, Segment, FullStory, Microsoft Clarity, Intercom
JavaScript Libraries
jQuery, Lodash, Moment.js, D3.js, Three.js, Chart.js, GSAP, Swiper, Axios, Socket.IO, RxJS, Anime.js, Popper.js, Day.js, date-fns, Prism.js, Highlight.js, Framer Motion, XState, Immutable.js, core-js, Zone.js, i18next
Backend & Languages
Node.js, PHP, Ruby on Rails, Django, Laravel, Express.js, ASP.NET, Symfony, NestJS, Go, Python (Flask, Jinja2), CodeIgniter, Koa.js, Fastify
CDN, Hosting & Services
Cloudflare, Vercel, Netlify, AWS, Firebase, Supabase, Google APIs, jsDelivr, CDNJS, Unpkg, Google Maps, Stripe, PayPal, reCAPTCHA, HubSpot, Mailchimp, YouTube, Vimeo
Author
