TitleExplaining visual changes in web interfaces
Publication TypeConference Paper
Year of Publication2015
AuthorsBurg B, Ko AJ, Ernst MD
Conference NameUIST 2015: Proceedings of the 28th ACM Symposium on User Interface Software and Technology
Pagination259–268
Date or Month PublishedNovember
Conference LocationCharlotte, NC, USA
AbstractWeb developers often want to repurpose interactive behaviors from third-party web pages, but struggle to locate the specific source code that implements the behavior. This task is challenging because developers must find and connect all of the non-local interactions between event-based JavaScript code, declarative CSS styles, and web page content that combine to express the behavior. \par The Scry tool embodies a new approach to locating the code that implements interactive behaviors. A developer selects a page element; whenever the element changes, Scry captures the rendering engine's inputs (DOM, CSS) and outputs (screenshot) for the element. For any two captured element states, Scry can compute how the states differ and which lines of JavaScript code were responsible. Using Scry, a developer can locate an interactive behavior's implementation by picking two output states; Scry indicates the JavaScript code directly responsible for their differences.
Downloadshttps://github.com/burg/replay-staging/ Timelapse implementation https://homes.cs.washington.edu/~mernst/pubs/dom-tracing-uist2015.pdf PDF https://homes.cs.washington.edu/~mernst/pubs/dom-tracing-uist2015-slides... slides (PDF)
Citation KeyBurgKE2015