Debugging a prototype

Unexpected prototype behavior often comes from two features meeting: a variant that has no Click event, a layout that controls a layer's size, a preview session that keeps a changed value. Use the symptom table to find the rule, and the two consoles and the Variables panel to see what ran and what is incomplete. Also called: troubleshooting.

Find the cause by symptom

What you see	Usual cause	Where the rule is
A Click on a component does nothing in preview	The event sits on the default variant only, and the instance shows :hover whenever a mouse clicks it	Events belong to a variant
Nothing scrolls	No frame is Scrollable, or the Scrollable inner frame is set to Hug content on the scrolling axis	Nothing scrolls by default, Scrollable
A frame drags but ignores the wheel and the trackpad	It is Pannable, not Scrollable	Pannable
Draggable has no effect	The layer is an item of a Flex or Grid frame, and the layout decides where it sits	With managed layout
A state variant never shows in preview	Its suffix is not a state of the set's behavior, such as :pressed for :active or :checked on a Button	Naming states, States per behavior
A state variant is missing from Change to	The set has a behavior, and the behavior switches the state variants	Set Component Variant
A checkbox, radio button or toggle starts in the wrong state	The starting state comes from Checked, on the set or on the instance's row	Checked and the starting state
Radio buttons do not uncheck each other	Their layer names differ, or they are not inside the same artboard	Radio groups
A radio button's Checked row is read-only	Its Selected value is bound to a variable, and it is checked where the variable equals its Option value	A radio group bound to a variable
A layer fades in during a transition instead of moving	The layer has no partner in the old state: its name or its type differs between the two variants	How layers are paired between variants
A property jumps at the start of a transition	Its category is unchecked in the Animate list of the transition, or the property is one that does not tween	What each category animates
An input cannot be picked in Set Component Input	The input is bound to no property, it is a slot, or it is bound to a variable, which owns its value	Set Component Input
Reset did not restore a variable	Reset covers one layer and never variables	Reset
Set Variable is listed as missing a variable	The variable was switched to an expression or deleted, which empties the action's Variable field	Changing or deleting a variable
An edit made in the editor does not show in an open preview	The session already changed that variable or that layer property, or the variable has a runtime value; it keeps its preview value until reload	Variables in preview
A Width or Height binding is gone	The axis was set to Fill or Hug content, or to a Left + Right, Top + Bottom or Scale constraint; layout sizing removes a size binding	Width and Height
A component pasted from another document stopped responding	Variables do not travel: bindings are removed and Set Variable actions arrive without their variable	Repairing a pasted interactive component
Typed text cannot be used in a condition	The field's Input value (Text on a Textarea) is not bound to a value variable, which typing would write	Two-way binding on controls
A checkbox or toggle springs back after a click	Its Checked is bound to a variable that a Set Variable in its Click, Check or Toggle event sets again	Two-way binding on controls
A shared link opens the start of the prototype, not where you were	The address names the starting artboard and carries no state	Pages, artboards and the address

Debug console

Where: preview header → the Debug console button. The same button closes the side panel.

The console lists each event as it fires and each action it runs, in order, newest at the bottom.

• An Event entry names the layer and the event. Check and Toggle add the State the click produced; the size-range events add Property, From, To and the Current value that was measured.
• An Action entry follows for every action in the list, with its parameters as set in the editor: Target, Change to, Transition, Duration and so on. An empty target, variable, input, variant or condition reads Not set. A Set Variable with an expression adds Result, the value it assigned. The actions of a Conditional branch appear after the Conditional entry, so the entries show which branch ran.
• No Event entry after a click: the layer, or the variant showing at that moment, carries no such event, or the event has no actions (→ Events belong to a variant). Bubbling shows as one Event entry per layer that carries the event (→ Order, bubbling and failures).
• Hover a layer name or a Target value to highlight that layer in the preview.
• State switches made by a component behavior, and the gestures of object behaviors, are not logged.

A Log entry is a warning about an expression in an action. It names the action type, not the layer, and shows nowhere else.

Entry	Meaning
Log Set Variable, with the error text of the expression	The expression failed, for example on a variable name that does not exist. The variable is unchanged (→ Set Variable).
Log Set Variable, The expression result does not match the variable's type.	The expression ran, but its result is not of the variable's type. The variable is unchanged (→ Errors).
Log Conditional, with the error text of the expression	The condition failed, and neither Then nor Else ran (→ Conditional).

