# Designer Dev Mode

> 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.

Canonical page: [https://chrome-stats.com/d/designer-dev-mode](https://chrome-stats.com/d/designer-dev-mode)

## Overview

- **ID:** `designer-dev-mode`
- **Platform:** Firefox
- **Type:** Firefox add-on
- **Status:** Available
- **Publisher:** Sophie
- **Category:** web-development
- **Daily users:** 1
- **Version:** 2.0.1
- **Last updated:** 2026-05-19
- **First published:** 2026-05-15
- **Size:** 351 KB
- **Data as of:** 2026-09-14
- **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/designer-dev-mode/)

## Description

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.

## Rankings

- #126,744 — Overall

## Permissions and access

### Permissions

- `activeTab`
- `downloads`
- `tabs`
- `storage`
- `<all_urls>`

## Safety

- **Risk impact:** High risk impact
- **Risk likelihood:** High risk likelihood

### Analysis details

- Grants access to browser tabs, which can be used to track user browsing habits and history, presenting a privacy concern.
- This extension has low user count. Unpopular extensions may not be stable or safe.

> Some risk analysis details are omitted from this free response. [Upgrade to view the full analysis](https://chrome-stats.com/pricing).

## Similar extensions and apps

- [Gripper - DevTools for Designers](https://chrome-stats.com/d/gripper-devtools-for-designers) — 4 users
- [Design Token Extractor](https://chrome-stats.com/d/design-token-extractor) — 1 users
- [Design Token Inspector](https://chrome-stats.com/d/design-token-inspector) — 4 users
- [DevScope - Developer Diagnostics](https://chrome-stats.com/d/devscope) — 1 users
- [Dev Mode](https://chrome-stats.com/d/dev-mode) — 10 users
- [Website Inspector](https://chrome-stats.com/d/website-inspector) — 6 users
- [Specter — design inspector](https://chrome-stats.com/d/specter-design-inspector)
- [DevSuite Pro](https://chrome-stats.com/d/devsuite-pro) — 11 users
- [Design Mode](https://chrome-stats.com/d/design-mode-add-on) — 23 users
- [amgiflol](https://chrome-stats.com/d/amgiflol) — 2 users
- [MiroMiro](https://chrome-stats.com/d/miromiro) — 16 users
- [DesignMeter - UI/UX Analyzer](https://chrome-stats.com/d/designmeter) — 2 users

---

Source: [Chrome-Stats](https://chrome-stats.com/d/designer-dev-mode)