Create visual debugging interface
aggregate1166877 opened this issue · 4 comments
Details:
We need a debugging interface capable of grabbing variable almost anywhere in the application, and then doing something with it. That something might be to change variables each frame, or simply display info. It needs application context awareness, and the option to group things together. It should be similar to the three.js Dat.gui, though Dat.gui is a bit too lackluster for what we're aiming for.
Initial features:
- Variable hijacker (maybe replaces objects vars with specially crafted getters/setters to control flow)
- Plugin interrogator
Code template generator (such as for plugins and ship modules)- that will come in time as is needed, no need to make something now that ends up not being used.
Seeing as most people will never get to use it, here's what it looks like so far:
UI update:
The debugger can now be thought of as being in a "version 1" state. The core inspiration for this was the idea of modifying Vector3 and Quaternion objects with mouse drag though, so it still has some features missing. It's pretty capable already, being able to modify and lock primitives, and can convert null and undefined to strings or objects. Icons can be clicked to get the variable's actual path (which can be used in real code, or the DevTools window).
Clicking on a variable tracks its changes in real-time, allows changing its values in real-time, and allows locking any variable so that any external (i.e. non-debugger) attempt to change the variable's value will silently fail (meaning the original code doesn't crash from the debugger's interference).
The debugger can be launched by doing the following:
- Press F12 to open DevTools.
- Type:
$cosmDbg.showUI() - Press Enter.
Accidentally committed a bunch of #105 issues to this ticket :/