traceGL : outil de débogage JavaScript puissant utilisant WebGL

traceGL est un outil de débogage JavaScript intéressant. Créé à l'aide de WebGL, il permet de voir tout le déroulement de votre code JavaScript dans un visualisateur de haute performance. Ce qui peut être utile pour le rendu de l'interface utilisateur.

traceGL fonctionne en instrumentant tout votre code afin de savoir quand les appels ont lieu et afin de connaître toute la logique booléenne qui détermine quel chemin de code prendre. Puis il visualise tout cela, à l'aide de WebGL pour les performances, vous montrant :

  • un aperçu de haut niveau appelé la « mini map » en haut à gauche ;
  • un historique des fonctions appellées en haut à droite ;
  • la pile des appels dans le coin inférieur gauche ;
  • et enfin le code de la fonction en bas à droite.


Lorsque votre code s'exécute, traceGL visualise toutes les données en temps réel. La mini map est utile pour voir le flux du code, par exemple les mouvements de la pile. De cette façon, vous pouvez voir où les événements sont traités, comme les événements souris et clavier dans le navigateur, ou les requêtes HTTP dans une application Node.js. Vous pouvez également obtenir rapidement une partie de la pile des appels qui est potentiellement très longue. L'outil fonctionne même avec des événements asynchrones, contrairement à la plupart des débogueurs, ce qui signifie que ces opérations sont affichées dans le cadre d'un appel unique de la pile sous leur appel d'origine, plutôt que comme deux événements distincts.

Vidéo de présentation

traceGL fonctionnent avec les applications sur navigateurs et avec les applications Node.js. Il s'intègre avec différents éditeurs.

traceGL.
Acheter une licence.
Documentation.

Source :

D'après un article sur BadAss JavaScript.