We present Theseus, an IDE extension that visualizes runtime behavior within a JavaScript code editor. By displaying real-time information about how code actually behaves during execution, Theseus proactively addresses misconceptions by drawing attention to similarities and differences between the programmer's idea of what code does and what it actually does. To understand how programmers would respond to this kind of an always-on visualization, we ran a lab study with graduate students, and interviewed 9 professional programmers who were asked to use Theseus in their day-to-day work. We found that users quickly adopted strategies that are unique to always-on, real-time visualizations, and used the additional information to guide their navigation through their code.

The behavior of JavaScript is difficult to understand due to the language's asynchronous and dynamic nature. In particular, chains of event handlers pose difficulties because they cannot be stepped through with a debugger, and determining where a chain is broken requires instrumenting every link in the chain with a breakpoint or log statement. The aim of this work is to create a debugging interface that helps users understand complicated control flow in languages like JavaScript. Theseus uses program traces to provide real-time in-editor feedback so that programmers can answer questions quickly as they write new code and interact with their application. The call graph is augmented with semantic edges that allow users to make intuitive leaps through program traces, such as from the start of an AJAX request to its response.

No abstract