- Esprima: JavaScript parser
- Escodegen: AST -> JavaScript generator
- CodeMirror: In Browser Code Editor
- Tangle.js: JavaScript Reactive Documents Library
- Underscore: JavaScript utility functions
- Backbone: JavaScript Framework
- jQuery: JavaScript DOM Library
- Clone this repo
- Within the repo, run
npm install && bower install - run
grunt serverto run the app
At a high level, the app uses Esprima to parse the source code within the code editor, analyzes the source code to extract out variable and function declarations and inserts trace statements, execute the source code, and then visualize the information collected with an interactive interface
Whenever there's a change in the source code, whether this is from the initial load of the template source file or actual editing, and there's no errors detected by JSHint, Esprima is used to parse the valid source code and the Abstract Syntax Tree (AST) is saved, along with other helpers attached to help transform the source code.
Then, variable and function declarations are extracted by traversing the AST. These declarations are subsequently wrapped in models and rendered as high level views of the declarations.
At the same time, scope information for the source code is computed and is then used to produce a list of variables that need to can be traced. The actual tracing generation is laid out in tracer module. The logic under genTraces specifies all the various expression types and how their values should be collected. The inserted trace statements call methods on the tracer to collect information during run time.
The code is run using eval. Here, a reference to the global object _ is also passed in so the underscore library can be used in the source code
The actual execution steps of the code are collected by tracing statements that make side effects and a slider is generated to allow for stepping through of the code path. At each step of the slider, the corresponding state at that step is rendered. There are 2 main ways of displaying this information:
- the scoped variable information are directly displayed as raw JSON
- for specific arrays, a D3 visualization is generated
This project is still in progress, with lots of room for improvement
- Generalizing visualization modules to visualize different kinds of data, such as arrays, objects, etc.
- Optimizing the control flow to be more resilient from errors
- More code transformation tools, such as refactoring
- Better displays of variable information and control flows