Dissector

• 

  Tracking primitives and objects together

• 

  Debugging some basic javascript code

• 

  Debugging an array

Inspiration

Typically, debugging code isn't intuitive or enjoyable. Trying to find relevant values, especially when your code involves many objects, arrays, and nested object, as is typical in web programming, is a slog and a chore. We've always wanted to build a solution to this problem that would both let us get a better grasp on how our programs were running.

What it does

Dissector provides a browser-based text editor for code that you'd like to debug. After writing or submitting your code, you can enter in tracker values that you'd like to see visualized at every step within the program. With that done, Dissector will run your code in a sandboxed environment, keeping track of your trackers and displaying the object hierarchy and relationships for those tracked objects. Dissector also provides a display of the console output of the code that you run to help with debugging. After running the code, you can flip through every state in the code, and see what the object relationships and console output looked at that state.

How we built it

We used standard HTML/CSS/Javacsript for this project. Our text editor is the open source Ace text editor. Our object display used HTML canvas rendering. We run the user-submitted code in an invisible sandboxed iframe within the website, ensuring security and accurate execution.

Challenges we ran into

The task of taking user submitted code, altering it to get all of the relevant data out of its execution, and running it in a sandboxed manner is not trivial. This requires preprocessing of the code to add relevant statements to communicate between the main webpage and the iframe. Rendering was also a challenge, since all of it was done from scratch, without utilizing any outside graph-rendering libraries. The graph needed to display information continuously across different states, without objects jumping to different locations, with relations being potentially added or removed in every state.

Accomplishments that we're proud of

We're proud that we were able to overcome the challenges we faced. In addition, we're proud of the educational benefit Dissector will hold for those learning programming in the future. There's a lack of visual learning resources for learning programming in the current day, and there's especially a need for real-time resources that intuitively teach programming concepts. Dissector fills that gap perfectly.

What we learned

Sometimes it may be better to utilize outside libraries for certain functionalities that already exist. Implementing all of the rendering for this project from scratch was fun and interesting, but not the most efficient use of time.

Built With

• css
• html
• javascript
• node.js