Visual OO Debugger (Folgearbeit)

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. In the autumn term of 2021, as our term project, we created the VS Code extension Visual OO Debugger, VOOD for short, whose goal it was to ease the process of learning and teaching the concepts of object-oriented programming. It achieves this by using debugger information at runtime to visualize objects and variables in a graph.

The goal of this project is to extend VOOD with more useful features, as well as adapt the code to facilitate further extension. The current library used for visualization, vis.js, is a great starting point, but it has its limitations. Thus, the main feature of this project is to add the option to change the visualization style. Currently, only Java is supported by VOOD. While the support of other languages is out of scope, it should be possible to add support for them. Since the Java specific parts are intertwined with the rest of the debugger, the code must be refactored to separate them.

The result was a new version of VOOD with many new features and improvements. As for the main feature, a new visualization was added, utilizing the library JointJS. JointJS was already evaluated in the term project and was deemed fit as an alternate visualization. It offered more flexibility for customization but at the cost of more complexity. Another new feature was the option to choose a stack frame of the call stack in a dropdown and visualize it. Hitherto, the topmost stack frame was always used for the visualization and other stack frames were discarded. With the growth of the graph, it becomes more and more confusing and polluted with information, which the user might not want. Two features were added to counteract this problem. By clicking on a node, it collapses with its referenced nodes, and they form a cluster. Those clusters can be opened either by clicking on them separately or by clicking the left button in the upper right-hand corner to open all clusters at once. The second feature involves the right button in the upper right-hand corner. By dragging a node or cluster of nodes over this button, they can be hidden completely from the visualization. And by clicking that button, all hidden nodes and clusters are displayed again. These are just a fraction of the features and improvements implemented in this project.