Descarga event loop explorer - Descargar el código fuente event loop explorer

event loop explorer

Datos del sitio web

v1.9.3

Descargar

Event Loop Explorer

Sobre el proyecto

Event Loop Explorer es una herramienta que ayuda a comprender cómo se ejecuta el código JavaScript en el navegador. Visualiza la pila de llamadas, las API web, las tareas, las microtasas y la fase de representación.

Capturas de pantalla:

bucle

Manifestación:

No dude en probarlo aquí: https://vault-developer.github.io/event-loop-explorer/

Limitaciones y simplificaciones conocidas:

El código JavaScript se analiza a AST usando el analizador de bellotas, y luego se genera el orden de los eventos. Todos los ejemplos predeterminados están funcionando como se esperaba, puede intentar modificar el código y ver cómo funciona. Sin embargo, no todos los casos están cubiertos. Async/Weit, promesas complejas, setInterval, los operadores de asignación no funcionarán como se esperaba.
La fase de renderización generalmente se activa cada 16,66 ms (60 fps), pero en este proyecto se simplifica a solo cada segundo círculo de bucle de eventos. Contamos cada círculo como 360 ms por simplicidad, por lo que la fase de renderizado se activa cada 720 ms.
La interfaz de usuario no es amigable para los dispositivos móviles, use solo dispositivos de escritorio.

Contribución:

Si desea contribuir, no dude en desembolsar este repositorio y crear una solicitud de extracción.
Hay muchos temas en la sección "Planes futuros".
¿Tiene una pregunta o idea?
¿Siéntase libre de plantearlo en nuestra sesión de discusiones?

Lanzamiento localmente:

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

cd event-loop-explorer

yarn install

yarn dev

Planes futuros:

Arreglar la animación rezagada en la rueda de bucle de eventos;
Agregue la funcionalidad de paso hacia adelante;
Agregue la acción de GitHub para verificar los PR;
hacer que el diseño móvil sea más fácil de usar;
Agregar sintaxis de validación de código;
Verifique los casos de borde de análisis JS, incluida new Promise((res) => {res(console.log(4))}) ;
Agregue una alternativa a la consola para cambiar entre consola. Salida de registro y registros integrales para cada paso;
Agregar pruebas unitarias;
Limpie el código, elimine las TODOS;