Share
Récemment, au // BUILD / 2015, nous avons annoncé Vorlon.js, un outil open source, extensible et indépendant de la plate-forme, permettant de déboguer et de tester à distance votre code JavaScript. J'ai eu l'opportunité de créer Vorlon.js avec l'aide d'ingénieurs talentueux et d'évangélistes techniques de Microsoft (les mêmes gars qui vous ont amené Babylon.js).
Vorlon.js est alimenté par Node.js, Socket.IO et le café de fin de soirée. Je voudrais partager avec vous la raison pour laquelle nous l’avons faite et comment l’intégrer à votre propre processus de test, ainsi que quelques détails supplémentaires sur l’art de construire une bibliothèque JavaScript comme celle-ci..
Vorlon.js vous aide à charger, inspecter, tester et déboguer à distance le code JavaScript exécuté sur tout appareil doté d'un navigateur Web. Qu'il s'agisse d'une console de jeux, d'un appareil mobile ou même d'un réfrigérateur connecté à l'IdO, vous pouvez connecter jusqu'à 50 appareils à distance et exécuter du JavaScript dans chacun d'entre eux..
L'idée ici est que les équipes de développement peuvent également déboguer ensemble: chaque personne peut écrire du code et les résultats sont visibles par tous. Nous avions une devise simple dans ce projet: Pas de code natif, pas de dépendance vers un navigateur spécifique, seulement JavaScript, HTML et CSS fonctionnant sur les appareils de votre choix.
Vorlon.js est lui-même un petit serveur Web que vous pouvez exécuter à partir de votre ordinateur local ou sur un serveur accessible à votre équipe, qui sert le tableau de bord Vorlon.js (votre centre de commande) et communique avec les périphériques distants..
L'installation du client Vorlon.js sur votre site Web ou votre application est aussi simple que l'ajout d'une balise de script. Il est également extensible, de sorte que les développeurs peuvent écrire des plug-ins qui ajoutent des fonctionnalités à la fois au client et au tableau de bord, telles que la détection de fonctionnalités, la journalisation et le suivi des exceptions..
Alors pourquoi le nom? Il y a en fait deux raisons. Le premier est parce que je suis tout simplement fou de Babylon 5 (l'émission télévisée). Sur cette base, la deuxième raison est que les Vorlons sont l’une des races les plus sages et les plus anciennes de l’univers et qu’ils sont donc utiles en tant que diplomates entre races plus jeunes. Leur utilité est ce qui nous a inspiré: pour les développeurs Web, il est encore trop difficile d’écrire du JavaScript qui fonctionne de manière fiable dans les différents appareils et navigateurs. Vorlon.js cherche à le rendre un peu plus facile.
Vorlon.js a été conçu pour vous permettre d'étendre facilement le tableau de bord et l'application client en écrivant ou en installant des plug-ins supplémentaires. Vous pouvez redimensionner ou ajouter des volets supplémentaires au tableau de bord, qui peuvent communiquer de manière bidirectionnelle avec l'application cliente. Il existe trois plug-ins pour commencer:
Journalisation: L'onglet Console permet de diffuser les messages de la console depuis le client vers le tableau de bord que vous pouvez utiliser pour le débogage. Tout ce qui est connecté avec console.log (), console.warn () ou console.error () apparaîtra dans le tableau de bord. Comme le Outil de développement F12 Explorateur DOM, vous pouvez voir l’arborescence DOM, sélectionner un nœud (qui sera mis en surbrillance sur le périphérique et mettre à jour ou ajouter de nouvelles propriétés CSS).
Interactivité: vous pouvez également interagir avec la page Web distante en tapant du code dans l'entrée. Le code entré sera évalué dans le contexte de la page.
L'inspecteur DOM vous montre le DOM de la page Web distante. Vous pouvez inspecter le DOM, en cliquant sur les nœuds pour les mettre en évidence dans la page Web de l'hôte. Si vous en sélectionnez un, vous pouvez également afficher et modifier ses propriétés CSS..
L'onglet Modernizr vous montrera les fonctionnalités de navigateur prises en charge, telles que rapportées par Modernizr. Vous pouvez utiliser ceci pour déterminer quelles fonctionnalités sont réellement disponibles. Cela peut être particulièrement utile sur des appareils mobiles inhabituels, ou des choses comme les consoles de jeux.
Depuis votre ligne de commande de noeud, exécutez ceci:
$ npm i -g vorlon $ vorlon
Vous avez maintenant un serveur fonctionnant sur votre hôte local sur le port 1337. Pour accéder au tableau de bord, accédez simplement à http: // localhost: 1337 / dashboard / SESSIONID, où ID DE SESSION est l'id de la session de tableau de bord en cours. Cela peut être n'importe quelle chaîne que vous voulez.
Vous devez ensuite ajouter une seule référence dans votre projet client:
S'il vous plaît noter que ID DE SESSION peut être omis et dans ce cas, il sera automatiquement remplacé par "default".
Et c'est tout! Votre client va maintenant envoyer les informations de débogage à votre tableau de bord de manière transparente. Regardons maintenant un exemple utilisant un site réel.
Utilisons http://www.babylonjs.com/ pour notre exemple. Tout d’abord, je dois lancer mon serveur (en utilisant le noeud start.js à l’intérieur du /serveur dossier). Ensuite, il me suffit d'ajouter cette ligne sur mon site client:
Parce que je ne définis pas un ID DE SESSION, Je peux simplement aller à http: // localhost: 1337 / dashboard. Le tableau de bord ressemble à ceci:
Sidenote: Le navigateur ci-dessus est Microsoft Edge (anciennement Project Spartan), le nouveau navigateur de Microsoft pour Windows 10. Vous pouvez également tester vos applications Web à distance sur votre appareil Mac, iOS, Android ou Windows @ http: // dev. .modern.ie /. Ou essayez aussi Vorlon.js.
De nouveau, je peux voir les messages de la console, par exemple, ce qui est utile lorsque je débogue Babylon.js sur des appareils mobiles (comme iOS, Android ou Windows Phone). Je peux cliquer sur n'importe quel noeud de l'explorateur DOM pour obtenir des informations sur les propriétés CSS:
Du côté client, le nœud sélectionné est mis en surbrillance avec une bordure rouge:
De plus, je peux passer à la Moderniser onglet pour voir les capacités de mon appareil spécifique:
Sur le côté gauche, vous pouvez voir la liste des clients actuellement connectés et vous pouvez utiliser le Identifier un client bouton pour afficher un numéro sur chaque appareil connecté.
Dès le début, nous voulions nous assurer que Vorlon.js reste aussi premier mobile et plate-forme agnostique comme possible. Nous avons donc décidé d'utiliser une technologie open source qui fonctionnait dans un plus grand nombre d'environnements..
Notre environnement de développement était Visual Studio Community, que vous pouvez obtenir gratuitement maintenant. Nous avons utilisé les outils Node.js pour Visual Studio et Azure pour le back-end. Notre interface était JavaScript et TypeScript. Si vous n'êtes pas familier avec TypeScript, vous pouvez comprendre pourquoi nous avons créé Babylon.js avec ce script dans cet article de blog. Angular 2 a récemment été construit avec TypeScript. Mais vous n'avez pas besoin de le savoir pour utiliser Vorlon.js.
Voici un schéma global de la façon dont cela fonctionne:
Voici les pièces avec lesquelles nous l'avons construit:
Par exemple, le plugin de la console fonctionne de la manière suivante:
Accentsconagua
console.log (), console.warn () ou console.error (). Ce hook est utilisé pour envoyer les paramètres de ces fonctions au tableau de bord. Il peut également recevoir des commandes du tableau de bord qu’il évaluera..Le résultat est simplement une console distante:
Vous pouvez obtenir une compréhension encore meilleure de l’extensibilité de Vorlon.js, y compris comment créer vos propres plug-ins, sur le site Web de Vorlon.js..
Vorlon.js est construit sur l'idée de extensibilité. Nous vous encourageons à contribuer! Et nous réfléchissons déjà à la façon dont nous pourrions intégrer Vorlon.js aux outils de développement du navigateur ainsi qu'au débogage Web Audio..
Si vous voulez l'essayer, vous n'êtes qu'à un clic: vorlonjs.com. Et les documents plus techniques sont sur notre GitHub.
Cela vous surprendra peut-être un peu, mais Microsoft propose un grand nombre d’apprentissage gratuit sur de nombreuses rubriques JavaScript open source et nous avons pour mission de créer beaucoup plus avec Microsoft Edge. Découvrez moi-même:
Ou la série d'apprentissage de notre équipe:
Et quelques outils gratuits: Communauté Visual Studio, Azure Trial et outils de test multi-navigateurs pour Mac, Linux ou Windows..
Cet article fait partie de la série Web de développement Web de Microsoft. Nous sommes ravis de partager Microsoft Edge et le nouveau Moteur de rendu EdgeHTML avec toi. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows @ http://dev.modern.ie/.
