Vorlon.js简介：如何使用它来远程调试Javascript-CSDN博客

本文是Microsoft的Web开发技术系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

最近在// BUILD / 2015，我们宣布了vorlon.js –开源，可扩展，与平台无关的工具，用于远程调试和测试JavaScript。我有机会在Microsoft的一些才华横溢的工程师和技术推广人员的帮助下创建了vorlon.js（为您带来了http://www.babylonjs.com/的那些人）。

Vorlon.js由Node.js，Socket.IO和深夜咖啡提供支持。我想与您分享我们为什么要制作它，如何将其合并到您自己的测试工作流程中，并且还希望分享一些更多细节，以构建类似的JavaScript库。

Vorlon.js徽标

为什么选择Vorlon.js？

Vorlon.js可帮助您使用Web浏览器远程加载，检查，测试和调试在任何设备上运行的JavaScript代码。无论是游戏机，移动设备，甚至是连接IoT的冰箱，您都可以远程连接多达50个设备，并在每个设备或所有设备上执行JavaScript。这里的想法是开发团队也可以一起调试–每个人都可以编写代码，并且所有人都可以看到结果。在这个项目中，我们有一个简单的座右铭： 没有本地代码 ，没有对特定浏览器的依赖， 只有JavaScript ，HTML和CSS在您选择的设备上运行。

Vorlon.js本身是一个小型Web服务器，您可以在本地计算机上运行，也可以安装在服务器上以供团队访问，该服务器为Vorlon.js仪表板（您的命令中心）提供服务并与远程设备进行通信。在您的网站或应用程序中安装Vorlon.js客户端就像添加单个脚本标签一样容易。开发人员可以在其中编写可向客户端和仪表板添加功能的插件，例如，功能检测，日志记录和异常跟踪。

那为什么叫这个名字呢？实际上有两个原因。第一个是因为我对巴比伦5 （电视节目）感到疯狂。基于此，第二个原因是因为福隆人是宇宙中最睿智和最古老的种族之一，因此，它们作为年轻种族之间的外交官很有用。他们的帮助是启发我们的原因。对于Web开发人员来说，编写可在各种设备和浏览器上可靠运行的JavaScript仍然太难了。 Vorlon.js试图使其变得更简单。

您提到Vorlon.js有插件吗？

Vorlon.js的设计旨在使您可以通过编写或安装其他插件来轻松扩展仪表板和客户端应用程序。您可以调整大小或将其他窗格添加到仪表板，以与客户端应用程序进行双向通信。首先有三个插件：

控制台记录

“控制台”选项卡会将控制台消息从客户端流式传输到可用于调试的仪表板。使用console.log() ， console.warn()或console.error()都将出现在仪表板中。就像F12 #Dev Tool DOM资源管理器一样，您可以看到DOM树，选择一个节点（该节点将在设备上突出显示，并更新或添加新的CSS属性）。交互性：您还可以通过在输入中键入代码来与远程网页进行交互。输入的代码将在页面上下文中进行评估。

DOM资源管理器

DOM检查器向您显示远程网页的DOM。您可以检查DOM，单击节点将在主机网页中突出显示它们，如果选择一个，则还可以查看和修改其CSS属性。

DOM资源管理器

现代化

Modernizr选项卡将向您显示Modernizr报告的受支持的浏览器功能。您可以使用它来确定实际可用的功能。这在不寻常的移动设备或游戏机等设备上可能特别有用。

Modernizr演示

如何使用？

在您的节点命令行中，只需执行以下命令：

$ npm i -g vorlon
$ vorlon

现在，您已经在本地主机上的端口1337上运行了服务器。
要访问仪表板，只需导航至http：// localhost：1337 / dashboard / SESSIONID ，其中SESSIONID是当前仪表板会话的ID。可以是您想要的任何字符串。

然后，您必须在客户项目中添加单个引用：

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

请注意，可以省略SESSIONID ，在这种情况下， default情况下它将被自动替换。

就是这样！现在，您的客户端将无缝地将调试信息发送到仪表板。现在让我们来看一个使用真实站点的示例。

使用Vorlon.js调试babylonjs.com

让我们以http://www.babylonjs.com/为例。首先，我必须启动服务器（使用/server文件夹中的node start.js ）。然后，我只需要将此行添加到我的客户站点：

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

因为我没有定义SESSIONID ，所以我可以转到http://localhost:1337/dashboard 。仪表板如下所示：

Vorlon.js仪表板

旁注：上面显示的浏览器是Microsoft Edge（以前称为Project Spartan ），它是Windows 10的Microsoft新浏览器。您也可以在Mac，iOS，Android或Windows设备上通过http：//远程测试其Web应用程序。 modern.ie/ 。或者也尝试vorlon.js。

返回页首：例如，我可以看到控制台消息，这在我在移动设备（例如iOS，Android或Windows Phone）上调试babylon.js时非常有用。
我可以单击DOM Explorer上的任何节点以获取有关CSS属性的信息：

检查节点的CSS属性

在客户端，所选节点以红色边框突出显示：

客户演示

此外，我可以切换到Modernizr选项卡以查看特定设备的功能：

设备功能

在左侧，您可以看到当前连接的客户端列表，并且可以使用“标识客户端”按钮在每个连接的设备上显示一个数字。

关于我们如何构建vorlon.js的更多信息

从一开始，我们就想确保Vorlon.js尽可能保持移动优先和平台无关 。因此，我们决定使用可在更广泛的环境中工作的开源技术。

我们的开发环境是Visual Studio Community，您可以免费获得它。我们将Visual Studio和Azure的Node.js工具用于后端。我们的前端是JavaScript和TypeScript。如果您不熟悉TypeScript，则可以在此处了解为什么我们使用它来构建babylon.js。最近， Angular 2已使用TypeScript构建。但是您不必知道使用vorlon.js。

以下是其工作方式的全局示意图：

Vorlon.js ？？图式