Visual Debugging in IntelliJ :beetle:

Visual Debugging in IntelliJ :beetle:

A software developer spends a large amount of their time validating and debugging software. Traditionally, debuggers depict information in a text-based format. However, in my opinion, when there are many connected objects, a graphical representation during debugging is easier to comprehend. Thus, I implemented an open-source plugin for IntelliJ IDEA, which visualizes the program state as an object diagram during debugging. The following YouTube video demonstrates the use of the visual debugger. Also, look at the preprint of my research paper about the Visual Debugger tool, published at the IEEE International Conference on Software Maintenance and Evolution (ICSME) 2022.

In many scenarios, graphical representations such as object diagrams are more understandable than textual representations when representing the state of an object-oriented system. You can see the different representations in the following screenshot, which includes an object diagram view for the debugging variables on the right.

Screenshot embedded UI

However, the view above is only a picture that does not allow any user interaction, while you can double-click on variables on the left to load more information about that variable. Consequently, I have developed a browser-based visualization that allows user interaction. One can switch between the two implemented visualizations in the plugin settings.

Screenshot browser UI

The browser will connect via WebSocket to the plugin, such that it will receive live updates when the debugger variables changed due to IDEA input. The UI is open-source and not tied to IntelliJ IDEA and can be used as a debugging view for other IDE’s when debugging object-oriented code. One can also edit the object diagrams generated by the debugger afterward using my object diagram modeler.

For complex debugging scenarios, you can set the initial depth of visualization when using the visual debugger. In addition, you can export the current visualization as an SVG file.

Check the plugin out here if you are curious!