Your first inspection

The whole loop in five minutes: hover to inspect, pin to hold, edit a value live, click to copy.

Hover

Activate the extension and move your cursor over any element. The tooltip follows and shows the authored CSS: the values someone actually typed, in the units they typed them, not the 300-line computed dump DevTools gives you. Pseudo-classes like :hover and ::before are surfaced inline.

Pin

Press Space to pin the tooltip to the current element. It stops following the cursor and the tooltip splits into four tabs: CSS, Contrast, Box, Tree. Use the arrow keys to walk the DOM without losing the pin.

Edit a value

In the CSS tab, click any value to type a new one. Press ↵ to apply it to the live page or Esc to cancel. Each changed row gets a revert control so you can undo one property at a time. Edits last until you reload the page.

Copy

Click the element to send its CSS to your clipboard, ready to paste. Framework noise such as --tw-* and --chakra-* is filtered out. Press X to switch between copying just the element and copying the whole component subtree (component mode is Pro).