A few days ago I released debug.js and I breifly touched on the educational applications of the library. This morning, I had a couple of hours before going to work so I decided to implement the āMake flow visibleā example from Bret Victorās āLearnable Programmingā paper (Feel free to change the code):
Here is how itās done:
- Given a program, step through it once using debug.js to get the execution flow info
- Plot the execution flow using d3
- Whenever the user scrubs through the plot, rerun the steps up to the step index that the user has the pointer over.
- Repeat from 1 when the editor code change
The entire thing is ~250 LOCs and is up on Github.