https://github.com/xjj59307/visualjs
javascript visual debugging
https://github.com/xjj59307/visualjs
debugger-visualizer javascript
Last synced: about 1 month ago
JSON representation
javascript visual debugging
- Host: GitHub
- URL: https://github.com/xjj59307/visualjs
- Owner: xjj59307
- Created: 2012-11-05T14:59:10.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2014-07-21T08:14:40.000Z (over 11 years ago)
- Last Synced: 2024-04-15T13:16:37.693Z (almost 2 years ago)
- Topics: debugger-visualizer, javascript
- Language: JavaScript
- Size: 16 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
VisualJS
========
Bind visual elements with program dynamic information from `node --debug-brk` using v8 protocol, and make algorithm animation in browser using d3.js
## Installation and Running
1. Install project dependencies with `npm install`.
2. Start debugger on target with `node app file-to-debug.js`.
3. Open http://localhost:3000/.
## Example
The javascript program generates a math expression tree.
```js
// Generate a math expression tree with height 4.
var generate = function(depth) {
// Every leaf is valued 1.
if (depth > 2) return 1;
var operator = Math.floor(Math.random()*10) % 4;
return { op: operator, left: generate(depth+1), right: generate(depth+1) };
};
var root = generate(0);
var left = root.left;
var right = root.right;
```
The script showed how to create program driven visualization.
```
operator: pattern {
exec plus when (self.op === 0),
exec minus when (self.op === 1),
exec times when (self.op === 2),
exec divide when (self.op === 3),
exec value when (typeof self === 'number')
}
plus: action {
create node=tree_node(label = '+'),
create tree_edge(from = parent, to = node),
next self.left(op = '+', parent = node),
next self.right(op = '+', parent = node)
}
minus: action {
create node=tree_node(label = '-'),
create tree_edge(from = parent, to = node),
next self.left(op = '-', parent = node),
next self.right(op = '-', parent = node)
}
times: action {
create node=tree_node(label = '*'),
create tree_edge(from = parent, to = node),
next self.left(op = '*', parent = node),
next self.right(op = '*', parent = node)
}
divide: action {
create node=tree_node(label = '/'),
create tree_edge(from = parent, to = node),
next self.left(op = '/', parent = node),
next self.right(op = '/', parent = node)
}
value: action {
create node=tree_node(label = self),
create tree_edge(from = parent, to = node)
}
```
Screenshot of above example.
