我们为什么创建 vorlon.js 以及如何使用它远程调试 JavaScript

David Catuhe

5.00/5 (4投票s)

2015 年 6 月 25 日

CPOL

7分钟阅读

15584

Vorlon.js 由 node.JS、socket.io 和深夜咖啡提供支持。我想与您分享我们创建它的原因、如何将其纳入您自己的测试工作流程，并分享一些关于构建此类 JS 库的艺术的更多细节。

最近在 //BUILD/ 2015 上，我们发布了 vorlon.js——一个开源的、可扩展的、平台无关的工具，用于远程调试和测试您的 JavaScript。我有机会在 Microsoft 一些才华横溢的工程师和技术布道者的帮助下创建 vorlon.JS（他们也为您带来了 http://www.babylonjs.com/）。

为什么选择 Vorlon.js？

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

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

那么为什么叫这个名字呢？实际上有两个原因。第一个是我就是喜欢《巴比伦 5》（电视剧）。基于此，第二个原因是 Vorlons 是宇宙中最古老、最明智的种族之一，因此它们有助于在年轻种族之间充当外交官。它们的乐于助人启发了我们：对于 Web 开发人员来说，编写在各种设备和浏览器上都能可靠运行的 JavaScript 仍然非常困难。Vorlon.js 旨在使其稍微容易一些。

您提到 Vorlon.js 有插件？

Vorlon.js 的设计可以让你通过编写或安装附加插件来轻松扩展仪表板和客户端应用程序。您可以调整仪表板的大小或添加额外的窗格，这些窗格可以与客户端应用程序进行双向通信。开始时有三个插件

控制台

日志记录：控制台选项卡会将客户端的控制台消息流式传输到仪表板，您可以使用它进行调试。使用 console.log()、console.warn() 或 console.error() 记录的任何内容都会出现在仪表板中。就像 F12 开发工具的 DOM 浏览器一样，您可以看到 DOM 树，选择一个节点（该节点将在设备上突出显示，并更新或添加新的 CSS 属性）。

交互性：您还可以通过在输入框中键入代码来与远程网页进行交互。输入代码将在页面上下文中进行评估。

DOM 浏览器

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

Modernizr

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

我该如何使用它？

从您的 node 命令行，只需执行此命令

$ npm i -g vorlon

$ vorlon

现在您的 localhost 上有一个运行在 1337 端口的服务器。
要访问仪表板，只需导航到 https://:1337/dashboard/SESSIONID，其中 SESSIONID 是当前仪表板会话的 ID。它可以是您想要的任何字符串。

然后，您需要在您的客户端项目中添加一个单独的引用

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

请注意，可以省略 SESSIONID，在这种情况下，它将自动替换为“default”。
就是这样！现在您的客户端将无缝地将调试信息发送到您的仪表板。现在让我们通过一个真实网站的示例进行查看。

使用 vorlon.js 调试 babylonjs.com

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

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

由于我没有定义 SESSIONID，我可以直接访问 https://:1337/dashboard
仪表板看起来是这样的

题外话：上面显示的浏览器是 Microsoft Edge（以前称为 Project Spartan），这是 Microsoft 为 Windows 10 推出的新浏览器。您也可以在 Mac、iOS、Android 或 Windows 设备上远程测试您的 Web 应用程序 @ http://dev.modern.ie/。或者也可以试试 vorlon.js。

回到正题：例如，我可以看到控制台消息，这在我在移动设备（如 iOS、Android 或 Windows Phone）上调试 babylon.js 时非常有用。我可以点击 DOM 浏览器中的任何节点来获取关于 CSS 属性的信息

在客户端，选定的节点会以红色边框突出显示

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

在左侧，您可以看到当前连接的客户端列表，您可以使用 [识别客户端] 按钮在每台连接的设备上显示一个数字。

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

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

我们的开发环境是 Visual Studio Community，您可以免费获取。我们使用了 Visual Studio 和 Azure 的 Node.JS 工具作为后端。我们的前端是 JavaScript 和 TypeScript。如果您不熟悉 TypeScript，可以在此处了解我们为什么使用它构建 babylon.js。最近 Angular 2 是使用 TypeScript 构建的。但是您不需要了解它就可以使用 vorlon.js。

这是它的工作原理的全局示意图

这是我们构建的部分

一个 node.js 服务器托管一个仪表板页面（使用 express 提供）和一个服务
该服务使用 socket.io 与仪表板和各种设备建立直接连接
设备必须引用服务器提供的简单 vorlon.js 页面。它包含所有插件客户端代码，这些代码与客户端设备交互，并通过服务器与仪表板通信。
每个插件分为两部分
- 客户端，用于捕获信息和与设备交互
- 仪表板端，用于在仪表板内生成插件的命令面板

例如，控制台插件的工作方式如下

客户端在 console.log()、console.warn() 或 console.error() 之上生成一个钩子。此钩子用于将这些函数的参数发送到仪表板。它还可以接收来自仪表板端的指令并进行评估
仪表板端收集这些参数并在仪表板上显示它们

结果就是一个远程控制台

您可以在此处更深入地了解 vorlon.js 的可扩展性，包括如何构建自己的插件。

接下来呢？

Vorlon.js 的构建理念是可扩展性。我们鼓励您贡献！我们已经在考虑如何将 vorlonJS 集成到浏览器开发工具以及 Web Audio 调试中。

如果您想尝试一下，只需点击一下即可：vorlonjs.com。更多技术文档请访问我们的 GitHub。