An efficient mechanism of generating call graph for JavaScript using dynamic analysis in web application

Tajkia Rahman Toma Md. Shariful Islam

Institute of Information Technology Institute of Information Technology

University of Dhaka University of Dhaka

Dhaka, Bangladesh Dhaka, Bangladesh

Email: tajkiatoma@gmail.com Email: shariful@univdhaka.edu

Abstract—Web applications are replacing traditional desktop applications in recent years. For web applications, JavaScript is the most extensively used client side programming languages. The large JavaScript code base often makes applications hard to understand, maintain and extend. Call graph is a human understandable program representation that can be used as a basis for maintenance and further extension of the application. In maintenance phase call graph can play a vital role by facilitating developers to easily trace the code that implements a particular feature. There is insufficient tool support for generating call graph for JavaScript. For its dynamic nature, JavaScript call graph generation becomes challenging. We present a dynamic analysis based mechanism to construct call graph for JavaScript in client side web application in this paper. Our evaluation on web applications demonstrates that the technique is precise and the rate of unidentified nodes in call graph is acceptable.

1. INTRODUCTION

Mobility and platform independence has revolutionized web applications in recent years. Structurally, a web application has two processing ends: server side for the data management and business logics implementation, and client side to interact with the user through web browser.

In recent years, web applications are getting more and more user-interactive. Clientsrsquo; needs are fulfilled by a number of features provided in client side being independent of the central server. A feature is a distinguishing characteristic or functionality of an application [1]. A good number of features implemented in client side are independent of server is called fat-client architecture in client-server communication. This makes the application more responsive and the server more capacitive. For the development of interactive features in fat- client application, JavaScript is the most popular scripting language used today (88%, in respect to other client-side programming languages) [2]. A fat client application needs massive JavaScript implementation where most of the code are unstructured.

In the software maintenance phase when a user requests for changes in application they are mostly based on feature. Therefore, developers who are managing change requests, need the code that implements the specific features. In many cases, they browse source code to locate the feature because either there is no documentation or the documentation is outdated. The developers have to go through several files which is time-consuming. In cases where a developer is new in the development team having no previous knowledge about the system, passes through more difficulties. Our main goal is to construct a structural view of the JavaScript code that helps developers in locating feature in an efficient way.

The main contribution of this paper is a refined call graph to structure all the JavaScript functions and their relationships using dynamic analysis. The dynamic nature of JavaScript forces the analysis to be dynamic. The input of our process is test cases of an application from the testing phase. We trace the function calls in runtime executing the test cases. Execution trace of one test case either makes a graph or modifies the graph that already exists. All the execution traces together make the call graph of the full system. The evaluation of our mechanism shows that it can identify satisfiable number of functions among the existing total functions in the system, while the result does not include any wrong detection. The generated call graph can be used as future feature location which is the starting point of impact analysis [3].

The remaining sections of this paper are organized as follows: Section 2 provides an overview of the related terms, and Section 3 describes the motivation with an example. Section 4 presents the related works in the domain. Section 5 describes the proposed method in detail and Section 6 presents the evaluation of the method. Section 7 concludes the whole work with an overview of the whole work and the future plan.

1. OVERVIEW

We have used some domain specific terminologies through- out the paper. For the better readability of the paper we introduce the terminologies and concepts related to our work in the following subsections.

1. Test case

A test case is a combination of test inputs, execution conditions and expected results [4], where the expected resultsare worked out before testing the application for the given test inputs and execution environment. A test case is used to test a particular program path or to test the correct behavior of a functionality or feature of an application. The test input should satisfy the pre-condition before execution and the expected output should satisfy the post-condition after execution.

1. Execution trace

Execution trace is a record of the sequence of instructions executed during the execution of a computer program. It often takes the form of a list of code labels encountered as the program executes [4]. In [5] Andjelkovic et al. defines an execution trace as a sequence of events that represent the important moments in the execution of the program. In our system a trace is a sequence of functions, dynamically collected by executing a given scenario.<!--

剩余内容已隐藏，支付完成后下载完整资料

一种在Web应用程序中使用动态分析生成JavaScript调用图的有效机制

Tajkia Rahman Toma Md. Shariful Islam

Institute of Information Technology Institute of Information Technology

University of Dhaka University of Dhaka

Dhaka, Bangladesh Dhaka, Bangladesh

