1

Eran Shaim

B.Sc. Computer Science

Elbit Systems

Rotem Kellner

B.Sc. Information Sys. Eng.

Augury

Online Visual Debugger for C

Prof. Dan Geiger

Dr. Jonathan Yaniv

Motivation

2

3

Students

• Hard to understand C for the 1^st time � ⇒ especially if you can’t “see” it.

Teachers

• Write slides that help visualize C.

⇒ hard work, not flexible.

What if they could “see” C?

Our Solution

4

• Online visual debugger for C�
• First of its kind!�
• No installation required!�
• Simply enter see-c.com

5

Demo

6

Features

7

1.�

Convenient Editor for C

• C syntax highlighting
• Easy-to-load code samples
• Including all code samples from “Intro to CS” (234114/7)

Code Editor

2.

​

Fully Functional Debugger��(and more!)

• Standard run & debug modes
• breakpoints (via editor), step-forward, continue, …

���

• NEW: Step back into history
• view previous states, without changing the history

9

Debugger

3.

​

Visual Display

• Type indicated by cell color.
• int, double, char, ...��
• Cells highlight on change��
• Displayable metadata
• address, size in bytes…�
• Non-initialized variables �marked as garbage

10

Variable display

3.

​

Visual Display

• Easy, scrollable display�

​

​

• Auto-focus on cell change
• configurable via settings

​

• Supports 2D arrays

Array display

3.

​

Visual Display

• Pointers actually point on objects
• The user can “minimize” the pointers, just like windows

​

• Pointers can point on other pointers

12

Pointer display

4.

​

Stack Inspection

• Visual display of the function stack
• exactly as imagined

​

• Ability to browse through functions
• ideal for recursions

​

• Values are always updated

13

Stack inspection

Infrastructure

14

Server

Client

Each user runs its code on�a separate instance of GDB.�

See-C runs on NodeJS. CompilexJS compiles the code, and GDBJS communicates with GDB.

15

Server

ExpressJS

GDBJS

CompilexJS

Client

View

See-C Controller

Model

See-C �Logic

Developed using AngularJS. �C editor is based on Ace editor.

Challenges & Future Work

16

UI / UX

Challenges:

• Display large arrays
• Display 2D arrays
• Display pointers

​

​

Future work:

• Improve variable arrangement on screen
• Customizable object display (Hanoi towers)
• Accept input from file
• Support enum display

17

Backend

Working with GDB

Challenges:

• Enabling step back into history
• Support stack inspection of previous function calls
• Security & infinite loops

Future work:

• Prefetching steps

​

​

Challenges:

• Feeding user input to GDB / receiving output from GDB
• Identifying function entry
• Identifying garbage values

Future work:

• Support global variables
• Support memory examination (malloc)

​

18

Advanced Syntax Parsing

Challenges:

• Classification of pointer arguments
• Does x point to an int? an array?��
• Our solution only covers the following:

​

​

​

Future work:

• Improve classification of pointer arguments
• Can we classify the object based on the function code?
• Index detection: identify that an integer represents �an index inside an array.

19

int f(int* x) { … }

int f(int arr[4]) { … }

Usage

20

Usage

21

“המתרגלים כבר השתמשו באתר כדי להציג דברים והיו�מאוד מרוצים … באמת קיבלנו משובים חיוביים מאוד מהסטודנטים.�נראה שהאתר ממש עזר להבין C ולדבג."

נחשון כהן, מתרגל אחראי

• Positive reviews from students and TAs:

• See-C is being used all over the world!

Thank You!�Questions?

22