When I was building the Visualizer, I needed a way to monitor functions as they run. I messed around with a few different approaches and I eventually landed on a solution that I thought was super cool.
I was thrilled with how the final solution turned out — so much so that I wanted to showcase it separately from the Visualizer website. I wanted a place where users could write their own functions, debug them, and run them against whatever inputs they wanted. Hence, Playground was born.
The app revolves around the
debugger statement. Using the
debugger statement, users can create snapshots of their functions and see the values of internal variables at any point in time.
The logic to make this work is split in two parts — code analysis and code evaluation.
The first part is code analysis — how do you capture and expose the function's internal data? To accomplish this, I leveraged Babel's plugin APIs to modify the program source code, replacing every instance of debugger with a custom snapshot helper function.
After modifying the source, the next step is to evaluate the code. In Playground, the code evaluation is done off the main thread using a web worker. This means the evaluation process doesn't block the user from interacting with the app! It also allows for features such as timeouts to prevent code from running indefinitely.
My biggest takeaway from this project was the power of web workers — how they can be used to offload expensive computations and improve the overall user experience of the app. It was also interesting to see how Babel works under the hood, by using their lower-level APIs myself. All in all, this project was a fun exercise in using some lesser-known web technologies to solve real problems.