Event loop explorer
0
Event Loop Explorer: visualise javascript code execution in a browser environment
Miscellaneous
reactjs
javascript
event-loop
browser
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:
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 git@github.com: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;