event loop explorer

Explorateur de boucle d'événement

À propos du projet

Event Loop Explorer est un outil qui aide à comprendre comment le code JavaScript est exécuté dans le navigateur. Il visualise la pile d'appels, les API Web, les tâches, les microtasses et la phase de rendu.

Captures d'écran:

Démo:

N'hésitez pas à l'essayer ici: https://vault-developer.github.io/event-loop-explorer/

Limites et simplifications connues:

• Le code JavaScript est analysé à AST en utilisant un analyseur Acorn, puis l'ordre des événements est généré. Tous les exemples par défaut fonctionnent comme prévu, vous pouvez essayer de modifier le code et voir comment il fonctionne. Cependant, tous les cas ne sont pas couverts. Async / Await, promesses complexes, SetInterval, les opérateurs d'affectation ne fonctionneront pas comme prévu.
• La phase de rendu est généralement déclenchée toutes les 16,66 ms (60 images par seconde), mais dans ce projet, il est simplifié à chaque cercle de boucle d'événement. Nous comptons chaque cercle à 360 ms pour la simplicité, donc la phase de rendu est déclenchée toutes les 720 ms.
• L'interface utilisateur n'est pas adaptée aux mobiles, veuillez utiliser uniquement les appareils de bureau.

Contribution:

Si vous souhaitez contribuer, n'hésitez pas à alimenter ce référentiel et à créer une demande de traction.
Il y a beaucoup de sujets dans la section "Future Plans".
Vous avez une question ou une idée?
N'hésitez pas à l'élever dans notre session de discussion?

Lancement localement:

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

cd event-loop-explorer

yarn install

yarn dev

Plans futurs:

• Correction de l'animation en retard dans la roue de boucle d'événement;
• Ajoutez des fonctionnalités de pas en avant;
• Ajoutez une action GitHub pour vérifier les PRS;
• rendre la disposition mobile plus conviviale;
• Ajouter une syntaxe de validation de code;
• Vérifiez les cas de bord d'analyse JS, y compris new Promise((res) => {res(console.log(4))}) ;
• Ajoutez une bascule à la console pour basculer entre Console.Log la sortie et les journaux complets pour chaque étape;
• ajouter des tests unitaires;
• Nettoyez le code, supprimez les todos;

Inspiré par:

• Visualiser JS par Andrew Dillon
• "In the Loop" présenté par Jake Archibald à jsconf.asia 2018