Email: tajkiatoma@gmail.com Email: shariful@univdhaka.edu

Abstract-Web应用程序近年来正在取代传统的桌面应用程序。对于Web应用程序，JavaScript是最广泛使用的客户端编程语言。大型JavaScript代码库经常使应用程序难以理解，维护和扩展。调用图是一种人类可理解的程序表示，可用作维护和进一步扩展应用程序的基础。在维护阶段，调用图可以通过促进开发人员轻松跟踪实现特定功能的代码来发挥重要作用。没有足够的工具支持来生成JavaScript的调用图。由于其动态特性，JavaScript调用图生成变得具有挑战性。在本文中，我们提出了一种基于动态分析的机制来构建客户端Web应用程序中的JavaScript调用图。我们对Web应用程序的评估表明该技术是精确的，并且调用图中未识别节点的速率是可接受的。

1. 简介

近年来，移动性和平台独立性彻底改变了Web应用程序。 从结构上讲，Web应用程序有两个处理端：服务器端用于数据管理和业务逻辑实现，客户端用于通过Web浏览器与用户交互。

近年来，Web应用程序越来越多地与用户交互。 客户端提供的许多功能独立于中央服务器，满足了客户的需求。 特征是应用程序的区别特征或功能[1]。 客户端实现的大量功能与服务器无关，在客户端 - 服务器通信中称为胖客户端架构。 这使得应用程序响应更快，服务器更具容性。 为了在胖客户端应用程序中开发交互式功能，JavaScript是当今最流行的脚本语言（88％，就其他客户端编程语言而言）[2]。 胖客户端应用程序需要大量的JavaScript实现，其中大多数代码都是非结构化的。

在软件维护阶段，当用户请求更改应用程序时，他们主要基于功能。 因此，管理变更请求的开发人员需要实现特定功能的代码。 在许多情况下，他们浏览源代码以找到该功能，因为没有文档或文档已过时。 开发人员必须经历几个耗时的文件。 如果开发人员是开发团队的新手，之前没有关于系统的知识，则会遇到更多困难。 我们的主要目标是构建JavaScript代码的结构视图，帮助开发人员以有效的方式定位功能。

本文的主要贡献是使用动态分析构建所有JavaScript函数及其关系的精细调用图。 JavaScript的动态特性迫使分析变得动态。 我们流程的输入是测试阶段的应用程序的测试用例。 我们在运行时执行测试用例跟踪函数调用。 一个测试用例的执行跟踪可以生成图形或修改已存在的图形。 所有执行跟踪一起构成整个系统的调用图。 对我们的机制的评估表明，它可以在系统中现有的总函数中识别可满足的函数数量，而结果不包括任何错误的检测。 生成的调用图可以用作未来的特征位置，这是影响分析的起点[3]。

1. 概述
2. 测试用例

测试用例是测试输入，执行条件和预期结果的组合[4]，其中在测试给定测试输入和执行环境的应用程序之前计算出预期结果。 测试用例用于测试特定的程序路径或测试应用程序的功能或特性的正确行为。 测试输入应满足执行前的前置条件，预期输出应满足执行后的后置条件。

1. 执行追踪

执行跟踪是在执行计算机程序期间执行的指令序列的记录。 它通常采用程序执行时遇到的代码标签列表的形式[4]。 在[5] Andjelkovic等人。 将执行跟踪定义为表示程序执行中的重要时刻的事件序列。 在我们的系统中，跟踪是一系列功能，通过执行给定方案动态收集。

1. 调用图

调用图是一个标识计算机程序功能的图表，显示了哪些函数相互调用[4]。 调用图可以是动态的或静态的。 动态调用图是程序执行的精确记录。 因此，动态调用图通常是精确的。 但是，它只描述了程序的一次执行。 静态调用图是一个调用图，表示程序的每个可能的执行。 静态调用图算法通常是近似的，因为它是一个不可判定的问题。 这意味着静态调用图可能会呈现一些可能永远不会发生的关系。

1. 特征

根据IEEE [1]，术语特征意味着功能和非功能属性的区别特征。 虽然根据程序理解社区，开发人员可以访问并且可以看到的特定功能称为功能[6]。 我们在本文中从两个角度使用了术语“特征”，而术语“特征位置”用于表示在源代码中识别位置以实现软件系统功能的活动[3]。

