February – September 2015 Visualising Program Execution We are not trying to understand complex physical systems, where setting up an experiment is hard. We are in complete control over our programs — it is our system! The computer does exactly what we tell it to, deterministically, in a predictable way. It doesn’t make sense to carefully probe using console logs, all variables pass through the processor at some point, so why can’t we just know their values? It is our system, we are the gods, we should be omniscient. I’m giving a talk at a few conferences about how important and easy it is to make tools that enable us to truly see how our programs execute. This page contains further resources on the history and the state of the art of visualising program execution — with a particular focus on web development. Talk Strange Loop, September 2015 (includes experimental tool) ForwardJS, February 2015 (shorter, but might have clearer explanation of snapshotting and deterministic replay) The slides can be viewed online and the source is available on GitHub. Most interesting are sparklines.js and the giant index.html (yikes). The educational programming environment is jsdares, which is also open source. I’ve written an introduction on the design of jsdares, as well as a more extensive talk and thesis. Check out the experimental tool at the end, though documentation is still lacking. In the Strange Loop talk I mentioned some tool for visualising functional programming. This is an interesting topic on its own, and I’ve collaborated on a project: λ Lessons. Also check out the fantastic fork, λ Bubble Pop! Existing tools Probably the first thing you want to know: which tools can I start using right now? So here they are. Update November 2020: there are a bunch more now! Also see this interesting discussion of some of the makers of these tools. undo.io; replay.io; rr; Pernosco. Also gdb has a reverse-debugging feature now. Theseus JavaScript Debugger for Adobe Brackets (open source, paper) Light Table (open source) Microsoft Intellitrace (commercial) Apple Playgrounds (commercial) Chronon Debugger (formerly "Silver Bullet", commercial) More context Update November 2020: there was an interesting discussion with makers of various debugging tools: The advanced techniques I show in my presentation — snapshotting and deterministic replay — have mostly been used for debugging. And you can do it even with with entire operating systems: Jakob Engblom has written a comprehensive overview of the history of such debugging tools: Concepts, Research, Products. And even his list doesn’t come close to describing all research and products that visualise program execution. With a bit of searching you can find many more products, a whole bunch of books, numerous academic conferences. An early example of a truly graphical visualisation of program execution for debugging is MIT’s ZStep. A popular research project is Whyline, which answers the question "Why did this happen?" This list wouldn’t be complete without at least mentioning the Omniscient Debugger. Lots of these projects attempt to make visible what is otherwise hidden, but no-one has managed to do so more beautifully than Bret Victor. In his many examples he shows that you can use media to think in ways previously unimaginable. Also, the lab that he works at is doing research into browser-based live coding and visualisation too. Further reading and watching We’re not even trying Reverse Debugging in Flash Builder Visual Monitoring of Numeric Variables Embedded in Source Code (inspiration for the sparklines in the talk) Elm’s Time Traveling Debugger Live React: Hot Reloading with Time Travel Feel free to add your own links!