CodeLens: An Interactive Tool for Visualizing Code Representations

TL;DR

CodeLens is an interactive, web-based tool that visualizes multiple types of code representations across various programming languages, aiding developers in understanding and exploring code structures for software engineering and machine learning tasks.

Contribution

It introduces a universal visualization environment supporting multiple code representations and languages, filling a gap in existing tools.

Findings

Supports Java, Python, JavaScript

Visualizes tokens, AST, DFG, CFG

Enhances understanding of code structures

Abstract

Representing source code in a generic input format is crucial to automate software engineering tasks, e.g., applying machine learning algorithms to extract information. Visualizing code representations can further enable human experts to gain an intuitive insight into the code. Unfortunately, as of today, there is no universal tool that can simultaneously visualise different types of code representations. In this paper, we introduce a tool, CodeLens, which provides a visual interaction environment that supports various representation methods and helps developers understand and explore them. CodeLens is designed to support multiple programming languages, such as Java, Python, and JavaScript, and four types of code representations, including sequence of tokens, abstract syntax tree (AST), data flow graph (DFG), and control flow graph (CFG). By using CodeLens, developers can quickly visualize the specific code representation and also obtain the represented inputs for models of code. The Web-based interface of CodeLens is available at http://www.codelens.org. The demonstration video can be found at http://www.codelens.org/demo.