Vorlon.js simplifie le debug web à distance

logo vorlon js

Vorlon.js est un outil permettant le debug web à distance et multiplateforme. L'idée de ses créateurs (quelques évangélistes Microsoft) est de pallier les problématiques du debug de site web sur mobile. Il faut en effet utiliser des outils propriétaires pour chaque plateforme, que ce soit sur Chrome pour Android, Safari pour iOS, et IE pour Windows Mobile. Il existe pourtant bien un outil qui s'appelle Weinre, mais son interface n'est pas la plus agréable et il ne fonctionne que sous Chrome.

Dans cet article je vais donc vous présenter Vorlon.js dont l'objectif est de se rapprocher au maximum des outils de debug tels qu'on les connait dans les navigateurs avec F12, le tout à distance.

Installation et utilisation

Son installation est très simple et des plus basique avec npm :

$ npm i -g vorlon
$ vorlon
Vorlon listening on port 1337

Pour le lancer, il suffit de lancer la commande vorlon. Le dashboard est à présent accessible via http://localhost:1337 dans n'importe quel navigateur.

vorlon dashboard

La dernière étape est "d'activer" le debug de votre application. Pour cela, il faut ajouter le script javascript généré par Vorlon dans votre application :

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

Les outils de debug

A partir de là, votre client est visible dans le dashboard et vous pouvez commencer le debug :

vorlonclient

 

Vous retrouvez ainsi les différents outils que vous avez l'habitude d'utiliser avec F12. Vorlon est conçu à base de plugins. Voici la liste des plugins CORE dont vous disposez à l'installation (il est possible de les activer/désactiver en fonction de votre besoin en modifiant le fichier config.json dans le répertoire /Server de l'installation). La liste des plugins disponibles se trouve sur le Github dans le répertoire plugins library.

DOM Explorer

Il permet de visualiser le code HTML du site du client que vous êtes en train de déboguer. Son contenu étant affiché en temps réel, vous pouvez modifier, ajouter, et supprimer des éléments ou des attributs pour voir le résultat instantanément sur le client. Les styles CSS sont également disponibles et peuvent être modifiés à la volée.

Object Explorer

L'object explorer permet de visualiser tous les objets Javascript qui sont stockés dans l'objet global window. Pratique pour vérifier le scope d'un objet.

La console

La console interactive permet d'afficher tous les logs et de naviguer au sein des erreurs. Vous pouvez également exécuter du code Javascript sur le client et ainsi manipuler tous les objets stockés dans window.

Network Monitor

Cet onglet permet de visualiser l'ensemble des requêtes effectuées sur les ressources.

networkmonitor

XHR

Par défaut désactivé pour des questions de performance, ce plugin écoute les requêtes Ajax.

xhrpluginResources Explorer

Ce plugin permet de visualiser les données clés/valeur stockées au sein du local et session storage, ainsi que les cookies.

Modernizr

Le plugin Modernizr indique quelles fonctionnalités HTML et CSS sont activées sur le navigateur client utilisé.

modernizrplugin

My Device

Ce plugin donne des informations sur les paramètres du navigateur du client : la largeur de l'écran, l'aspect ratio ou encore le User Agent. Bien évidemment, si vous modifiez la taille de la fenêtre sur le client, les données sont mises à jour également dans le dashboard Vorlon.

ngInspector

ngInspector est un plugin utile pour les développeurs Angular.js permettant de visualiser les différents scopes.

Unit Test

Le plugin Unit Test est un utilitaire qui vous permet de lancer vos tests qUnit à distance depuis le dashboard. Vous pouvez même charger un fichier contenant vos tests et les exécuter à distance. Les résultats des tests sont ainsi affichés à l'intérieur du dashboard.

Best practices

Ce plugin vous indique si votre application respecte les standards du web. Il peut être intéressant pour détecter des erreurs d'accessibilité par exemple. Les règles sont extensibles, ce qui veut dire que vous pouvez customiser les règles en fonction de vos besoins.

Vorlon proxy

Pour déboguer un site déjà en production pour lequel le script Vorlon n'a pas été inséré, il est possible d'utiliser le Vorlon proxy. Il est séparé du dashboard classique et est accessible à l'adresse http://localhost:1337/httpproxy. Le proxy va injecter pour vous le script client Vorlon lorsque vous lui donnerez un lien cible, et vous pourrez ainsi commencer le debug.

httpproxydashboard

Conclusion

Vorlon.js a vu le jour cette année et n'en est qu'à son début, la communauté s'agrandit de jour en jour. Il est bien évidemment déconseillé de le laisser activé en production pour des questions de sécurité. Le seul inconvénient qu'on pourrait souligner, c'est le fait de ne pas pouvoir (pour l'instant) définir des points d'arrêt dans le code Javascript pour faire du debug pas à pas, en temps réel. Comme l'explique ses créateurs, chaque navigateur implémente sa propre version propriétaire et il n'y a à l'heure actuelle pas d'implémentation standard, ce qui va dans le sens inverse de la philosophie multiplateforme de Vorlon.

Malgré cet inconvénient, Vorlon.js est un outil très pratique qui réalise parfaitement ce qu'il est censé faire, à savoir répondre aux problématiques de debug web à distance, notamment pour les terminaux mobiles. Son interface basique est plutôt agréable et la possibilité de créer ses propres plugins simplement est très bien pensée. Et puis pour une fois qu'un outil est conçu de mains françaises...

Références :

Un commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.