提问人：Vishawjeet -124 提问时间：11/16/2023 更新时间：11/22/2023 访问量：36
使用 React 和 Socket.io 探索 Node 中的实时代码执行可视化.js
Exploring Real-time Code Execution Visualization in Node.js with React and Socket.io
问：
我目前正在从事一个涉及 Node.js 中实时代码执行可视化的项目，在前端使用 React 和 Socket.io 进行通信。关键组件包括用户编写的代码输入、执行堆栈、与外部服务的交互、处理异步进程和回调队列、事件循环执行以及显示输出。
挑战：
在获取与客户端可视化同步的执行上下文方面，我面临着一个挑战。如何访问 Node.js 中的执行上下文并高效地将其实时发送回客户端？我的目标是在客户端代表分步过程。
具体问题：
是否可以访问 Node.js 中的执行上下文以进行可视化？ 将执行上下文实时发送回客户端的最佳实践是什么？ 是否有任何推荐的库或工具可用于在 Node.js 环境中实现实时代码执行可视化？ 我非常感谢您能分享的任何见解、经验或建议！请随时提供代码片段、参考资料或任何可能有助于应对这一挑战的资源。
答：
0赞
Pulkit Kumar
11/21/2023
#1
您可以查看下面的链接，那里也做了类似的事情。http://latentflip.com/loupe
评论
0赞
Vishawjeet -124
11/21/2023
感谢您的反馈，但它没有按预期工作。它是在客户端运行的静态代码（您不能编写自己的代码来使用 promise 和 api ）。
0赞
dubes
11/21/2023
欢迎来到 SO！你能提供更多关于你的答案的背景吗？该链接可能会在未来消亡，提供更多上下文甚至代码（如果适用）有助于确保答案经得起时间的考验。另请参阅有关撰写好答案的相关指南以获取更多提示！
0赞
hackape
11/21/2023
#2
你要做的是一项相当具有挑战性的工作。我曾经有过类似的想法并进行了调查，尽管我从未找到实际实施它的时间/动力，但我很乐意与您分享我的发现。
无法在运行您尝试检查的代码的 JS 程序中获取执行上下文信息。但这可以从另一个程序中获得。为了便于讨论，我们将第一个 JS 程序称为 sandbox，将第二个 JS 程序称为 inspector。
如果你曾经使用过 JS 调试器，从 Chrome 开发工具或 VS Code 的调试器面板，你应该已经意识到调试器本身是一个应用程序（一个检查器程序），它实现了你想要的东西。它可以暂停另一个 JS 程序的执行并检查其执行上下文信息。
这是通过 V8 的 Devtools 协议完成的，特别是调试器域。
基本上，您需要使用 flag 启动沙盒。然后，编写遵循 Devtools 协议的检查器程序，这两个程序可以通过 websocket 连接开始通信。node --inspector target.js
检查器应向沙盒发出或命令，并侦听 Debugger.paused 事件以读取执行上下文信息。Debugger.pauseDebugger.stepOverevent.callFrames
我知道 VS Code 和 Chrome 的嵌入式调试器 GUI 都是用 JS/TS 实现的，但它们的代码库并不复杂，不确定是否有人能通过阅读这些内容来磨练。尽管如此，它们仍然是开源的，可以用作参考。我建议从阅读 Devtools 协议本身开始，然后自己进行实验。
评论