JavaScript development is not easy. Creating solid and reusable code is a very complex task, even for the skilled developer, due to the unique language features that positioned JavaScript in its high rank in front-end development. But software maintenance of such programs can become a challenge, especially for those developers not familiar with the application domain or with the coding style of the initial architecture. The authors propose a software framework that aims at helping JavaScript developers and maintainers to understand the behavior of a web application.

Despite its popularity, not much research in JavaScript behavioral analysis exists. Three characteristics make the language unique: it is weakly typed; it is “used to seamlessly mutate the document object model (DOM) at runtime”; and it is an event-driven language, allowing the registration of listeners to DOM nodes. This third characteristic makes it a language particularly complex to analyze. In fact, events can be triggered by the user, by the asynchronous callbacks from network communications (namely, XmlHttpRequests), and events “can propagate on the DOM tree and trigger multiple listeners according to the event capturing and bubbling properties of the event model.” Of course, testing and debugging tools exist, for example, Firebug. Tools such as Selenium dramatically help the testing, allowing specific web browser drivers to be run in a JUnit context to perform a test. However, both approaches are not useful when dealing with large code bases. Firebug is simply not applicable, and Selenium tests show the failure but not where the failure is located.

The tool presented, Clematis, effectively helps the developer understand the behavior of JavaScript software. It performs on-the-fly code instrumentation in order to obtain a trace of events used to build the behavioral model. The events instrumented are: 1) interposing on DOM events; 2) capturing timeouts and XmlHttpRequests; and 3) recording function traces and return statements. The code instrumentation is made by exploiting a proxy component, and it is performed by wrapping the above events with inline JavaScript functions. The behavioral model is then rendered as a graph and presented to the user using a click+zoom web interface (no plugin required; the whole graphical user interface (GUI) is also implemented in JavaScript). The GUI contains three levels: the user sessions recorded, details of the event, and finally the detailed sequence of events. The GUI also provides integration with Selenium tests: when a test fails, the behavioral model captures the portion of code that caused the failure, avoiding delta debugging.

The effectiveness of the tool is measured with test labs, showing that Clematis improves comprehension task accuracy by 157 percent and reduces task completion time by 47 percent.