Website Inspector

Stop juggling five different extensions. Website Inspector combines the best features of CSS visualizers, tech sniffers, and SEO analyzers into one lightning-fast, beautifully designed tool. Built with a premium Material Design 3 (M3) Dark Theme and hardware-accelerated animations, it feels like a native, high-end part of your browser. ✨ KEY FEATURES: 🔍 INSPECT ELEMENTS: Hover anything to see its font, size, weight, colours, spacing and border radius. Click to copy production-ready CSS. Press F to freeze the tooltip while you read it, Esc to exit, or Alt+Shift+I to toggle the inspector from any page without opening the popup. ♿ ACCESSIBILITY AUDIT: Scans the whole page for contrast failures, form controls with no label, images with no alt text, buttons and links with no accessible name, aria-hidden wrapping focusable content, heading-level skips, duplicate IDs and tap targets under 24×24px. Tap any finding and the extension scrolls to that element and highlights it on the page. Contrast is measured properly: it walks up the DOM to find the real background and composites transparency, so the ratios match what a person actually sees. 🧱 TECH STACK DETECTION: Identifies 166 technologies from script URLs, custom element tags, framework attributes and generator tags. Signature-based, so it does not report Bootstrap just because the word appears in an article. ⚡ CORE WEB VITALS: LCP, INP, CLS, FCP and TTFB measured on the page in front of you and graded against Google's thresholds, plus request count, transfer size, DOM node count and protocol. 🔎 SEO X-RAY: Social preview card exactly as it will appear when shared, title and meta description with length grading, canonical URL, heading structure, images missing alt, internal and external link counts, JSON-LD, robots and viewport. 📐 RESPONSIVE TESTING: Jump the viewport to mobile, tablet, laptop or wide, and see which elements overflow horizontally at each size — named, so you know what to fix. 🎨 DESIGN EXTRACTION: Pull the page's colour palette ranked by how much of the page each colour actually covers, and export it as CSS variables, a Tailwind config or JSON. See every font family in use with its weights. Download any image or SVG on the page, or copy the raw SVG code. 📄 EXPORTABLE REPORTS: Run everything at once and save the result as Markdown for a pull request or JSON for tooling. 🪶 Zero Bloat & One-Click Toggle: Designed to be incredibly fast. 🎯 WHO IS THIS FOR? Web Developers & Designers: Quickly audit your own work, debug CSS, or gather tech-stack inspiration from top-tier websites. QA Testers: Verify that implemented designs and fonts perfectly match the original Figma mockups. Students & Learners: Peek under the hood of your favorite websites to see exactly how they are built and styled. 🔒 PRIVACY FIRST: Website Inspector respects your data. It runs 100% locally in your browser. It does not use background tracking, it does not inject ads, and it does not send your data to external servers.