MCFLY: Time-Travel Debugging for the Web John Vilk, Emery D. Berger James Mickens Mark Marron University of Massachusetts Amherst Harvard University Microsoft Research fjvilk,
[email protected] [email protected] [email protected] Abstract Time-traveling debuggers offer the promise of simplifying debugging by letting developers freely step forwards and backwards through a program’s execution. However, web applications present multiple challenges that make time- travel debugging especially difficult. A time-traveling de- bugger for web applications must accurately reproduce all network interactions, asynchronous events, and visual states observed during the original execution, both while stepping Figure 1. All major web browsers separate web applica- forwards and backwards. This must all be done in the con- tion computation (JavaScript engine) from I/O (Layout text of a complex and highly multithreaded browser runtime. Engine). MCFLY both synchronizes and maintains visibil- At the same time, to be practical, a time-traveling debugger ity into the items shown in gray (the JavaScript engine, the must maintain interactive speeds. multithreaded layout engine, and the screen), all at interac- This paper presents MCFLY, the first time-traveling de- tive speed. bugger for web applications. MCFLY departs from previous approaches by operating on a high-level representation of the browser’s internal state. This approach lets MCFLY provide accurate time-travel debugging—maintaining JavaScript driven settings like the web, bug symptoms can manifest far and visual state in sync at all times–at interactive speeds. from their root causes. MCFLY’s architecture is browser-agnostic, building on web There are two widely used approaches to find these bugs: standards supported by all major browsers.