Les équipes de Microsoft (dont certains français) ont récemment publié un nouvel outil pour les développeurs web : VorlonJS. En quelques mots, VorlonJS est "an open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript". Vous trouverez plus d'informations directement sur son site internet http://vorlonjs.com/ ou ici Why we made vorlon.js and how to use it to debug your JavaScript remotely.

Parce que nous aimons ce genre d'outils, qui nous aident au quotidien en simplifiant des tâches difficiles, et parce que nous aimons également AngularJS, @PaGury et moi-même (@SebastienOll) avons décidé de participer à ce projet en créant un nouveau plugin : NgInspector.

L'idée du plugin est d'être capable de visualiser facilement la hiérarchie des scopes d'une application AngularJS et de pouvoir inspecter le contenu de ces scopes.

Comment ça marche ?

Vous pouvez voir ici http://vorlonjs.com/#getting-started comment lancer VorlonJS sur votre environnement local.

Avant de commencer à déboguer, assurez-vous que le fichier config.json situé dans le dossier Server a la propriété enabled à true pour NgInspector (sans ça, le plugin ne sera pas chargé):

 
{
    "includeSocketIO": true,
    "useSSL": true,
    "SSLkey": "cert/server.key",
    "SSLcert": "cert/server.crt",
    "plugins": [
        { "id": "CONSOLE", "name": "Interactive Console", "panel": "bottom", "foldername" : "interactiveConsole", "enabled": true},
        { "id": "DOM", "name": "Dom Explorer", "panel": "top", "foldername" : "domExplorer", "enabled": true },
        { "id": "MODERNIZR", "name": "Modernizr","panel": "bottom", "foldername" : "modernizrReport", "enabled": true },
        { "id" : "OBJEXPLORER", "name" : "Obj. Explorer","panel": "top", "foldername" : "objectExplorer", "enabled": true },
        { "id" : "XHRPANEL", "name" : "XHR","panel": "top", "foldername" : "xhrPanel", "enabled": true  },
        { "id" : "NGINSPECTOR", "name" : "ngInspector","panel": "top", "foldername" : "ngInspector", "enabled": true }
    ]
}

Quand VorlonJS est lancé, vous pouvez accéder au dashboard et sélectionner votre application dans la client list. Après, vous pourrez voir l'onglet NgInspector dans le panneau principal.

Le plugin va communiquer avec votre application pour afficher, sur son panneau de gauche, la hiérarchie des scopes AngularJS. Chaque scope sera associé à une icône représentant son type (root scope, scope associé à un contrôleur, scope créé par une instance d'un ng-repeat, etc.).

Lorsque vous cliquez sur un nœud d'un scope de la hiérarchie, son détail sera affiché sur le panneau de droite. Chaque propriété d'un scope sera associée à une icône représentant son type (objet, string, fonction, booléen, etc.).

Pour pouvoir suivre les modifications de votre application, NgInspector va souscrire à ces changements et actualiser son affichage en conséquence.

Et après ?

Cette version est la première version du plugin NgInspector et nous avons beaucoup d'idées pour l'améliorer (pouvoir modifier la valeur d'une propriété d'un scope directement depuis le dashboard, sélectionnez un nœud dans DOM Explorer et afficher le détail du scope associé, etc. ).

En parallèle, l'équipe core de VorlonJS et les contributeurs travaillent pour ajouter de nouvelles fonctionnalités et de nouveaux plugins.

Si vous voulez vous impliquer dans ce projet, vous pouvez forker le repository suivant: https://github.com/MicrosoftDX/Vorlonjs/. Sinon, vous pouvez nous donner des feedbacks, des idées d'amélioration, etc.

Bonne session de debugging !