Inspiration

While tackling our university courses, we were faced with the task of implementing (and debugging) various data structures. We found that using traditional debuggers or print statements obscures the structure of the data, making testing and debugging code tedious and unintuitive. We were determined to find a way to take advantage of the inherent properties of data structures. With Visually Study Yo Code, you can see the data structure come together as you step through your code.

What it does

Visually Study Yo Code offers gives you the choice of using a graphical depiction of your variables to debug your JavaScript code. By right clicking a variable in the editor, you can open a tab which displays nodes to depict trees, linked lists and custom data structures. Nodes are added, deleted or modified as you step through your code in the debugger, making it easy to find and trace down errors in your algorithms.

How we built it

We created and deployed a Visual Studio Code Extension using the Extension API to let us integrate our new functionality into the editor. The graphical representation is constructed using canvas in HTML and displayed to the user by using a webview. To access the data, we interfaced with Visual Studio Code's Debug Adapter and parsed the information about the variables into a JSON object.

Challenges we ran into

The functionality of our extension was limited by what the Visual Studio Code Extension API provides. While we originally planned to add a command directly to the debugging menu, the ability to add new commands was constrained to the editor. Furthermore, accessing the editors colour themes directly was difficult, so that we decided to limit ourselves to supporting a dark theme.

Accomplishments that we're proud of

We are proud to have completed a project that we would like to use in the future. In contrast to most hackathon projects, we feel like Visually Study Yo Code benefits us directly by letting us create more robust code more quickly.

What we learned

Since we had not made an extension before, we learned how to use the Visual Studio Code Extension API. Since Visually Study Yo Code is focused on debugging, we learned about the debugging architecture used by Visual Studio Code.

What's next for Visually Study Yo Code

Visually Study Yo Code currently only supports debugging in JavaScript. In the future, we will increase the scope of our extension to include other programming languages. Furthermore, we plan to provide support for custom themes for our graphs. By using SVG, we can make our webviews interactive to make debugging even more effective.

Challenges we ran into

The functionality of our extension was limited by what is possible with the Visual Studio Code Extension API. The ability to add new commands was constrained to the editor, so that we had to give up our original plan of right clicking the variables in the debugging menu. Furthermore, accessing the editors colour themes directly was difficult, so that we decided to limit ourselves to supporting a dark theme for the hackathon.

Accomplishments that we're proud of

We are proud to have completed a project that we ourselves would like to use in the future. In contrast to most hackathon projects, we feel like Visually Study Yo Code could benefit us in the future by letting us create more robust code more quickly.

What we learned

We learned how to use the Visual Studio Code Extension API, since we had not made an extension before. Since Visually Study Yo Code is focused on debugging, we learned about the debugging architecture used by Visual Studio Code.

What's next for Visually Study Yo Code

Visually Study Yo Code currently only supports debugging in JavaScript. In the future, we will increase the scope of our extension to include other programming languages. Furthermore, we plan to provide support for custom themes for our graphs. By using SVG, we can make our webviews interactive to make debugging even more effective.

Built With

Share this project:

Updates