Code Step Visualiser
Step through a snippet and watch the variables change.
AdvancedWeb appEducation16–32hAI-buildable 3/5no setup
Paste a small piece of JavaScript, then step forward and back through execution while a panel shows the current scope, call stack and variable values. Teaching yourself how closures and hoisting really work by watching them is far more effective than reading about them.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Paste a snippet into an editor
- Step forward and backward through execution
- The current line highlights as you step
- A panel shows variables in each active scope
- The call stack renders and updates as functions are entered and left
- Loops can be stepped through or fast-forwarded
- Infinite loops are detected and stopped rather than hanging the tab
The interesting part
- Instrumenting code to capture state at each step without changing its behaviour
- Stepping backwards, which means recording every state rather than re-running
- Guarding against snippets that would lock up the page
Once it works
- Visualise closures as retained scope objects
- Add a heap view showing object references
- Support async execution and the microtask queue
Suggested stack
reacttypescripttailwindacorn