The preview ships a runtime debugger: every action your logic takes is recorded with a readable label, the whole live context is inspectable, and you can step backwards — click any past action and the canvas re-renders as it was at that moment.
Open the component in the tab preview (the preview that opens as its own page, from the component header), then open the panel from the menu button in the preview's corner.
The small floating preview window inside the editor runs the same logic but has no debugger — if you cannot find the panel, you are in the window preview. Use the tab preview.
Every render lands as a row with a human label: Initialization, Element → Event → On Click, API → posts → On Finish, Animation → On Complete, Listeners → Action, Component → On State Change. Reading the log top to bottom is reading what your component did, in order. (It keeps the most recent 200.)
Click a row — or Prev/Next — to time-travel. The canvas re-renders at that historical state. While you are parked in the past, events and animations stop mutating state, and edits you make in the editor queue up instead of clobbering the snapshot; stepping to the newest entry returns you to live.
The component's whole data structure as it currently stands: properties, states, variants, children, events, timelines, mounted APIs, storage, content and validator — plus the runtime's own view: the active screen id, repeat scopes, and guards (a tripped recursion or loop limit is reported here with a count, instead of failing silently).
Each element row also prints the logic that actually resolved on it — if true · variant Primary · repeat #3 · 2 events · skipped (screen) — and hovering a row highlights that element on the canvas. A nested component expands into its own context, so you can drill into an instance without leaving the panel.
A red/green diff of the context and element tree, per action: click the button, and CHANGES shows exactly which state moved, which condition flipped and which elements re-rendered because of it. (One quirk: a reordered list shows as removals plus insertions, not as a move.)
Everything above is exposed over MCP: get-interpreter-state, get-interpreter-actions and step-interpreter read and walk the same log, eval-expression evaluates against the live context, and preview-interact clicks, types or scrolls for real and hands back before/after screenshots plus the context delta — an agent proving its own wiring fired.
Code components debug differently — they are real JavaScript, so they get real breakpoints instead of the interpreter log. See Code components.
Add logic — the actions and conditions the log is recording.
Troubleshooting — when the preview itself will not connect.