Designer Dev Mode wot Sophie
Designer Dev Mode is an extension for visually inspecting websites. It shows layout structure, spacing, design tokens, assets, accessibility hints, and CSS values directly in a Dev Mode style panel.
Metadaty rozšěrjenja
Wo tutym rozšěrjenju
Designer Dev Mode is an extension that brings a Figma Dev Mode inspired inspection workspace directly into the browser. It helps designers, developers, and product teams analyze live websites visually, inspect layout structure, review spacing, extract design tokens, find assets, and understand the CSS behind selected elements.
After opening the extension on a webpage, Designer Dev Mode scans the visible page and builds a structured layer tree of detected elements. You can select elements from the layer list or directly from the page, then inspect their size, margin, padding, gap, typography, colors, borders, radius, shadows, computed CSS, and HTML attributes. Visual overlays make it easier to understand spacing and element boundaries directly on the website.
The extension also detects design tokens from CSS variables and inferred page styles, including colors, typography, spacing, border radius, and shadows. Tokens can be reviewed, edited, and exported as JSON. Selected elements can be adjusted live through the inspector, including font family, font size, weight, line height, letter spacing, text color, background color, border styling, opacity, dimensions, layout, spacing, and corner radius.
Designer Dev Mode includes asset detection for images, icons, inline SVGs, media sources, and background images, with download support for collected assets. It also provides accessibility checks with helpful hints, an integrated console view for page logs and JavaScript execution, per-site autosaving for design changes, and a reset option to restore edited styles.
After opening the extension on a webpage, Designer Dev Mode scans the visible page and builds a structured layer tree of detected elements. You can select elements from the layer list or directly from the page, then inspect their size, margin, padding, gap, typography, colors, borders, radius, shadows, computed CSS, and HTML attributes. Visual overlays make it easier to understand spacing and element boundaries directly on the website.
The extension also detects design tokens from CSS variables and inferred page styles, including colors, typography, spacing, border radius, and shadows. Tokens can be reviewed, edited, and exported as JSON. Selected elements can be adjusted live through the inspector, including font family, font size, weight, line height, letter spacing, text color, background color, border styling, opacity, dimensions, layout, spacing, and corner radius.
Designer Dev Mode includes asset detection for images, icons, inline SVGs, media sources, and background images, with download support for collected assets. It also provides accessibility checks with helpful hints, an integrated console view for page logs and JavaScript execution, per-site autosaving for design changes, and a reset option to restore edited styles.
Z 0 wot 0 pohódnoćacych pohódnoćeny
Prawa a daty
Trěbne prawa:
- Sćehńće dataje a čitajće a změńće sćehnjensku historiju swojeho wobhladowaka
- Mějće přistup k rajtarkam wobhladowaka
- Přistup k wašim datam za wšě websydła měć
Dalše informacije
- Přidatkowe wotkazy
- Wersija
- 2.0.1
- Wulkosć
- 351,21 KB
- Posledni raz zaktualizowany
- 9 dagar sidan (19. mai 2026)
- Přiwuzne kategorije
- Licenca
- Licenca MIT
- Wersijowa historija
- Zběrce přidać