Unfolding State Changes via Live State-First Debugging
summary
Implements a live state-first debugger called Unfold for web GUIs that records and replays user traces, shows a timeline of changed UI states, links each state to the exact lines of JavaScript that produced it, and highlights surprising counts like state five and six where a popup reappears due to event bubbling. A small user study (N=12) compares Unfold to browser devtools, finds faster bug localization (0.9 and 15.7 minute differences, one statistically significant), and reports the tool as usable and helpful.
AI-written summary · about
chapters (11)
- 0:00Live state-first debugging intro
- 3:17Traditional debugging limits
- 5:27State-first debugging paradigm
- 5:47Unfold GUI debugging demo
- 13:39Unfold design rationale
- 15:25Unfold user study evaluation
- 18:41Future work open questions
- 23:48Summary and conclusion
- 24:53Q&A: State-first terms
- 26:21Q&A: Non-UI debugging
- 27:51Q&A: Related work & visuals
