event loop explorer Download - event loop explorer Source code download

event loop explorer

Website data

v1.9.3

Download

Event Loop Explorer

About the project

Event Loop Explorer is a tool that helps to understand how JavaScript code is executed in the browser. It visualizes the Call Stack, Web APIs, Tasks, Microtasks, and Render phase.

Screenshots:

event-loop

Demo:

Feel free to try it here: https://vault-developer.github.io/event-loop-explorer/

Known limitations & simplifications:

Javascript code is parsed to AST using acorn parser, and then order of events are generated. All default examples are working as expected, you can try to modify the code and see how it is working. However, not all cases are covered. Async/await, complex Promises, SetInterval, assignment operators will not work as expected.
Render phase is usually triggered every 16.66ms (60fps), but in this project it is simplified to just every second Event Loop circle. We are counting every circle as 360ms for simplicity, so render phase is triggered every 720ms.
UI is not mobile-friendly, please use desktop devices only.

Contribution:

If you want to contribute, feel free to fork this repository and create a pull request.
There are a lot of topics in the "Future Plans" section.
Have a question or idea?
Feel free to raise it in our discussions session ?

Launch locally:

git clone [email protected]:vault-developer/event-loop-explorer.git

cd event-loop-explorer

yarn install

yarn dev

Future Plans:

fix lagging animation in event loop wheel;
add step forward functionality;
add GitHub action to check PRs;
make mobile layout more user-friendly;
add code validation syntax;
check js parsing edge cases, including new Promise((res) => {res(console.log(4))});
add a toggle to console to switch between console.log output and comprehensive logs for every step;
add unit tests;
clean up the code, remove todos;