July 20–24, 2015
Portland, OR

Visualizing program execution

Jan Paul Posma (Brigade)
10:40am–11:20am Wednesday, 07/22/2015
Foundations D137/138
Average rating: ****.
(4.43, 7 ratings)

Prerequisite Knowledge

Basic coding skills required. Uses JavaScript in examples, but no in-depth knowledge of the language is needed. Transfers to other programming languages and environments as well.


We don’t see how code executes. We take peeks, using console.logs and breakpoints, but they don’t tell the whole story. This talk shows future toolmakers and (non-) visual thinkers how to take off our blindfolds.

  • First we look at why seeing how programs execute is important. The prime example is debugging, which programmers spend about half of their time on. We show that the right visualization can dramatically speed up debugging, but also help with other programming tasks.
  • We will take a detailed look at generating and visualizing execution traces in JavaScript. For this we use Esprima and Falafel, to parse JavaScript into an abstract syntax tree, and add instrumentation by transforming this tree. We see how easy it is to do this, even for larger programs.
  • We then look at advanced tricks to scale all this to performance-intensive programs, such as games. Those are widely-used techniques, snapshotting and deterministic replay, which only recently have been brought to the browser.
Photo of Jan Paul Posma

Jan Paul Posma


Jan Paul Posma is a programmer who has been working on code visualizations for jsdares.com. In his day job he fixes democracy at Brigade, and has earlier worked on education at Versal, and collaborative knowledge at Factlink and Wikimedia.