Remote Control and Simulator

The DevTools extension includes two always-available controls: a remote control and a screen simulator. Both are intended for debugging focus, input handling, hit testing, and device-only behavior without constantly switching tools.

Remote Control

Open the remote with the toolbar remote icon or r.

The remote can target:

• a web app connected through the debugger proxy
• a Roku/device app through ECP and the device WebSocket
• a debug-app target registered with the proxy

Keyboard mappings match Roku-style input:

Browser input	Sent key
Enter	Select
Arrow keys	Up, Down, Left, Right
Backspace	Back
h	Home
*	Info
Home	Rev
End	Fwd

For debugger targets, the remote sends key down/up pairs so held keys can be released cleanly when the target changes or the panel loses focus. For Roku device targets, it uses Roku ECP-style keypresses.

Text Entry

The remote includes text entry helpers:

• t focuses the remote text entry.
• Esc clears remote text.
• Enter sends remote text.

For web/debugger targets, text is sent through the debug protocol. For Roku targets, text is sent through ECP-compatible text commands where supported.

Device Simulator

Open the simulator with the toolbar screen icon or s.

The simulator is a scaled 1920 x 1080 interaction surface. Moving the cursor over it sends throttled HighlightItem messages; clicking sends HighlightItemSelect. The cursor tooltip shows both relative panel coordinates and design-space device coordinates.

Simulator controls include:

• scale presets for fitting the simulator into the DevTools window
• server delay presets for throttling hover/highlight traffic
• draggable panel positioning

Device apps default to a non-zero delay when the simulator opens because Roku/device round trips are slower than web app round trips.

Highlight Modes

The remote debugger supports several highlight paths:

• Hover highlight: follows the cursor or tree hover.
• Sticky selection highlight: remains on the selected element.
• Tree selection highlight: selecting a HS, SG, or CV tree item asks the app to highlight that runtime element.
• Mouse inspection: lets the app inspect the view under a mouse/simulator coordinate.
• Scene overflow toggle: makes clipped or overflowed scene content easier to inspect.

Use Settings to enable or disable hover highlight, sticky selected-element highlight, auto-scroll, and generated ID hiding.

Debugging Focus

For focus bugs, combine the remote with the Hosanna, SG, and CollectionView panels:

1. Press a key in the remote.
2. Use the focused-view button or GetFocusedView-backed UI to jump to the runtime focus owner.
3. Compare Hosanna and SG bounds.
4. If the focused view is inside a CollectionView, switch to the CollectionView panel and inspect focused row/item indices.
5. Use the simulator to click the expected visual target and verify which runtime view the hit test resolves.

For repeatable issues, use the screen recorder or MCP diff_state instead of manual key-by-key inspection.