Inspector

The Inspector shows what the browser really rendered for one element: computed sizes, typography, colors, spacing, layout and structure.

Inspect modes#

Mode	Behaviour
Click	The element under the pointer is outlined. Click it (or press Enter) to pin it; it stays in the panel until your next selection.
Hover	The panel follows your mouse live. Click or press Enter to pin the current element.

Switch modes in the Inspector header, on the home screen, or set the default in Settings › Inspection. Press Esc to stop inspecting. You can also move through elements with Tab and pin with Enter.

Tabs#

• Overview — rendered width and height, typography, colors and spacing.
• Layout — box model, display, position and overflow.
• Style — fill and text, border and shape, effects.
• Structure — the selection's hierarchy: its direct children, their position and size relative to the selected element, and a link to the cleaned HTML skeleton.

Every value has a copy button. Values are browser-computed at selection time: source CSS rules, filters and pseudo-elements are not captured.

Prepare for AI#

Prepare for AI opens Before sending, a preview of exactly what will be copied — nothing touches the clipboard before you confirm. The content follows the tab you were on (Overview, Layout, Style or Structure), with Full context available in the preview. See AI handoff.

Special cases#

• Frames — a frame is inspected as a container only. Open the frame's page directly to inspect its content; cross-origin frames are protected by the browser.
• Shadow DOM — in an open shadow root, the selector is relative to that shadow root, not to the document.
• Forms — form values and editable text are always excluded.