Download event loop explorer - event loop explorer Download de código fonte

event loop explorer

Dados do site

v1.9.3

Baixar

Explorador de loop de eventos

Sobre o projeto

O Event Loop Explorer é uma ferramenta que ajuda a entender como o código JavaScript é executado no navegador. Ele visualiza a pilha de chamadas, APIs da web, tarefas, microtasks e fase de renderização.

Capturas de tela:

loop de eventos

Demonstração:

Sinta-se à vontade para experimentar aqui: https://vault-developer.github.io/event-loop-explorer/

Limitações e simplificações conhecidas:

O código JavaScript é analisado para o AST usando o analisador de bolota e, em seguida, a ordem dos eventos é gerada. Todos os exemplos padrão estão funcionando como esperado, você pode tentar modificar o código e ver como ele está funcionando. No entanto, nem todos os casos são cobertos. ASYNC/AWAIT, promessas complexas, SetInterval, operadores de tarefas não funcionarão conforme o esperado.
A fase de renderização geralmente é acionada a cada 16,66ms (60fps), mas neste projeto é simplificado para apenas cada segundo círculo de loop de eventos. Estamos contando todos os círculos como 360ms para simplificar, portanto, a fase de renderização é acionada a cada 720ms.
A interface do usuário não é amigável para dispositivos móveis, use apenas os dispositivos de mesa.

Contribuição:

Se você deseja contribuir, sinta -se à vontade para bifurcar este repositório e criar uma solicitação de tração.
Existem muitos tópicos na seção "Planos futuros".
Tem uma pergunta ou ideia?
Sinta -se à vontade para aumentá -lo em nossa sessão de discussões?

Inicie localmente:

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

cd event-loop-explorer

yarn install

yarn dev

Planos futuros:

Corrija a animação atrasada na roda de loop de eventos;
Adicione a funcionalidade de passo a seguir;
Adicione a ação do GitHub para verificar os PRs;
tornar o layout móvel mais fácil de usar;
Adicionar sintaxe de validação de código;
Verifique os casos de arestas de análise JS, incluindo new Promise((res) => {res(console.log(4))}) ;
Adicione uma alternância ao console para alternar entre o console.Log Saída e os logs abrangentes para cada etapa;
Adicionar testes de unidade;
Limpe o código, remova Todos;