Media
5 items
Description
Inspect CSS, measure spacing, test responsive viewports, audit page design, and export local visual changes. Visor turns the Chrome Side Panel into a local visual workspace for designers, frontend engineers, and product reviewers. Work against the rendered page itself: verify alignment, understand authored CSS, test responsive sizes, audit the page's design system, and prepare a developer-ready handoff without granting permanent access to every website. Measure on the real page - Extend an element's four edges across the viewport to verify alignment. - Pin a point, hover another element, and read the distance in CSS pixels. - Shift-click to build a persistent multi-point measurement chain. Understand what the browser renders - Read the box model, typography, surface, shadows, contrast, and accessibility details. - Review matched rules for default, hover, active, focus, focus-visible, focus-within, and visited states. - Inspect pseudo-elements and copy or download a complete CSS snapshot. Test responsive layouts - Read the live CSS viewport at the current browser zoom. - Apply mobile, tablet, laptop, and desktop presets or enter an exact size. - Rotate the viewport and restore the browser window to its original bounds. Audit and collect the design system - Scan visible elements for CSS statistics, colors, variables, classes, gradients, contrast, typography, and assets. - Locate color, type, and asset instances back on the page. - Export palettes as Figma JSON, Sketch Palette, or Adobe ACO. - Select audited images, SVGs, and backgrounds for batch download, or package all downloadable assets as a ZIP. Experiment with confidence - Review mode is read-only; local adjustments require an explicit switch to Adjust. - Edit only a strict allowlist of visual CSS properties. - Undo, redo, reset, and export effective changes as CSS or JSON. - Ending the session restores all still-active local edits. Local-first by design - Visor activates only when you click its toolbar icon or use `Alt+Shift+D`. - There are no required host permissions, persistent content scripts, accounts, analytics, advertising, telemetry, or backend services. - Inspection, measurement, audits, edits, and palette exports stay on your device. - Asset downloads request optional access only to the specific HTTP(S) origins involved and only after you start a download. - Theme, display language, and HEX/RGB/HSL color-format preferences are stored locally. - The complete interface is available in English and Simplified Chinese. Visor cannot run on Chrome-protected pages such as `chrome://` URLs or the Chrome Web Store. Open a regular webpage before activating it. Requires Chrome 116 or later.