debug-panel

[DrSensor]

Note it's implemented as custom-element with shadow root closed

• [ ] floating panel similar to PropPanel, leva, dat.GUI, imGUI
• [ ] switch to popup/newtab panel if run on mobile device (hover:none and screen<md)
• [ ] visual knob (small fab button on mobile device) to inspect an element
• [ ] visual toggle to mirror knob changes via WebRTC
• [ ] debug all linked modules in current document

  <script debug-panel src=w/render-scope></script>

• [ ] visual toggle to debug all linked modules in visible viewport
• [ ] debug all linked modules in specific scope

  <render-scope debug-panel>
  <link href=module1.js>
  <link href=module2.js>
  …
  </render-scope>

• [ ] repl on selected modules or scope
• [ ] debug specific module

  <render-scope>
  <link debug-panel href=module1.js>
  <link href=module2.js>
  …
  </render-scope>

• [ ] specify control knobs

  
  export default class Counter {
  static accessor total
  accessor count
  increment() {
  Counter.total++
  this.count++
  }
  }

import * as panel from "w/debug/panel" // optional

class DebugCounter implements panel.Debug { static total = accessor => <input type="range" step={1} on:input={e => accessor.value = +e.target.value}

{accessor.name}

count = panel.input({ type: ["range", "number"], // 2x step: 1, set(value) { // accessor hook if (value > 25) console.debug(value) }, })

increment = fn => <button on:click={fn}>{fn.name} }

export { DebugCounter as "debug-panel" }

> 💡**Tips**: use either conditional compilation (debug mode) or empty virtual modules (production mode) to reduce the bundle size.