Le développement web impacte depuis un certain temps de nombreux types de terminaux. Entre les sites vitrine, les extranet de gestion et les applications hybrides, il devient très important de pouvoir débugger son produit sur les différents terminaux : PC, tablette, smartphone.

Il existe de multiples outils permettant de débugger sur différentes plateformes :

• Visual Studio pour Windows Phone
• Chrome pour Android
• Safari pour iOS

Mais aucun de ces outils ne permet de débugger une application web unique sur toutes ces plateformes. C’est afin de répondre à ce besoin que le projet VorlonJS est né.

Installer

Il est possible d’installer et de lancer très simplement un serveur VorlonJS sur votre machine grâce à NodeJS et NPM.

npm i -g vorlon
vorlon

Par défaut cet outil se branche sur le port 1337. Vous devriez donc avoir accès à cet écran.

Configurer

Maintenant que notre serveur est opérationnel nous allons pouvoir ajouter un simple script à notre application afin d’activer les échanges entre le dashboard et le navigateur du client utilisant notre application web.

<script src="http://localhost:1337/vorlon.js"></script>

Il est aussi possible d’ajouter dynamiquement ce script dans une page web d’un site public.

var vorlon = document.createElement('script');
vorlon.src = "http://localhost:1337/vorlon.js";
document.getElementsByTagName('head')[0].appendChild(vorlon);

Essayons sur le site StackOverflow.

Et nous pouvons constater que notre client est bien détecté et affiché sur notre dashboard.

Nous avons maintenant a disposition une certain nombre de plugins nous permettant notamment d’inspecter :

• La console javascript
• L’arbre DOM
• Les échanges réseaux

Conclusion

Vous avez maintenant un outil à disposition pour tester vos application web sur les terminaux dernière génération. Deux points sont cependant importants à noter :

• Le projet est très jeune et en développement actif, il n’est donc pas encore prêt pour une phase de production même s’il reste particulièrement prometteur,
• De nombreuses fonctionnalités, à la fois côté client et côté serveur, reposent sur le HTML5. Les navigateurs trop anciens (IE8, Android 4, … ) ne fonctionneront donc probablement pas.

N’hésitez pas à contribuer à ce projet sur le dépôt GitHub, l’équipe Microsoft qui le gère est très réactive.