Abstract:
The development process for every high-level programming language is heavily
dependent on integrated development environments (IDEs) or code editors, which allow software
engineers to write code efficiently in terms of time consumption, clean code, and debugging.
These tools are in demand for numerous reasons, including auto-completion, extensions, built-in
artificial intelligence that memorizes code patterns, built-in debuggers, and readability. Almost all
of the listed bullet points share one common objective, which is to alleviate the coding process
for advanced users.
However, during the learning process and acquisition of unknown information, priorities
change. As a result, syntax and knowledge of the underlying processes of syntax take precedence
over time efficiency and clean code. Moreover, the presence of those listed features can make the
study process overwhelming and tedious for students, as they need to familiarize themselves with
the concepts of IDEs, code editors, compilers, and debuggers before studying the programming
language.
It is worth mentioning that visualization is crucial in the debugging activity, since the
survey conducted as a part of our research shows that 75 students out of 96 students prefer
visualization during studying rather than plain text. We believe, visualization is particularly
important when students start dealing with computer science concepts such as memory
allocation, data structure behaviors when core methods are called, and finally, with algorithms.
IDEs and code editors provide simple tables as visualizations in debugging procedures, which
may not be intuitive at first glance.
Another problem mentioned by professors is the distinction of hardware systems that
students use. This distinction reveals the problem of installing components that work only for
certain hardware systems. For instance, gdb is not suitable for new ARM circuits, whereas LLDB
works properly. Meanwhile, for x86 GDB works correctly.
In several courses of the School of Engineering and Digital Sciences, first-year students
who take introductory courses related to high-level programming languages tend to use IDEs and
code editors. Some of those courses are Engineering 101, CSCI 151, and CSCI 152. Students in
those courses have faced similar problems as mentioned above. They spend time ineffectively
downloading and installing components, instead of spending the same time learning actual
programming. The objective of this thesis is to present a resolution for developing a
comprehensive application, which allows for the visualization of the debugging process. To
achieve this objective, the optimal technologies for the application will be assessed, comparing
network protocols like HTTP and WebSocket, as well as examining statelessness and
statefulness. The role of threads in this process will also be explored. For compiling and
debugging, GCC and GDB were utilized respectively. Furthermore, the concept of a Process will
be introduced to run the GCC/GDB process separately, and Input/Output streams will be
explained. Finally, the thesis will explore parsing GDB responses and rendering them as a React
component to provide an easily understandable visualization.