attach
SourceAdds the monitor to the page. The panel starts closed unless open is set; toggle it with the key (Backslash by default) or the corner button.
Devtools
Monitor
A live monitor panel for a running game in the browser: how the game is built and what it is doing, without reading its code.
- Overview: time per schedule tick, the busiest systems, entity counts over the last seconds, state machines, and alerts (failed systems, NaN or infinite numbers written, messages discarded by skipped systems).
- Systems: every schedule as its systems in order, grouped by run conditions, with what each reads, writes, emits, and spawns. A dot shows whether a system is working, idle, or skipped. Hover a name to light up the systems that write it (orange) and read it (blue).
- Entity: pick an entity on screen (or by id) to follow its components live and the changes systems make to it.
The monitor observes the runtime only while it is open, so a closed monitor costs nothing. While open it reduces trace events to counts and shows its own cost per tick. It needs a runtime made with debug: true.
Examples
const monitor = Monitor.attach(runtime, {
schedules: { fixedUpdate: step, frame },
pick: (event) => entityUnderPointer(event),
locate: (entity) => screenPositionOf(entity)
})
// Toggle with the backslash key or the corner button.