INTERACTIVE ONLINE DEBUGGER FOR INTRODUCTORY C++ PROGRAMMING COURSES

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.