JS Visualizer

JS Visualizer 是一款交互式工具，通过实时动画直观展示 JavaScript 事件循环、调用栈、Web API、微任务和任务队列的执行过程。它能帮助你彻底理解为什么 Promise 比 setTimeout 先执行，以及 async/await 的实际工作原理。

核心功能

• 实时可视化：每一步执行都通过动画清晰呈现，调用栈、Web API、微任务队列和任务队列的状态一目了然。
• 断点与步进模式：支持设置断点，单步执行代码，深入观察每个细节。
• 速度控制：可调整执行速度，慢速观察或快速跳过，适应不同学习节奏。
• 丰富示例：内置 20+ 个精心设计的示例，涵盖常见异步场景，并支持并排对比。
• 分享链接：通过 URL 分享你的代码和可视化状态，方便协作与讨论。

主要特性

• 实时动画：调用栈、Web API、微任务和任务队列动态变化，直观展示事件循环。
• 步骤关联规范：每一步执行都关联 ECMAScript 规范说明，加深理论理解。
• 零门槛使用：完全免费，无需注册，打开即用。
• 并排对比：同时运行两段代码，对比不同异步模式的执行顺序。
• 轻量高效：基于浏览器运行，无需安装任何软件。

适用场景

• JavaScript 初学者：通过可视化彻底搞懂事件循环、异步编程。
• 面试准备：深入理解 Promise、async/await、setTimeout 等核心概念。
• 教学演示：教师或讲师可用它生动展示异步执行过程。
• 代码调试：复杂异步代码的调试辅助工具，看清每一步执行顺序。