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.