Temporary, click-granted page access
The extension receives access only after a user invokes it for one tab; navigation revokes the grant.
Open Inspector
Hover any website, get its design system. No permissions.
The overview
What is Open Inspector?
Open Inspector is a free, open-source browser extension for examining a website’s layout, styles, colors, typography and assets. It can summarize spacing and type scales, inspect grid and flex structures, run a contrast audit, and export design tokens in formats such as CSS, Tailwind, SCSS, JSON and Markdown.
Around the internet
What people are saying
Public experiences, questions, and discussions.
No discussions collected yet.
Inside the toolkit
Key features
Inspect and edit page styles
Inspect box-model values, matched CSS rules, and forced interaction states, with reversible edits.
Audit color and typography
Grade contrast against WCAG levels and inspect rendered font families and metrics.
Inspect layout and loaded assets
View grid/flex structure, spacing, breakpoints, and the actual selected asset variants.
Export design information
Export design tokens and styles as CSS variables, SCSS, Tailwind, JSON, or Markdown handoff.
Where it fits
Use cases
- Debug a visual element on a live pageInspect computed styling, dimensions, and interaction states on the currently open page.
- Check accessible color contrastGrade colors against WCAG AA/AAA and locate failing samples.
- Document a site’s design systemExtract design tokens or style values for reuse in code or an assistant handoff.
Keep exploring
