stackfire-tools v1.0.0-alpha.2

Stackfire Tools

Stackfire Tools allows for visualization of your stack

It injects an interactive, visual representation of the stack.grid as toggle-able layer over your HTML page, enabling you to run an app/game and see the control flow in realtime and/or use in combination with the Browser's built-in debugger.

Usage

const stack = require('stackfire') //< require stackfire first
require('stackfire-tools')(stack) //< pass stackfire as param
stack.inject() //< run function to inject the stackfire-tools visualizer grid

//any stack activity from this point will now be visualized in the grid ie-

stack.on('test', () => console.log('testing'))
stack.on('test', () => console.log('more testing'))
//as commands are fired, the listeners are output into the grid:
stack.fire('test')

Hotkeys

• CTRL+F2 : inject or disable the grid
• F2 : hide/show grid
• F4 : trim grid

UI/UX tips

• use mouse wheel to zoom in/out and scale the grid, middle click to move it around
• turn off 'Auto Trimming' in the bottom shelf to let your grid history persist after commands complete (turn back on or use the 'Trim Grid' button to clear it)

• click on a listener in the grid and its function will output to DevTools console (open DevTools console). When you click on the function in the DevTools the debugger will take you to the function's location on the filesystem (if your JS bundle has a sourcemap ie- with browserify --debug flag).

  This is useful for quickly inserting breakpoints within the listener functions in your grid. Or for knowing which files to edit/or to edit in place if you setup filesystem access through your debugger.

TODO

• UI improvements
• faster grid rendering performance
• consider omitting the need for a db for persistent saving
• accommodate for initial state of the dev tools via URL params (ex- so you can start your application with a specific configuratio for how the Tools will start alongside such as #enabled/show-grid&auto-trimming=off)