Your website.
Your playground.
A Chrome extension for designers, design engineers, and developers.
Play with me.
Give the toy a toss.
Drag the crosshair and release it onto the toolbar. With a keyboard, press Enter or Space to pick up, use arrow keys to move, then Enter or Space to drop. Escape returns it home.
One tool for your workflow
Inspect infix in
Hand the receipts tothrough
SOON
What’s inside
See what’s there. Try what could be.
Inspect page elements
Pick an element on a supported page. See its styles, size and spacing at once.
Explore the layers
Search the page tree and pick any element, even a hidden one.
Measure precisely
Drag out rulers and guides. Read exact distances between elements.
Find the right rhythm
Overlay a layout grid. Check columns, gutters and margins.
Read the layout
See Flex and Grid direction, gaps and tracks at a glance.
See through with X-Ray
Strip the paint, keep the outlines. See how the page is built.
Test hover and focus
Switch an element to hover, focus or pressed. Inspect each look.
Preview screen sizes
Try desktop, tablet and mobile viewports. Some sites restrict embedded previews.
Read the design system
See the page’s fonts, text styles, colors and available CSS tokens in one place.
Find inconsistencies
Spot hardcoded colors, off-scale spacing and near-duplicate styles.
Pick any color
Sample a color anywhere on the page. See which token it matches.
Check contrast
Get the WCAG ratio for any text, with AA and AAA results.
Grab the assets
Find the original. Download the image or SVG.
Copy as CSS or prompt
Take clean CSS, or a ready prompt for your AI agent.
Explain the change
Pin a comment to an element. No more guessing what you meant.
Try changes live
Tweak layout, type and colors right on the page. Coming with Pro.