1. 动机示例

Web应用程序的当前趋势正朝着胖客户端架构发展。 胖客户端体系结构是一种服务器 - 客户端体系结构，其中客户端实现了大部分独立于服务器端通信的功能。 在用于Web应用程序的客户端语言中，JavaScript是最常用的语言。 JavaScript是一种弱类型的面向对象语言，它使用基于原型的继承。 JavaScript的功能是第一类对象，变量是动态类型的，即在程序执行过程中可以保存不同类型的值。 这使得在运行时理解呼叫检查和字段访问。 JavaScript中的对象没有固定的属性集。 可以通过分配属性来创建属性，甚至可以删除属性。

Listing 1. JavaScript implementation of Search box

1. (function (helper, undefined) {
2. function findMatches(source, input, matcher) {
3. input = input.toLowerCase();
4. var matches = [];
5. for (var i in source) {
6. var src = source[i].toLowerCase();
7. if (matcher(src, input)) {
8. matches.push(src);

9 }

10 }

11 return matches;

12 }

1. helper.findMatches = findMatches;
2. }(window.helper = window.helper || {}));

15

1. (function (suggestion){
2. var lastInput = undefined;
3. function showSuggestion() {
4. var input = document.querySelector(rsquo;#search-box rsquo;).value;
5. if (input == lastInput) { return; }

21

1. var suggestionContent;
2. if (!input || input.length == 0) {
3. suggestionContent = '';
4. } else {
5. var matches = helper.findMatches( getSuggestionsSet(), input, function ( src, inp) {
6. return src.substring(0, inp.length) ===

inp;

28 });

29 var suggestionContent = buildSuggestionsContent(matches);

30 }

1. setSuggestionsVisible(true);
2. document.querySelector(rsquo;#suggestionsrsquo;).innerHTML

= suggestionContent;

33

34 lastInput = input;

35 }

36

1. function setSuggestion(suggestion) {
2. document.querySelector(rsquo;#search-boxrsquo;).value = suggestion;
3. setSuggestionsVisible(false);

40 }

41

1. function buildSuggestionsContent(matches) {
2. var content = '';
3. for (var i in matches) {
4. content = 'lt;span onclick=rsquo;suggestion. setSuggestion('' matches[i] '') rsquo;gt;' matches[i] 'lt;/spangt;' 'lt;br/gt;';

46 }

47 return content || 'no matches';

48 }

49

1. function setSuggestionsVisible(visible) {
2. document.querySelector(rsquo;#suggestionsrsquo;).hidden =

!visible;

52 }

53

1. suggestion.showSuggestion = showSuggestion;
2. suggestion.setSuggestion = setSuggestion;
3. suggestion.setSuggestionsVisible = setSuggestionsVisible;
4. }(window.suggestion = window.suggestion || {}));
5. (function(search){
6. function showSearchResult() {
7. var searchString = document.querySelector(rsquo;# search-boxrsquo;).value;
8. if (!searchString || !searchString.trim()) {

return; }

62

1. var results = helper.findMatches( getParagraphsSet(), searchString, function (src, inp) {
2. return src.indexOf(inp) gt;= 0;

65 });

66

1. var content = buildSearchResultContent(results);
2. document.querySelector(rsquo;#search-resultrsquo;). innerHTML = content;

69 }

1. function buildSearchResultContent(results) {
2. var content = 'lt;pgt;' results.length ' matches found' 'lt;/pgt; lt;hr/gt;';
3. for (var i in results) {
4. var item = 'lt;divgt;' results[i] 'lt;/divgt; lt; hr/gt;';
5. content = item;

75 }

76 return content;

77 }

1. search.showSearchResult = showSearchResult;
2. }(window.search = window.search || {}));

清单1是搜索功能的JavaScript实现，它搜索在浏览器内存中兑现的文档。 除文档搜索外，还有一项功能可在搜索框中键入时提供建议。 该示例演示了上面提到的JavaScript的一些关键属性。

在第2行中，有一个函数有三个参数。 第三个参数使用第三个参数中的传递值匹配字符串数组中的单词。 因此，第三个参数需要一个函数作为输入。 第26和6

剩余内容已隐藏，支付完成后下载完整资料

资料编号：[19649]，资料为PDF文档或Word文档，PDF文档可免费转换为Word