Skip to main content
Inspect lets you point at any part of your running app in the Preview and hand it to your agent. Pick a button, a card or a whole section, check its size, spacing and CSS, then add it to your chat and say what should change. Your agent gets the element, the page it’s on and where it comes from in your code. Before you start · Desktop app · Free plan Inspect doesn’t change your app. To change something you picked, add it to the chat and ask your agent.

​
Turn on Inspect

  1. Start the Preview. See Preview your running app.
  2. Select the Preview, then click Inspect in the bar at the bottom of the canvas, or press ⌘ ⇧ I. Its tooltip calls it Inspect element.
Inspect works on a running Preview only. While the Preview is stopped, Inspect is greyed out and its tooltip says Needs a running preview. In a Preview tab, ⌘ ⇧ I works the same way. While Inspect is on, your app doesn’t get your clicks or hovers: they pick elements instead. To use your app again, press Esc or click Navigate.

​
Pick an element

Hover over your app to see an outline on the element a click would pick, then click it. The picked element gets a thin outline. While you hover over it, its children get dotted outlines. A conference site running in a Preview with Inspect on in the bar at the bottom of the canvas, the Setting type by hand session card picked with a purple outline, and an Add to chat button with ⌘L on it
  • Shift-click adds an element to what you picked, or removes it.
  • ⌘-click picks the deepest element under the pointer.
  • Double-click picks the child inside the element you picked.
  • Click the page background to pick nothing.
Which element a click picks first follows Selection behavior in Settings > Preferences: Classic picks the outermost element, Deep the innermost. You can also move around with the keyboard:

​
Check size, spacing and CSS

  • Hold ⌥ over an element to see its tag, #id, width and height, with its padding, margin and gaps marked on the page.
  • Hold ⌥ over an element and press Space to see the CSS it ends up with. Click to keep that panel open, and press Esc to close it.
These are read-only. The Properties panel stays empty for a picked element.

​
Add an element to your chat

  1. Pick one or more elements.
  2. Click Add to chat next to the element, or press ⌘ L.
  3. In the chat, say what should change, for example “make this button full width on mobile”, and send.
Add to chat doesn’t send anything by itself. It adds a chip for each element to your message and puts the cursor in the chat. Your agent gets the element, the page it’s on (without the query string), the file and line in your code it comes from when Wonder can tell, and its CSS. The element always goes to a chat in the worktree the Preview runs from, so your agent changes the right copy of your code. When Attach selection to chat is on in Settings > Preferences > Advanced (it is by default), the elements you pick also join your next message on their own, as a Selection chip.

​
Leave Inspect

Press Esc, or choose another mode in the bar, such as Navigate. If the CSS panel is open, the first Esc closes it. While Inspect is on, Back, Forward and Reload shortcuts, undo and redo don’t apply. Pasting styles onto a picked element isn’t possible either: Wonder says Pasting styles is canvas only.

​
If something goes wrong

  • Inspect is greyed out. Start the Preview first. A published Preview has no Inspect: inspect your local Preview instead.
  • Open a chat in this Preview’s worktree, then add this element again. That worktree has no chat yet. Start one from the worktree in the sidebar and click Add to chat again.
  • The chat is no longer available. The chat was closed or deleted. Open another chat in the worktree and try again.
  • The inspected element changed before it could be added. What you picked changed while it was being added, for example by another click. Pick it again and click Add to chat.
  • This Preview lost its worktree binding. Reopen the Preview from the worktree and try again.
  • The agent is unavailable or its account changed. Reconnect your agent in the chat, then try again.