Skip to content
game-platform

The debugger

The debugger follows the shape of React DevTools and Unity’s custom inspectors: a generic tool the engine knows nothing about, extended per game. The engine exposes the devtools API, which draws nothing. @daniel-zarinski/devtools draws the generic overlay. A game adds its own panels as components, each with the title its tab shows: <Devtools panels={[{ title: "Hand", component: HandInspector }]} />. A game mounts <Devtools /> inside <Game> in development, and published bundles never include it; the platform’s example games also show it behind ?debug, to demo the tools on a deploy.

This page is the source of truth for the overlay. Claude Design’s export fills the screenshots section below. The prompt that produced it is on the internal claude-design pages, which public pages never link.

Rules

Section titled “Rules”
  • The tree is the developer’s component tree: Scene, World, Player, Camera and each game component by its name, behaviours as leaves, entity ids beside names. A group appears only where one game component renders several entities. No invented groups.
  • Edit mode never dims, blurs or covers the scene. The developer sees exactly what the game is doing.
  • Panels are neutral dark glass, never tinted by the scene, and stay to the edges. Both sidebars collapse to an edge bar. Hovering the bar grows the panel out of it, and the pin in the panel’s header keeps it open.
  • The top bar with edit mode off is an Edit toggle and the frame rate. With it on: pause (Space), step (period), step back (comma), speed at 0.25x, 1x and 2x with no key, a 10-second replay scrubber, then fps, frame time, the CPU’s and the GPU’s milliseconds a frame, and simulated time. The engine’s own tabs, Global settings and Frame, come first among the game’s panels; Frame lists each part of the frame by its mean and its worst. A round camera button sits just right of the bar: it flies the free camera in place of the scene’s, and a second press gives the scene’s camera back.
  • Run N seconds is an MCP call, step(seconds), and never a control in the overlay. Rewind, resuming from a scrubbed frame, is a later issue.
  • Shortcuts are scoped, global versus panel, shown as keycaps beside every action, with a shortcuts panel on ?.
  • The context menu order is Send to agent, Inspect, Select parent, Focus camera, Hide, Duplicate, Delete, Add behaviour, Copy id. Its header shows the world point the right-click met, as x, z and height. A disabled item states why. The Add behaviour submenu takes arrow keys and Enter. The menu opens at the pointer, moved up and left as far as it takes to fit the screen, and the submenu opens on its right, or on its left where the right has no room.
  • Send to agent gathers a screenshot framed on the entity, its tree position, its behaviours with values, their source files, their wiki pages and the systems that touch it. Each part can be unticked, and one line of intent goes with it. It calls describe(entity) on the devtools API.

Screenshots

Section titled “Screenshots”

Filled from session 2’s export. One image per state, on both backgrounds.

  • Edit mode off
  • Edit mode on
  • Hover
  • Selection
  • Inspection view: Yeti
  • Inspection view: Coin
  • Context menu, with disabled and submenu states
  • Send to agent
  • Entity tree
  • Playback controls
  • Console strip
  • Game panels: Hand, Quests, Track
  • Shortcuts panel
  • Phone layout

Handoff bundle

Section titled “Handoff bundle”

Empty: the overlay has no exported handoff bundle yet.