Visualizing JavaScript
If you’ve ever written much code you’re probably familiar with holding mental models of a program in your head. Since our heads are somewhat limited you’ve probably also used some sort of aid to help remember, think and communicate about that model. This could be simple and low tech like scribbling down boxes and arrows on a whiteboard or complicated like UML and Visio.
But what if you don’t have the model, either in your head or on paper? What happens when you come to a new codebase where the experts who undertand it are unavailable? Or perhaps the codebase is yours but you’ve forgotten how it all works (this happens to me all the time :)?
One way to solve this problem is to try and extract the program model automatically and use some kind of visualization to help you regain (or gain) your mental model.
There are a few tools out there that do this for static languages like SolidSX for Java and C# which maps code relationships using a ring with lines connecting classes that depend on each other.
There is also a haskell example of visualizing the types from all the packages on Hackage.
Unfortunately as far as I know there’s not much help for dynamic languages like JavaScript. The best us JS coders have for visualization is something like the Firebug DOM exploration window.
Useful and great in a pinch but kinda boring and hard to get a sense of the relationships between objects.
So I decided to attempt to remedy the situation a little. Last spring I took a visualization class and did a little JavaScript project called JSVis.
JSVis walks the global object graph in JavaScript (starting with “window”) and produces a nice node and link visualization that that tries to show the relationships between objects. Nodes represent objects and links show “contains” relationships. The different node colors show the value’s type (strings, numbers, objects).
The easiest way to understand what it does is to try it out. So to pull up an interactive visualization of the JavaScript code running on this very page click here. Note that it probably works best if you’re using Firefox since some default object filtering is currently Firefox specific.
More details on the design and rational can be found in the report if you’re interested.
You can also find all the code over at the github project page.