Unravel: Rapid Web Application Reverse Engineering via Interaction Recording, Source Tracing, and Library Detection

Professional websites with complex UI features provide real world examples for developers to learn from. Yet despite the availability of source code, it is still difficult to understand how these features are implemented. Existing tools such as the Chrome Developer Tools and Firebug offer debugging and inspection, but reverse engineering is still a time consuming task. We thus present Unravel, an extension of the Chrome Developer Tools for quickly tracking and visualizing HTML changes, JavaScript method calls, and JavaScript libraries. Unravel injects an observation agent into websites to monitor DOM interactions in real-time without functional interference or external dependencies. To manage potentially large observations of events, the Unravel UI provides affordances to reduce, sort, and scope observations. Testing Unravel with 13 web developers on 5 large-scale websites, we found a 53% decrease in time to discovering the first key source behind a UI feature and a 32% decrease in time to understanding how to fully recreate a feature.

[1]  Brad A. Myers,et al.  WebCrystal: understanding and reusing examples in web authoring , 2012, CHI.

[2]  Philip J. Guo,et al.  Two studies of opportunistic programming: interleaving web foraging, learning, and writing code , 2009, CHI.

[3]  Foutse Khomh,et al.  Extracting RESTful services from Web applications , 2012, 2012 Fifth IEEE International Conference on Service-Oriented Computing and Applications (SOCA).

[4]  Wendy E. Mackay,et al.  Cracking the cocoa nut: user interface programming at runtime , 2011, UIST.

[5]  Ali Mesbah,et al.  Understanding JavaScript event-based interactions , 2014, ICSE.

[6]  Steve Souders.  High-performance web sites , 2008, CACM.

[7]  Taylor Martin,et al.  Using Learning Analytics to Understand the Learning Pathways of Novice Programmers , 2013 .

[8]  Brad A. Myers,et al.  FireCrystal: Understanding interactive behaviors in dynamic web pages , 2009, 2009 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC).

[9]  Rob Miller,et al.  Addressing misconceptions about code with always-on programming visualizations , 2014, CHI.

[10]  Michael D. Ernst,et al.  Interactive record/replay for web application debugging , 2013, UIST.

[11]  Simon Breslav,et al.  Mimic: visual analytics of online micro-interactions , 2014, AVI.

[12]  Ivica Crnkovic,et al.  Extracting client-side web application code , 2012, WWW.

[13]  Caitlin Kelleher,et al.  Non-programmers identifying functionality in unfamiliar code: Strategies and barriers , 2009, 2009 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC).

[14]  Caitlin Kelleher,et al.  Dinah: an interface to assist non-programmers with selecting program code causing graphical output , 2011, CHI.

[15]  Brian Burg.  Answering program understanding questions on demand with task-specific runtime information , 2013, 2013 IEEE Symposium on Visual Languages and Human Centric Computing.

[16]  John J. Barton,et al.  Dynamic and graphical web page breakpoints , 2010, WWW '10.

[17]  James Fogarty,et al.  Assieme: finding and leveraging implicit references in a web search interface for programmers , 2007, UIST '07.

[18]  Mitchel Resnick,et al.  “Thick” authenticity: new media and authentic learning , 1999 .

[19]  Brad A. Myers,et al.  Six Learning Barriers in End-User Programming Systems , 2004, 2004 IEEE Symposium on Visual Languages - Human Centric Computing.

[20]  Pierre Dragicevic,et al.  Gliimpse: Animating from markup code to rendered documents and vice versa , 2011, UIST.