Visual OO Debugger

Cardillo, Gino and Schürmann, Pascal and Lagadec, Alexandre (2022) Visual OO Debugger. Other thesis, OST Ostschweizer Fachhochschule.

[thumbnail of HS 2021 2022-SA-EP-Cardillo-Schürmann-Lagadec-Visual OO-Debugger for Java.pdf] Text
HS 2021 2022-SA-EP-Cardillo-Schürmann-Lagadec-Visual OO-Debugger for Java.pdf - Supplemental Material

Download (2MB)


Object-oriented programming can be a challenge for unexperienced or new developers. The relations between objects, variables, and the concept of call-by-reference in methods is difficult to comprehend for a lot of people, sometimes even for more experienced developers. Teaching object-oriented programming can be just as challenging as learning it. One of the best ways to teach this topic, is to visualize the relations between objects and variables. Creating such visualizations is time consuming.
The goal of this project is to create a tool for developers, with any level of experience, as well as teachers, to ease the process of learning and teaching the concepts of object-oriented programming. This tool uses debugger information at runtime to visualize objects and variables in a graph. The nodes of the graph represent variables and objects while the edges represent references between variables and objects, as well as references between two objects.
The result was an extension for the widely used and free IDE Visual Studio Code. For the visualization of the graph, we used the open-source visualization library vis.js. In case of an object, a node consists of the name of the class in parentheses and, if present, every instance field with a primitive data type including its value. References to other objects are displayed with edges/arrows to other nodes. In case of a variable referencing an object or null, a node simply contains the name of the variable. A variable with a primitive data type contains the type, name of the variable and the value. Newly added nodes and edges are colored in yellow. Multiple options to export the visualization were implemented, as a PNG, PlantUML or GraphViz of the current state or as a GIF of multiple steps. Using the two buttons in the upper left-hand corner of the debugger view, it is possible to load the previous/next state of the visualization, all the way back to the first visualization.

Item Type: Thesis (Other)
Subjects: Topics > Internet Technologies and Applications > Visualization
Area of Application > Development Tools
Area of Application > Academic and Education
Technologies > Programming Languages > TypeScript
Metatags > IFS (Institute for Software)
Divisions: Bachelor of Science FHO in Informatik > Student Research Project
Depositing User: OST Deposit User
Thesis advisor
Stocker, Mirko
Date Deposited: 20 Apr 2022 08:51
Last Modified: 20 Apr 2022 08:51

Actions (login required)

View Item
View Item