UNFOLD: Enabling Live Programming for Debugging GUI Applications

Debugging GUI applications is challenging because of the difficult-to-debug state changes caused by asynchronous event handling and user interactions. Live programming, a paradigm where programmers continuously see real-time traces of every execution step as they edit the code, is promising for this context, as it automates the visualization of state changes upon inputs to the program. This paper explores how to design a live programming experience for debugging GUI applications and studies the effects of live programming in this context. Through a formative design exploration, we derive three core concepts for enabling live programming in debugging GUI applications: a UI states timeline, connections between the UI and the code, and automated event recording. We implemented these concepts in UNFOLD, a live programming environment for JavaScript-based GUI applications. A within-subject study with 12 participants shows that, with UNFOLD, participants locate bugs faster in tasks amenable to live programming, leverage liveness when debugging, and deem the tool helpful and easy to use.