Exploring Real-time Code Execution Visualization in Node.js with React and Socket.io

Question

I'm currently working on a project involving real-time code execution visualization in Node.js, using React on the front end with Socket.io for communication. The key components include user-written code input, an execution stack, interaction with external services, handling async processes and the callback queue, event loop execution, and displaying output.

Challenge: I'm facing a challenge in obtaining the execution context for synchronization with the client-side visualization. How can I access the execution context in Node.js and efficiently send it back to the client in real-time? My goal is to represent the step-by-step process on the client side.

Specific Questions:

Is it possible to access the execution context in Node.js for visualization purposes? What are the best practices for sending the execution context back to the client in real-time? Are there any recommended libraries or tools for achieving real-time code execution visualization in a Node.js environment? I would greatly appreciate any insights, experiences, or suggestions you can share! Feel free to provide code snippets, references, or any resources that might help tackle this challenge.

Answer 1

What you're trying to do is a quite a challenging job. I once had a similar idea and did my investigation, although I never found the time/motivation to actually implement it, I'd love to share my findings with you.

It's not possible to get the execution context info inside the JS program that run the code you're trying to inspect. But it's possible from another program. For ease of discussion, let's call the first JS program the sandbox, and the second one the inspector.

If you've ever used JS debugger, from Chrome devtools or VS Code's debugger panel, you should've realized that the debugger itself is an app (an inspector program), that implements just what you want. It can pause another JS program's execution and inspect its execution context info.

This is done through V8's Devtools Protocol, specifically the Debugger domain.

Basically, you need to start the sandbox with node --inspector target.js flag. And then you write your inspector program that follows the Devtools Protocol, and the two programs can start talking over a websocket connection.

Inspector should issue Debugger.pause or Debugger.stepOver command to the sandbox, and listen for Debugger.paused event to read off event.callFrames for execution context info.

I know that both VS Code and Chrome's embedded debugger GUI is implemented in JS/TS, but their codebases are no joke complicated, not sure anyone can grind through reading those. Still they're open-sourced and can be used as reference. I'd advice start from reading the Devtools Protocol itself, and experiment on your own.

Answer 2

you can take a look on below link similar thing is done there. http://latentflip.com/loupe