Media
5 items
Description
Inspect any page: live element inspector, contrast fixer, design tokens, 318 technologies, page overlays, SEO and Web Vitals. 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.