Debugger
The debugger is an integrated part of the web editor that allows you to test your story without leaving the editor. It interprets your Yarn script in real time and displays the result in a chat-like panel.
Starting the Debuggerβ
There are two ways to start the debugger from the editor toolbar:
| Button | Action | Description |
|---|---|---|
| βΆ | Play current node | Starts the debugger from the node you are currently editing |
| βΆβΆ | Play from entry point | Starts the debugger from the story's entry point (is_entry_point: true) |
Before starting, the debugger parses your script and checks for errors. If errors are found, the debugger will not start β fix the errors first.
Use βΆ (Play current node) to quickly test the node you're working on without replaying the entire story from the beginning.
Debugger Panelβ
When the debugger is running, a panel appears between the toolbar and the code editor. It consists of:
Messagesβ
The left area displays the conversation as it would appear in Telegram:
- Bot messages with text and formatting
- Speaker names (highlighted)
- Media messages (photos, videos, voice messages, video notes) with preview on hover
- User choices (shown after selection)
Variablesβ
The right panel displays all variables declared and used in the script:
- Variable names and their current values
- Click the edit button next to any variable to change its value on the fly
- Changes take effect immediately and influence the story flow
Example: If your story uses $score, you can manually set it to any value to test different branches without replaying the entire story.
Optionsβ
At the bottom of the debugger panel, the current choice options are displayed. Click on an option to make a selection and continue the story.
Options with conditions (<<if>>) that evaluate to false are shown as disabled.
Debugger Settingsβ
The debugger header contains settings that control playback speed:
Turbo Modeβ
Enable the Turbo checkbox to skip all delays (<<wait>> and <<typing>> commands). The story will play through instantly, which is useful for quickly testing branching logic.
Wait Timeβ
Controls the delay (in seconds) for <<wait>> commands. Default: 1. Adjustable from 0 to 10 with 0.5 step.
Typing Timeβ
Controls the duration (in seconds) of typing status animations (<<typing>>, <<upload_photo>>, <<record_voice>>, <<record_video_note>>). Default: 1. Adjustable from 0 to 10 with 0.5 step.
Enable Turbo mode to instantly skip through the story and focus on testing your branching logic and variable conditions.
Line Highlightingβ
While the debugger is running, the current line being executed is highlighted in the code editor. The editor automatically:
- Scrolls to the current line
- Switches to the correct chapter if the story jumps to a different node
- Shows a green indicator on the active chapter in the sidebar
This makes it easy to follow the execution flow and understand exactly where the story is at any point.
Stopping the Debuggerβ
Click the Stop button in the debugger header to stop the debugger and return to editing. The line highlighting is cleared and the debugger panel closes.
Media Previewβ
If your project has uploaded media files, the debugger shows media messages with their type icons. Hover over the media filename to see a preview popup:
- Photos β displayed as an image
- Videos / Video notes β displayed as a looping video
- Voice messages β displayed with an audio player
Workflow Exampleβ
- Write or edit a node in the editor
- Click βΆ to start the debugger from the current node
- Watch the messages appear in the debugger panel
- When options appear, click one to make a choice
- If something is wrong, click Stop, edit the script, and click βΆ again
- Modify variables on the fly to test different branches
- Enable Turbo to skip through long sequences quickly