介绍一个电影的网站模板企业网页设计公司
本文是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可帮助您使用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属性。
现代化
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 。 仪表板如下所示：
旁注 ：上面显示的浏览器是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属性的信息：
在客户端，所选节点以红色边框突出显示：
此外，我可以切换到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建立在可扩展性的思想之上。 我们鼓励您做出贡献！ 我们已经在讨论如何将vorlon.js集成到浏览器开发工具以及Web Audio调试中。
如果您想尝试一下，只需单击一下即可： vorlonjs.com
更多技术文档在我们的GitHub上 。
JavaScript的更多动手实践
这可能会让您感到有些惊讶，但是Microsoft在许多开放源JavaScript主题上有大量免费的学习知识，我们的使命是使用Microsoft Edge创建更多内容。 看看我自己的：
WebGL 3D和HTML5和Babylon.JS简介
使用ASP.NET和AngularJS构建单页应用程序
HTML中的尖端图形
或我们团队的学习系列：
使您的HTML / JavaScript更快的实用性能提示 （从响应设计到休闲游戏到性能优化的7个系列文章）
现代Web平台JumpStart （HTML，CSS和JS的基础知识）
使用HTML和JavaScript JumpStart开发通用Windows应用程序 （使用已经创建的JS来构建应用程序）
还有一些免费工具： Visual Studio社区 ， Azure试用版以及用于Mac，Linux或Windows的跨浏览器测试工具 。
本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您共享Microsoft Edge和新的EdgeHTML渲染引擎 。 在http://dev.modern.ie/上获得免费的虚拟机或在Mac，iOS，Android或Windows设备上进行远程测试。
From: https://www.sitepoint.com/introducing-vorlon-js-use-debug-javascript-remotely/