Explaining Visual Changes in Web Interfaces
summary
Scry captures DOM subtree snapshots, computed CSS rules and element screenshots whenever a tracked element repaints, then visually diffs states and records a mutation trace of DOM/CSS operations. For two selected states it computes a DOM/CSS diff, slices the mutation dependency graph, and highlights the specific operations with call-stack-backed operations pointing to source lines. Demonstrated on a search‑box and a web Tetris, it works but falls back on tree heuristics for React and is noisy with jQuery.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 1:32Common Questions
- 3:04Scribe
- 8:45Visual State Changes
- 9:19Visual Output Changes
- 10:11Comparing Snapshots
- 10:41Mutation Operations
- 11:43Technical Challenges
- 13:53Conclusion
related talks
30mTesting presentation components visually
29mResponsive Svelte (exploring Svelte's reactivity)
36mReact's Architecture
29mDeveloper and the DOM - A history of manipulation and abstraction
32mFull Disclosure – Visualizing JavaScript with the CSE Machine
35mJavaScript/Web tooling now and tomorrow
20mJavaScript Authoring Tooling
39mDebugging With JS Frameworks