WEB-BASED BYTECODE INTERPRETER VISUALIZATION

Understanding the intricacies of bytecode generation and interpretation is a fundamental yet challenging aspect of compiler construction education. Traditional teaching methods often rely on theoretical material, which can obscure the dynamic behavior of bytecode interpreters, making it difficult for students to grasp how high-level source code translates into low-level bytecode and how bytecode interpreters execute this low-level code. To address this, we implemented a web-based visualization tool designed to enhance comprehension by allowing users (developers,
educators, and students) to interactively step through bytecode execution in an intuitive and visually engaging way. Our tool features a side-by-side display of high-level source code and its corresponding bytecode to clarify code generation for novices. A key component is the animated memory visualization, which illustrates memory changes within the bytecode interpreter. Animations intuitively display operations like data movement, heap object manipulation, and data mutation. Dynamic highlighting of symbol information (such as variable names and types) and
control flow structures (such as if or while statements as well as function calls) clearly shows the meaning of bytecode and its effects. Users can navigate forward and backward through the bytecode execution, in addition to leveraging jump-to-position functionality for precise control, enabling in-depth exploration of program behavior. To ensure flexibility, we developed an adaptation framework based on a custom domain-specific language, which allows educators to define visualizations for various bytecode formats, enabling our tool to support different educational contexts. By providing a purpose-built interface for both educators and students, our tool
supports live teaching, self-directed learning, and debugging of student-implemented compilers, fostering a deeper understanding of bytecode execution dynamics.