> ## Documentation Index
> Fetch the complete documentation index at: https://wonder.design/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Inspect your running app
> Pick elements in your running app, check their size, spacing and CSS, and add them to your chat so your agent knows exactly what to change.
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](https://wonder.design/docs/preview-your-running-app.md).
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.
* **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:
| Key | Picks |
| - | - |
| Enter | The first child |
| ⇧ Enter | The parent (**Select parent**) |
| Tab | The next sibling |
| ⇧ Tab | The previous sibling |
## 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.
## Related
* [Preview your running app](https://wonder.design/docs/preview-your-running-app.md)
* [Capture your running app](https://wonder.design/docs/capture-your-running-app.md)
* [Fix Preview problems](https://wonder.design/docs/fix-preview-problems.md)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.