Code Visualizer

Dept. of Computer Science and Engineering, Gokaraju Rangaraju Institute of Engineering and Technology, Hyderabad, India

Abstract

Grasping the runtime behaviour of software, especially how data evolves and control flows, is essential but becomes progressively difficult as software complexity increases. Conventional debugging approaches, such as using print statements or text-based debuggers, frequently fail to deliver adequate insight into the dynamic states of intricate data structures like nested collections, custom objects, and their interconnections. This constraint can hinder effective debugging for developers and present considerable challenges for students acquiring programming concepts. To address these issues, this paper introduces the Code Visualizer, an interactive, web-based tool aimed at offering a clear, step-by-step visualization of Python program execution. The visualizer enables users to carefully track changes in variables, scopes, and the call stack in real time. It visually displays fundamental Python data structures such as lists, dictionaries, sets, deques, and user-defined objects, along with their memory references, thereby elucidating concepts like object identity and aliasing. The architecture of the system is client-server based, featuring a backend built with Python Flask that utilizes Python’s bdb (Basic Debugger) module for detailed execution tracing, alongside a responsive frontend created using HTML (HyperText Markup Language), CSS (Cascading Style Sheets), JavaScript, and SVG (Scalable Vector Graphics) for vibrant visualization.