Media
3 items
Description
Inspect any element by hovering — DevTools-style details in a live tooltip. Extension Name WebScan Summary / Short Description (132 characters max) Inspect elements by hovering — get live CSS, typography, spacing, responsive frame previews, and Figma exports instantly. Detailed Description Inspect the web, your way. WebScan is a free Chrome extension for designers, developers, and QA engineers. Just hover over any web page element to inspect properties like typography, layout spacing, and accessibility. Extract content directly into Figma and preview responsive layout breakpoints without ever leaving your current tab. Click the WebScan icon to open a lightweight overlay toolbar on any web page. No opening heavy Chrome DevTools panels, clicking through DOM trees, or searching through infinite <div> layers. 🎨 INSPECT Hover any element for a live tooltip with DevTools-style details: Layout & Geometry: Dimensions, margin, padding, flex gap, border-radius, outline size, and type. Typography: Font family, size, weight, line-height, and letter spacing. Color Analysis: Fill, text, and outline colors with usage percentages. Accessibility: ARIA roles and accessible names. Visual Overlays: Box-model guides adjust dynamically as you move your cursor. Pin & Warn: Pin tooltips with a single click. Instant font availability warnings help you catch missing typefaces before shipping. 📦 EXTRACT Click an element to open the Extract panel and copy assets instantly: Text & Typography: Copy text formatted for Figma with matching real web fonts. Media Assets: Extract images, SVGs, audio, and video files. Color Palettes: Extract hex and RGB values instantly. Code: Clean HTML and computed CSS snippets. Everything lands directly on your clipboard — ready to paste into Figma, VS Code, or your tool of choice. 📱 RESPONSIVE Preview the live page inside interactive, scaled device viewports: Presets: iPhone SE, standard iPhone, Android, tablet, iPad, laptop, and desktop dimensions. Custom Sizes: Freely adjust custom width and height. Full Interactivity: Inspect and extract elements directly inside the responsive preview frame. Screenshots: Capture pixel-perfect PNG screenshots at exact device dimensions. ⚡ HOW TO USE Click the WebScan icon in your extensions bar (or use keyboard shortcut Alt + Shift + W). Hover to inspect. Click to extract assets. Toggle Responsive Mode to test breakpoints and capture full tab screenshots. 💡 WHY WEBSCAN? Use standard Chrome DevTools when you need deep network debugging or JavaScript execution logs. Use WebScan when you want fast design details, color values, layout metrics, and vector exports on any site — without leaving the tab you are on. Free to install. Compatible with Chrome and Chromium-based browsers.