Chrome Extension

The design inspector that lives in your browser

Highlight, pin, measure, and edit any element on any page — without opening DevTools.

Add to Chrome — it's free View source

Free · No account needed · Open source · Chrome only · All data stays in your browser


yoursite.com/products
320 × 68
Inspect
Tag<section>
Class.card
FontInter
Size14px
Color#1D2939
BG#EBF1FD

Tools

Six tools. One toolbar.

Each tool is a focused instrument — no menus to dig through, no panels that get in the way.

IInspect

Hover to highlight any element, click to pin it. Shows tag, class, font, color, and background. Copy CSS in one click.

Button
Color #2563EB
Margin 16px
TTypography

Hover any element to see its font family, size, and weight — without opening DevTools.

TYPOGRAPHY Family Inter Size · Weight 16px · 600
/Search

Find elements by CSS selector or text content. Cycle through matches with Enter and Shift+Enter.

/ nav a.active 2/5
RRulers

Drop full-screen guide lines. Select one, hover another — the gap between them shows automatically.

24px
OOutlines

Toggle a 1px outline on every element to see the page's box structure at a glance.

GGrid

Overlay a column grid or baseline grid on any page. Set columns, gutter, margin, and max-width — save configs for reuse.

Keyboard shortcut

++A

Mac · toggle the inspector on any page without opening the popup.

Ctrl++A

Windows / Linux


Add it to Chrome in one click

Available on the Chrome Web Store — no ZIP, no developer mode, no setup. Click the button and it's ready.

Add to Chrome — it's free
1

Click Add to Chrome on the Web Store page and confirm the prompt.

2

Pin the extension from the Chrome toolbar puzzle-piece menu so it's always one click away.

3

Navigate to any page and click the Argus icon — the inspector toolbar opens immediately.