Open DrSensor opened 1 year ago
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++ } }
Note it's implemented as custom-element with shadow root closed
<script debug-panel src=w/render-scope></script>
<render-scope debug-panel> <link href=module1.js> <link href=module2.js> … </render-scope>
<render-scope> <link debug-panel href=module1.js> <link href=module2.js> … </render-scope>
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.
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}
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" }