McFly: Time-Travel Debugging for the Web

TL;DR

McFly is a novel high-level, browser-agnostic time-travel debugger for web applications that accurately reproduces complex browser states and interactions while maintaining interactive speeds.

Contribution

It introduces a high-level state representation approach for web debugging, enabling accurate, fast, and browser-agnostic time-travel debugging of web applications.

Findings

Achieves accurate state reproduction including network, asynchronous, and visual states.

Operates at interactive speeds suitable for practical debugging.

Built as an extension for Microsoft Edge and integrated into a Microsoft debugger product.

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 debugger for web applications must accurately reproduce all network interactions, asynchronous events, and visual states observed during the original execution, both while stepping forwards and backwards. This must all be done in the context of a complex and highly multithreaded browser runtime. At the same time, to be practical, a time-traveling debugger must maintain interactive speeds. This paper presents McFly, the first time-traveling debugger 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 and visual state in sync at all times - at interactive speeds. McFly's architecture is browser-agnostic, building on web standards supported by all major browsers. We have implemented McFly as an extension to the Microsoft Edge web browser, and core parts of McFly have been integrated into a time-traveling debugger product from Microsoft.