Loading...
Thumbnail Image
Item

MetropolJS: Visualizing and debugging large-scale JavaScript program structure with treemaps

Abstract
As a result of the large scale and diverse composition of modern compiled JavaScript applications, comprehending overall program structure for debugging is challenging. In this paper we present our solution: MetropolJS. By using a Treemap-based visualization it is possible to get a high level view within limited screen real estate. Previous approaches to Treemaps lacked the fine detail and interactive features to be useful as a debugging tool. This paper introduces an optimized approach for visualizing complex program structure that enables new debugging techniques where the execution of programs can be displayed in real time from a bird's-eye view. The approach facilitates highlighting and visualizing method calls and distinctive code patterns on top of code segments without a high overhead for navigation. Using this approach enables fast analysis of previously difficult-to-comprehend code bases.
Type
Conference Contribution
Type of thesis
Series
Citation
Scarsbrook, J. D., Ko, R. K. L., Rogers, B., & Bainbridge, D. (2018). MetropolJS: Visualizing and debugging large-scale JavaScript program structure with treemaps. In Proceeddings of the 26th International Conference on Program Comprehension (ICPC 2018) (pp. 389–392). New York, NY, USA: ACM. https://doi.org/10.1145/3196321.3196368
Date
2018
Publisher
ACM
Degree
Supervisors
Rights
©2018 copyright held by the authors.