Mr. Inspect - 全方位網頁檢視與素材擷取工具

檢視任何網頁元素，即時偵測字型與色彩，擷取SVG向量圖、Lottie動畫、音訊，一鍵匯出乾淨CSS與Tailwind代碼。

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. ⚡ 4. Free SVG Downloader & Vector Code Exporter One-Click Vector Extraction: Automatically gathers all inline <svg> graphics, brand logos, vector illustrations, and icon sets. Clean Code & File Export: Download pure .svg files or copy optimized SVG code and React JSX components directly to your clipboard. Light/Dark Vector Preview: Inspect vector paths with high-contrast background toggles. 🎬 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 Web Audio & UI Sounds: Automatically detects background music, podcast audio, sound effects, and UI notification chimes (.mp3, .wav, .ogg, .m4a). Built-in Audio Player: Preview and listen to audio tracks directly inside the sidebar with waveform animations and playback controls. Video Extractor: Discover and download embedded MP4 and WebM videos, hero background loops, and media links in high resolution. 💻 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.