note

The console records only while the side panel is open, on any of its views, and closing the panel empties the log. It keeps the last 200 entries; the number next to the title counts them, and Clear empties the log. The panel reopens with the preview when it was open before, so reload with the panel open to capture what runs on load.

Variables panel

Where: preview header → the Variables button.

The panel lists every variable of the document, value and expression variables alike, with the value it has in your session at this moment. Another viewer's session has its own values (→ Variables in preview).

• Values are read-only. To start a session from other values, set runtime values in the editor (→ Runtime values).
• A row flashes when its value changes, whether a Set Variable action, an expression that re-evaluated or an edit in the editor caused it. Nothing marks afterwards which variables the session has changed.
• A color shows as a swatch with its hex value. A long value is cut off; its tooltip has the full value.
• A ! after the value marks an expression variable in error. The value shown is its last good one, and the tooltip has the error text (→ Errors).

Validation console

Where: editor → left toolbar → the Validation console button, the last in the toolbar.

The Validation console lists incomplete events, actions and object behaviors, slider variants missing their parts, and expression variables in error, before you open a preview. It does not check the expressions inside Set Variable and Conditional actions, and of bindings it checks only those of radio buttons; an empty list is not proof that everything works.

• The button is tinted while the list has entries, and carries a red dot when entries were added since you last opened it. With nothing to report, a click shows No validation errors.
• Each entry names the page, the artboard or component set, and the layer. Selecting it selects that layer, brings it into view and opens the Interactions tab, or the Settings tab for a behavior or an input; an entry about slider parts only selects the variant. An entry for a variable opens the Variables panel at that variable.
• Entries follow your edits to events, behaviors, variables and radio buttons, and to the layers of a slider. The open list does not update; close and reopen it.
• Deleted components have no entries; restoring one brings its entries back.

Entry	Meaning
Click event contains no actions, for any event	The event's action list is empty, so it does nothing.
… action is missing a target	Target is empty, often because the target was deleted or moved (→ What an action can target).
Set Variable action is missing a variable	Variable is empty (→ Changing or deleting a variable).
Set Component Variant action is missing a source component	Change to is empty.
Conditional action is missing a condition	If is empty; neither branch runs.
Set Component Input action targets an input bound to the variable …; it does nothing in preview	The input was bound to a variable after the action was made, and the variable owns its value: set the variable instead (→ Two-way binding on controls).
Set Variable action sets …, which the bound Checked input already sets on every click	The click writes the variable through the Checked binding; remove the action, which writes it a second time (→ Two-way binding on controls).
Set Component Input action targets the Checked of a radio button whose Selected value is bound to the variable …; it does nothing in preview	The radio button's Checked follows the variable: set the variable instead (→ A radio group bound to a variable).
Selected value is bound to the variable …, but Option value is empty	The radio button stands for no value, so an empty variable checks it: give it an Option value.
Another radio button on this artboard bound to the variable … has the Option value …; both show as checked	Two radio buttons of one variable stand for the same value: give each its own Option value.
Radio buttons named … on this artboard have their Selected value bound to different variables, or some not at all; …	A click on a radio button that is not bound to the group's variable leaves the variable unchanged and unchecks only the other unbound ones: bind every Selected value of the group to it.
Set Component Input action is missing an input, Resize action is missing both width and height, Open URL action is missing a URL	Input, both size fields or URL are empty.
Draggable behavior is missing a handle object	Handle is set to Child object, but Object is empty; the layer cannot be dragged (→ Draggable).
Sortable behavior can only be applied to flex containers	The frame has no Flex layout; nothing sorts in preview (→ Sortable).
Slider has no layer named TRACK, Slider has more than one layer named THUMB, and the like	A variant of a slider set lacks a part, holds two, or holds THUMB outside TRACK or in its layout; no instance of the set responds in preview (→ Building a slider).
Expression error, Expression timed out, Circular dependency, Invalid value, Type mismatch	An expression variable failed and keeps its last good value (→ Errors).

In preview an incomplete action does nothing and the rest of its list still runs (→ Order, bubbling and failures).

Related

• How interactions run — what an action can reach, in which order lists run, and which variant's events apply.
• Variables — what a preview session holds and when it follows the editor.
• Preview — reloading to restart a session, and what the address carries.