UD5工具箱
Promise 链可视化工具支持哪些浏览器？
本工具支持所有现代浏览器，包括 Chrome 90 及以上版本、Firefox 88 及以上版本、Safari 14 及以上版本和 Edge 90 及以上版本。由于使用了 WebGL 技术渲染三维图形，建议使用最新版本的 Chrome 或 Firefox 以获得最佳体验。不推荐使用 IE 浏览器，因为其不支持 WebGL 2.0 标准。
工具是否需要联网使用？
Promise 链可视化工具完全基于前端技术实现，所有代码逻辑和渲染计算均在浏览器本地执行。首次加载页面后即可离线使用，无需连接互联网。您的代码和分析数据不会上传到任何服务器，确保了代码的安全性和隐私性。
自定义输入的代码有长度限制吗？
自定义场景输入框支持最多 5000 个字符的代码。对于大多数实际项目中的 Promise 链来说，这个长度限制完全够用。如果您的代码超过此限制，建议将其拆分为多个独立的 Promise 链分别进行可视化分析。
为什么有些 Promise 节点显示为灰色？
灰色节点表示跳过状态。当 Promise 链中的某个 Promise 因为前置 Promise 的拒绝而未被执行时，该 Promise 会显示为灰色。例如在链式调用中，如果中间的 Promise 被 reject 且没有 catch 处理，后续的 then 回调对应的 Promise 就会显示为灰色跳过状态。
三维视图操作不流畅怎么办？
三维渲染对设备的 GPU 性能有一定要求。如果操作不流畅，建议尝试以下措施：关闭其他占用 GPU 资源的浏览器标签页；降低浏览器缩放比例；更新显卡驱动程序到最新版本。在性能较弱的设备上，也可以切换到二维简化视图模式进行查看。
能否导出可视化结果？
当前版本支持将三维视图截取为 PNG 图片进行保存。在播放到满意的状态后，点击工具栏中的截图按钮即可下载当前视图的图片文件。后续版本计划支持导出为 SVG 矢量格式和动态 GIF 动画格式，以便在文档和演示中使用。
如何在教学中使用这个工具？
教学使用时建议采用以下步骤：首先选择与教学内容匹配的预设场景；将播放速度调至 0.1 倍到 0.3 倍的慢速模式；播放过程中在关键状态转换点暂停并结合右侧详情面板进行讲解；引导学生观察节点颜色变化理解状态流转；播放结束后可旋转三维视图展示调用链的空间结构。对于课堂演示场景，建议使用全屏模式以获得更好的视觉效果。
使用 Promise 链可视化工具能够帮助开发者和学习者更加直观地理解异步代码的执行流程，从而提升调试效率和学习效果。