Hosanna DevTools Extension
The Hosanna DevTools extension is the interactive debugger UI for Hosanna apps. It connects through the Hosanna command debugger WebSocket proxy and can target either a web app or a Roku/device app.
The extension is available from the Chrome Web Store:
The extension, MCP tools, web apps, and device apps all share the same debugger proxy and remote inspection protocol.
https://chromewebstore.google.com/detail/hosanna-devtools/epghgnobcajmnhkcablhcghiljopploj
For extension development, ../hosanna-ui-browser-extension runs the panel at http://localhost:3000 with:
cd ../hosanna-ui-browser-extension
npm run dev
Required Services
A useful debugging session has three pieces running:
# App repo
npx hst run:debugger
npm run dev
hst run:debugger opens the proxy ports used by the extension and MCP:
| Port | Client |
|---|---|
59150 | management HTTP API |
59151 | web app WebSocket |
59152 | device app WebSocket |
59153 | DevTools extension WebSocket |
npm run dev in current Hosanna apps usually calls hst run:dev, which can run Vite, generator watch, and the debugger together.
Connecting
Open browser DevTools on an http://, https://, or localhost page. The Hosanna tab only appears on real pages, not browser settings or blank tabs.
Use the app selector at the top of the extension to choose the connected app. The selector lists apps discovered by the debug proxy, including web apps, device apps, and debug-app targets.
In Settings, choose the target type and device/app details:
- Web: sends remote keys and inspection commands through the debugger proxy.
- Device: sends Roku ECP commands to the configured device IP and uses the device app WebSocket for view inspection.
- Debug app: targets a debugger-managed app instance exposed by the proxy.
Main Panels
The extension panels map to the remote debug protocol:
| Shortcut | Panel | Primary use |
|---|---|---|
1 | Hosanna Views | Inspect Hosanna view hierarchy, state, errors, and mapped properties |
2 | Scene Graph Views | Inspect rendered SG node hierarchy and update SG fields |
3 | Collection View | Inspect CollectionView rows/cells, focused indices, slices, recordings, and diagnostics |
4 | Fragment | Inspect fragment mappings and data-bound child properties |
5 | IoC Container | Inspect registered services and selected service state |
6 | Instance Pool | Inspect reusable instance pools |
7 | Registry | Read, add, update, remove, import, export, or clear registry data |
8 | Events | Send custom app events |
9 | Text to Speech | Inspect speaking state, queue, completed items, and control playback |
l | Logs | Filter, export, copy, and clear app logs |
0 | Settings | Configure highlighting, logging, editor links, device IP, and target selection |
The top toolbar also exposes scene overflow, mouse inspection, the remote control, and the device simulator.
Keyboard Shortcuts
Open the help screen with ?.
| Key | Action |
|---|---|
r | Toggle remote control |
s | Toggle device simulator |
a | Focus the app selector |
0-9 | Change main tab |
l | Open Logs |
? | Open help |
h | Remote Home |
* | Remote Info |
Home | Remote Rewind |
End | Remote Fast forward |
t | Focus remote text entry |
Esc | Clear remote text |
Enter | Send remote text or Select |
| Arrow keys | Remote navigation |
Backspace | Remote Back |
Shortcuts are ignored while focus is inside an input, textarea, select, contenteditable area, or the remote text entry field.
Settings That Matter
- Highlight elements on hover: highlights views as you move through debugger trees.
- Highlight selected element: keeps a sticky highlight around the selected element on device/app.
- Auto hide generated ids: reduces noise from generated view IDs.
- Auto-scroll to corresponding item on tab switch: keeps HS/SG/CV trees aligned as you move between panels.
- Device IP: Roku device target for ECP commands and screenshots.
- Logging Configuration: set global level and optionally disable individual
trace,debug,info,log,warn, orerrorchannels. - Editor Integration: controls stack trace links for Cursor or VS Code and the source path used to resolve files.