Mr. Inspect - All in one web inspector

Mr. Inspect is the ultimate all-in-one browser extension for developers, UI/UX designers, and creators. Stop digging through complicated developer menus or opening multiple tabs just to check a font, grab an icon, or download a video. With Mr. Inspect, everything you need to analyze, inspect, extract, and understand modern websites is built directly into a clean, intuitive sidebar. 🔍 1. Inspect Anything on Any Webpage Point, Click & Inspect: Hover over any header, card, button, or container to instantly view its exact HTML structure, CSS properties, margins, and padding. Live Sandbox Preview: View selected components isolated in a live, interactive container preview box. Instant Style Editor: Tweak font sizes, line heights, background colors, and borders on the fly with live visual updates on the page. Quick Hotkey Access: Open and close the inspector instantly using Cmd + Shift + X (Mac) or Ctrl + Shift + X (Windows). 🔤 2. Find Fonts & Typography Rules Instant Font Detection: Discover the exact font family, font weight (100–900), font size, letter spacing, and line height of any text element. Web Font Identification: Automatically identifies Google Fonts, Adobe Typekit, and custom web fonts used across the page. Typographic Hierarchy: Inspect paragraph styles, display headings, and copy font styles directly to your design system. 🎨 3. Color Palette Extractor & Gradient Generator Full Website Color Schemes: Automatically scans the active page to extract all brand colors, background shades, text colors, and border tones. CSS Linear Gradient Generator: Detects multi-stop gradients, adjusts angles and color stops, and generates ready-to-paste CSS. Modern Color Space Conversions: Convert any color seamlessly between HEX, RGB, HSL, and modern OKLCH for wide-gamut displays. Instant Website Color Palette Extractor: Scans the entire active page DOM, CSS variables, and rendered stylesheets to gather every unique background, text, accent, and border shade. Generate Color Palette from Website Cleanly: Automatically groups colors by frequency, usage, and visual role (primary brand colors, neutral surfaces, text tones, and interactive states). Comprehensive Website Color Scheme Extractor: View harmonious swatches, copy hex codes with a single tap, and save curated color sets directly into your private collection or design tokens. ⚡ 4.High-Fidelity SVG Downloader & Icon Extraction Clean vector graphics are the foundation of sharp, high-resolution user interfaces. Instead of hunting through nested inline <svg> elements or broken sprite sheets: Download SVG from Website in Pure Vector Format: Mr. Inspector isolates inline SVGs, vector icons, custom shapes, and brand logos cleanly. Free SVG Downloader with Live Previews: Preview vector paths on both light and dark backgrounds to ensure path integrity before saving. Copy Optimized Code or Download Files: Copy ready-to-use SVG XML strings, standard JSX components for React, or download clean .svg files directly to your project asset folder. 🎬 5. Interactive Lottie Animation Player & Exporter Discover Lottie Animations: Automatically detects JSON and .dotLottie motion graphics on the page. Built-in Interactive Player: Play, pause, scrub through animation frames, and adjust playback speed (0.5x, 1x, 2x). Download & Embed: Save animations as .json or .dotLottie files, or copy ready-to-use <dotlottie-player> HTML embed snippets. 🎵 6. Audio & Video Extractor Extract Video from Website Instantly: Discover MP4, WebM, and streaming media files directly from hero banners, video cards, and background canvases without dealing with inspect-source headaches. Smart Video Link Extractor: View direct, high-resolution media URLs, check file sizes and dimensions, and copy raw links in one click. How to Rip Videos from Websites Safely: For design references, moodboards, or testing, download clean background footage and presentation loops without watermarks or format degradation. Download Audio from Webpage & UI Soundscapes: Whether a website features custom sound effects, ambient background audio, or audio player tracks, Mr. Inspector lets you extract sound from website elements with one simple click. 💻 8. Clean Code & AI-Ready Component Export Tailwind CSS & Pure CSS: Export any inspected element into clean, production-ready HTML with Tailwind utility classes or standard CSS. AI Cloner Ready: Generates clean, semantic markup and structure ideal for AI prompting and modern frontend development. 🔒 Privacy & Performance First 100% Client-Side: Operates entirely within your local browser without tracking or external servers. Lightweight & Fast: Zero browser slowdown, clean memory management, and dark/light theme support. ⚠️ Disclaimer Please Note: Mr. Inspect is designed for web design research, frontend development, educational analysis, and accessibility testing. Users are responsible for respecting intellectual property rights, licenses, and permissions when downloading or utilizing media, audio, or code from third-party websites.