You can play with a live version here: http://people.rit.edu/bcw7044/tools/exejs/

This is a tool for visualizing Javascript as it executes in a web browser. After supplying the script, the user can watch the computer execute each line of code, and can view a heatmap of the finished code.

A common programming exercise is tracing a piece of code through its execution. While doing this by hand can be useful for small, educational pieces of code, it is horribly impractical to do for larger codebases. Since the computer is already executing the code, why not let the computer do all of the tracing, and present a visualization of that trace to the user. All that’s needed is a way to detect where the computer is in its execution. For sanity, I chose to represent execution location as a line number. Since most, well formed Javascript has roughly one statement per line, this creates a relatively unambiguous metric for process location. The visualization itself is an animated heat map of these lines. The viewport follows one brightly lit line (marking the current line) as it weaves its way through the program. As it goes, it leaves behind a trail of color, which gradually builds to form the color-coded heat map.

The execution detection is done by injecting callbacks before (or in) every javascript statement. This is done with UglifyJS2, which creates a syntax tree from the users Javascript. This tree is then modified by adding new nodes which define the various callbacks, and is recompiled to Javascript text.

As always, this project can also be found on my GitHub


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s