C Memory and Visualization

Inspiration

We wanted to teach the newcomers in C on how pointers work, because that's a topic many find confusing.

What it does

Most of the website contains standard educational material. The unique feature is a debugger that allows you to run a program and see what happens step by step.

How we built it

I used pygdbmi (a Python package for GDB’s Machine Interface) to build the core of the debugger. From there, I wrote helper functions, which were then called through a Flask app whenever an API request was made. The API was triggered by JavaScript, which also updated the HTML with the debugger’s output.

Challenges we ran into

I/O buffering caused issues with printing output. GDB’s Machine Interface required pseudo-terminals to display output, but I didn’t want to create a new TTY because multithreading would make things complicated. At the same time, I didn’t want to print everything in the same terminal because that would quickly become cluttered.

We also had to handle race conditions, which we solved using a delay loop in _treat_response inside helper.py. Another challenge was debugging the “Run to End” button from the frontend perspective, which proved tricky.

Accomplishments that we're proud of

We successfully implemented a debugger from scratch, relying almost entirely on documentation. (Seriously, if you search for “pygdbmi” and check the Videos section, you’ll find only two videos about it.)

What we learned

We gained a deeper understanding of how the GDB debugger works, especially the GDB Machine Interface.

What's next for C Memory and Visualization

I plan to continue developing the project and will keep the current version in a separate branch.

Built With

• css
• flask
• gdb
• html
• javascript
• pygdbmi
• python
• tailwind