AST (abstract syntax tree) visualization with Esprima

[Ariya Hidayat]

This is less of a development tool and more of an educational tool. I
use a simple tree view to visualize AST (abstract syntax tree) of any
JavaScript code parsed by Esprima. It is helpful to understand some
snippets which are not that obvious and human-parseable. For the
details/examples and screenshots, read my latest blog post:
http://ariya.ofilabs.com/2012/04/javascript-syntax-tree-visualization-with-esprima.html.

To give it a try, go to Esprima live parser demo:
http://esprima.org/demo/parse.html (make sure you use the 'Tree' tab).

Comments and feedback are welcomed. Have some fun!

Regards,

--
Ariya Hidayat, http://ariya.ofilabs.com
http://twitter.com/ariyahidayat

[Cheney, Austin]

Ariya,

This is very cool, but it comes with a performance limitation. I have absolutely no problem using the demo tool in standard syntax mode. However, the tree graph failed on a 6300 line function that I tried and failed again on a 2200 line function. It worked just fine for me on a small 100 line function though.

I will try again later when I have access to a real computer with more than merely 2gb of ram.

Thanks,

Austin Cheney, CISSP, Security+, TS/SCI
Senior Site Optimization Technologist/Analyst

[Ariya Hidayat]

> This is very cool, but it comes with a performance limitation.

If there is an alternative (and liberally licensed) to YUI TreeView
which can deal with large object, I'll be open to change the tree view
component.
Also if I use the tree view incorrectly, I'm happy to accept speed-up patches :)

[Chris Brody]

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
www.jstree.com

Don't know about their performance.