Inspectors and Debugging

← Documentation
STRVCT

Built-in tools for live Property Inspection, Developer Mode graph toggles, and Chrome DevTools source debugging.

Overview

Because STRVCT generates user interfaces from annotated model nodes, the framework can automatically derive an alternate Property Inspector view for any domain object.

  • Option-Click (Alt-Click): Option-clicking any tile opens its Property Inspector in the next column—a dynamically generated field tile stack displaying declared property slots, values, types, and editability flags.
  • Option-Shift-D (Alt-Shift-D): Toggles Developer Mode globally (SvApp.shared().developerMode()), revealing hidden diagnostic subnodes, raw state inspectors, and AI message logs.
User Gesture Trigger Option-Click Tile justAlternateTap() on tile Option-Shift-D Toggles developerMode() Chrome DevTools sourceURL breakpoint debugging SvInspectableNode Engine setupInspectorFromSlots() Walks allSlotsMap() on prototype nodeInspector() Generates field stack on demand onAppDeveloperModeNote Posts global toggle notification Live Runtime Presentation Field Tile Column Opens editable slot controls Hidden Subnodes Revealed Toggles setIsVisible() on subnodes Write-Through Sync Edits update live object pool

Option-Click: Property Inspector

Holding Option while clicking any tile opens an inspector view in the next column instead of navigating to the node's standard subnodes.

Mechanism & Implementation (SvInspectableNode):

  1. Gesture Interception: The tile gesture handler (SvTile.justAlternateTap()) catches the Option-Click gesture and sets isInspecting = true on the tile.
  2. Inspector Generation: SvInspectableNode.nodeInspector() clones an inspector node and populates it via setupInspectorFromSlots().
  3. Slot Map Inspection: setupInspectorFromSlots() walks allSlotsMap() down the node's class inheritance chain, instantiating an SvFieldTile for every slot where slot.canInspect() returns true.
  4. Live Write-Through: Edits made inside the inspector write directly through to the live object node, automatically triggering IndexedDB persistence and view change notifications.

Inspector Slot Annotations:

  • slot.setCanEditInspection(true): Controls whether the slot value is editable in place inside the inspector.
  • slot.setInspectorPath("Section/Subsection"): Groups slots into collapsible inspector section headers.

Option-Shift-D: Developer Mode

Pressing Option+Shift+D anywhere in SvBrowserView toggles SvApp.shared().developerMode(). The app posts an onAppDeveloperModeChangedNote notification when toggled.

Opt-In Subnode Visibility Code Pattern:

Domain nodes register to observe the notification and show or hide diagnostic subnodes:

(class Character extends SvStorableNode {

    init () {
        super.init();
        this.watchForNote("onAppDeveloperModeChangedNote");
    }

    onAppDeveloperModeChangedNote (/*aNote*/) {
        const devMode = this.app().developerMode();
        this.diagnosticsNode().setIsVisible(devMode);
        this.rawStateNode().setIsVisible(devMode);
        this.aiMessageHistory().setIsVisible(devMode);
    }

}.initThisClass());
  • Nodes: Core SvNode domain abstraction.
  • Slots: Complete guide to slot metadata and declarations.
  • Getting Started: DevTools configuration and debugging launch configs.