Understanding JavaScript Event-Based Interactions with Clematis

Web applications have become one of the fastest-growing types of software systems today. Despite their popularity, understanding the behavior of modern web applications is still a challenging endeavor for developers during development and maintenance tasks. The challenges mainly stem from the dynamic, event-driven, and asynchronous nature of the JavaScript language. We propose a generic technique for capturing low-level event-based interactions in a web application and mapping those to a higher-level behavioral model. This model is then transformed into an interactive visualization, representing episodes of triggered causal and temporal events, related JavaScript code executions, and their impact on the dynamic DOM state. Our approach, implemented in a tool called Clematis, allows developers to easily understand the complex dynamic behavior of their application at three different semantic levels of granularity. Furthermore, Clematis helps developers bridge the gap between test cases and program code by localizing the fault related to a test assertion. The results of our industrial controlled experiment show that Clematis is capable of improving the comprehension task accuracy by 157% while reducing the task completion time by 47%. A follow-up experiment reveals that Clematis improves the fault localization accuracy of developers by a factor of two.

[1]  Arie van Deursen,et al.  Understanding Ajax applications by connecting client and server-side execution traces , 2012, Empirical Software Engineering.

[2]  Arie van Deursen,et al.  A Controlled Experiment for Program Comprehension through Trace Visualization , 2011, IEEE Transactions on Software Engineering.

[3]  Jon Howell,et al.  Mugshot: Deterministic Capture and Replay for JavaScript Applications , 2010, NSDI.

[4]  Silviu Andrica,et al.  WaRR: A tool for high-fidelity web application record and replay , 2011, 2011 IEEE/IFIP 41st International Conference on Dependable Systems & Networks (DSN).

[5]  Andreas Zeller,et al.  Locating causes of program failures , 2005, Proceedings. 27th International Conference on Software Engineering, 2005. ICSE 2005..

[6]  Shriram Krishnamurthi,et al.  Automated Fault Localization Using Potential Invariants , 2003, ArXiv.

[7]  Koushik Sen,et al.  Jalangi: a selective record-replay and dynamic analysis framework for JavaScript , 2013, ESEC/FSE 2013.

[8]  Iris Vessey,et al.  Expertise in Debugging Computer Programs: A Process Analysis , 1984, Int. J. Man Mach. Stud..

[9]  Ali Mesbah,et al.  Guided Mutation Testing for JavaScript Web Applications , 2015, IEEE Transactions on Software Engineering.

[10]  Janusz W. Laski,et al.  Dynamic Program Slicing , 1988, Inf. Process. Lett..

[11]  Carlo Ghezzi,et al.  Mining behavior models from user-intensive web applications , 2014, ICSE.

[12]  Arie van Deursen,et al.  Connecting Traces: Understanding Client-Server Interactions in Ajax Applications , 2010, 2010 IEEE 18th International Conference on Program Comprehension.

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

[14]  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).

[15]  Susan Horwitz,et al.  Using Static Analysis to Reduce Dynamic Analysis Overhead , 2005, Formal Methods Syst. Des..

[16]  Arie van Deursen,et al.  Invariant-Based Automatic Testing of Modern Web Applications , 2012, IEEE Transactions on Software Engineering.

[17]  Jan Carlson,et al.  Generating Feature Usage Scenarios in Client-Side Web Applications , 2013, ICWE.

[18]  Arie van Deursen,et al.  A Systematic Survey of Program Comprehension through Dynamic Analysis , 2008, IEEE Transactions on Software Engineering.

[19]  Tom Pixley.  Document Object Model (DOM) Level 3 Events Specification , 2000 .

[20]  Manu Sridharan,et al.  Effective race detection for event-driven programs , 2013, OOPSLA.

[21]  Saurabh Sinha,et al.  Guided test generation for web applications , 2013, 2013 35th International Conference on Software Engineering (ICSE).

[22]  Shriram Krishnamurthi,et al.  Automated Fault Localization Using Potential Invariants , 2003, ArXiv.

[23]  Ali Mesbah,et al.  AutoFLox: An Automatic Fault Localizer for Client-Side JavaScript , 2012, 2012 IEEE Fifth International Conference on Software Testing, Verification and Validation.

[24]  Alberto Pan,et al.  Automating Navigation Sequences in AJAX Websites , 2009, ICWE.

[25]  Mary Jean Harrold,et al.  Empirical evaluation of the tarantula automatic fault-localization technique , 2005, ASE.

[26]  Frank Tip,et al.  Efficient construction of approximate call graphs for JavaScript IDE services , 2013, 2013 35th International Conference on Software Engineering (ICSE).

[27]  Peng Li,et al.  Script InSight: Using Models to Explore JavaScript Code from the Browser View , 2009, ICWE.

[28]  Marc Roper,et al.  A novel software visualisation model to support software comprehension , 2004, 11th Working Conference on Reverse Engineering.

[29]  Benjamin B. Bederson,et al.  A review of overview+detail, zooming, and focus+context interfaces , 2009, CSUR.

[30]  Frank Tip,et al.  A framework for automated testing of javascript web applications , 2011, 2011 33rd International Conference on Software Engineering (ICSE).

[31]  J. Creswell.  Qualitative inquiry and research design: Choosing among five approaches, 2nd ed. , 2007 .

[32]  George C. Necula,et al.  CCured: type-safe retrofitting of legacy software , 2005, TOPL.

[33]  Porfirio Tramontana,et al.  The DynaRIA tool for the comprehension of Ajax web applications by dynamic analysis , 2013, Innovations in Systems and Software Engineering.

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

[35]  A. Zeller.  Isolating cause-effect chains from computer programs , 2002, SIGSOFT '02/FSE-10.

[36]  Manu Sridharan,et al.  Thin slicing , 2007, PLDI '07.

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

[38]  Barbara G. Ryder,et al.  Practical blended taint analysis for JavaScript , 2013, ISSTA.

[39]  Giovanni Denaro,et al.  ACM Transactions on Software Engineering and Methodology : Volume 22, Nomor 4, 2013 , 2014 .

[40]  Thomas A. Corbi,et al.  Program Understanding: Challenge for the 1990s , 1989, IBM Syst. J..

[41]  David W. Binkley,et al.  Program slicing , 2008, 2008 Frontiers of Software Maintenance.

[42]  Claes Wohlin,et al.  Experimentation in software engineering: an introduction , 2000 .

[43]  Joseph Robert Horgan,et al.  Fault localization using execution slices and dataflow tests , 1995, Proceedings of Sixth International Symposium on Software Reliability Engineering. ISSRE'95.

[44]  Alex Groce,et al.  What Went Wrong: Explaining Counterexamples , 2003, SPIN.

[45]  Frank Tip,et al.  Practical fault localization for dynamic web applications , 2010, 2010 ACM/IEEE 32nd International Conference on Software Engineering.

[46]  Ali Mesbah,et al.  An Empirical Study of Client-Side JavaScript Bugs , 2013, 2013 ACM / IEEE International Symposium on Empirical Software Engineering and Measurement.