# Specter-dev > Specter makes it easy to view and copy css properties without having to open the overwhelming browser console. Canonical page: [https://chrome-stats.com/d/specter-inspector](https://chrome-stats.com/d/specter-inspector) ## Overview - **ID:** `specter-inspector` - **Platform:** Firefox - **Type:** Firefox add-on - **Status:** Available - **Publisher:** Setu Kathawate - **Category:** web-development - **Daily users:** 1 - **Weekly downloads:** 1 - **Version:** 0.7.5 - **Last updated:** 2026-09-06 - **First published:** 2026-06-28 - **Size:** 49 KB - **Data as of:** 2026-09-09 - **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/specter-inspector/) ## Description The inspector built for vibe coding. Point at what's wrong, say what you want, and hand it off — to your AI as a precise work order, or to another person as a comment that sticks to the exact element. No more screenshot → explain → retry loop. Hover any element on any site to see its real CSS: tag, component, dimensions, font, color, background, padding, margin, border-radius. Press Ctrl+C (Cmd+C on Mac) to copy it in an AI-optimized format and paste straight into Claude, Cursor, or any assistant. One paste replaces a paragraph of explanation. Annotate right on the page. Press P on any element and type the change you want — "reduce width to 320", "match the header font". Mark up as many elements as you need, then copy them all at once, each paired with your exact instruction. Your AI knows which element and what to do — no re-describing. Share feedback with a person, not just your AI. Mark comments on a page, click Share, and Specter copies a link. Whoever opens it — on the same page, with Specter installed — sees your notes pinned to the exact same elements. Comments only: your CSS values and measurements never leave your screen. If the page changed and an element is gone, that comment is flagged instead of landing on the wrong spot. No account, no backend — the comments ride inside the link (or a small file for big reviews). It's your browser inspector and Figma's measurement panel, rebuilt for the AI workflow — and tuned to spend as few tokens as possible while staying precise. How it works:
  1. Click the Specter icon (or press Ctrl+Alt+Z — Ctrl+Option+Z on Mac) to activate on any page.
  2. Hover an element to see its style properties.
  3. Press C to toggle between Comment mode and Properties mode.
  4. In Properties mode, press the Alt key (Option on Mac) to toggle between the 5. Properties and Measurement viewer.
  5. Press P to mark it and type the change you want (optional).
  6. Press Ctrl+C (Cmd+C on Mac) to copy the elements — and your notes — for your AI. Or press L, then Share, to send them to a person.
  7. Paste into your AI assistant, or share the link with a teammate.
Note: If you want to send your specs directly to your AI agent, install the Vite plugin: https://www.npmjs.com/package/vite-plugin-specter Features:
  1. Annotate on the page — press P to note a change on any element; mark several, copy as one instruction set
  2. Share comments with a person — mark notes, hit Share, send a link; they re-anchor on the same elements in the recipient's browser (comments only — never your CSS or measurements)
  3. CSS inspector — tag, component, dimensions, font, color, padding, margin, radius for any element on any site
  4. Figma-style measure — tap Alt (Option on Mac), then hover to see exact pixel gaps between elements
  5. Pin & measure — press M to pin one element, hover another to measure the distance
  6. Review panel — press L to see, edit, remove, or share everything you've marked Token-lean output — copies just what the AI needs, nothing it doesn't
  7. Works anywhere — production, staging, competitors; no setup
## Rankings - #107,229 — Overall - #84 — cmd/ctrl+m - #248 — property ## Permissions and access ### Permissions - `activeTab` ### Content script matches - `` ## Safety - **Risk impact:** Moderate risk impact - **Risk likelihood:** High risk likelihood ### Analysis details - Allows access to all websites, posing a significant security risk as it can monitor and modify data from any visited site. - This extension was recently updated in the past month. New updates 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 - [Specter — design inspector](https://chrome-stats.com/d/specter-design-inspector) - [ColorSpy](https://chrome-stats.com/d/colorspy) — 5 users, 5.00 / 5 - [DevSnip](https://chrome-stats.com/d/devsnip) - [Hoverify: All-in-one extension for web developers](https://chrome-stats.com/d/hoverify) — 473 users, 3.68 / 5 - [INSPEKT](https://chrome-stats.com/d/inspekt) — 11 users - [DevScope - Developer Diagnostics](https://chrome-stats.com/d/devscope) — 1 users - [Website Inspector](https://chrome-stats.com/d/website-inspector) — 6 users - [Spyglass Contrast Checker](https://chrome-stats.com/d/spyglass-contrast-checker) — 2 users - [CSS DNA — Inspect CSS & Extract Design Tokens](https://chrome-stats.com/d/css-dna) — 2 users - [Claude Code Probe](https://chrome-stats.com/d/claude-code-probe) — 2 users - [CSS Viewer](https://chrome-stats.com/d/inspectcssviewer) — 2 users - [MiroMiro](https://chrome-stats.com/d/miromiro) — 16 users --- Source: [Chrome-Stats](https://chrome-stats.com/d/specter-inspector)