简介
Vorlon.JS是为JavaScript所设计的远程调试测试工具。它帮助开发者在任何设备上加载调试JavaScript代码,唯一的条件就是JavaScript代码运行在Web浏览器中。
Vorlon.JS是一个可以在本机或服务器中运行的小型服务器程序,它负责与远程设备的通信并提供Vorlon.JS仪表板供开发者使用。在您的网站或应用中安装Vorlon.JS客户端仅需添加一个script标签。
Vorlon.JS可以通过插件来扩展客户端和仪表板的功能,如特性探测,日志记录以及异常跟踪。
安装VORLON.JS
Vorlon.JS 服务器 您可以通过npm来安装Vorlon.JS。
$ npm i -g vorlon
安装完成之后您可以运行vorlon命令来启动。
$ vorlon The Vorlon server is running
服务器启动之后,打开http://localhost:1337来查看Vorlon.JS仪表板页面。
Vorlon.JS客户端
开始远程调试之前您的应用需要与Vorlon服务器进行通信。您可以在您的页面中添加以下代码:
<script src="http://localhost:1337/vorlon.js>
您也可以打开我们提供的测试页来测试您的Vorlon仪表板页面
Vorlon.JS客户端进阶
如果您想在页面中加入未压缩版本的客户端,可以使用以下代码:
您也可以使用以下代码来禁止客户端的自动启动:
或者未压缩版本
如果禁止了客户端自动启动的话,您可以使用以下代码来启动并指定一个session id:
VORLON.Core.Start("http://localhost:1337", "default");
Vorlon.JS服务器端进阶
如果您不需要某个特定的的插件需要在客户端中关闭,您可以修改服务器上的catalog.json文件。您需要从GitHub上下载并安装Vorlon.js才可以修改catalog.json。如果您使用npm来安装,我们则不建议您修改。
catalog.json位于 Server/public/catalog.json
默认的catalog.json文件如下:
{ "includeSocketIO": true, "plugins": [ { "id": "CONSOLE", "name": "Interactive Console", "panel": "bottom", "foldername" : "interactiveConsole"}, { "id": "DOM", "name": "Dom Explorer", "panel": "top", "foldername" : "domExplorer" }, { "id": "MODERNIZR", "name": "Modernizr","panel": "bottom", "foldername" : "modernizrReport" }, { "id" : "OBJEXPLORER", "name" : "Obj. Explorer","panel": "top", "foldername" : "objectExplorer" } ] }
显而易见,每一行plugins代表一个插件。
catalog.json文件中,您可以编辑插件安装的文件夹名,但所安装的文件夹必须放在:
Server/public/vorlon/plugins
按照命名规则,此文件夹名必须与插件的JavaScript文件名相同:
{FOLDERNAME}.JS或{FOLDERNAME}.min.js
您也可以编辑插件所显示的位置,Panel的值可以是“bottom”或者“top”。
如果您在catalog.json文件中删除了某个插件,则它不会显示在仪表板页面上,对应的JavaScript文件也不会被发送到客户端。 我们还提供了去除socket.io的功能:
"includeSocketIO": false
VORLON.JS 仪表板页面
Vorlon.JS仪表板页面是为了帮助开发人员进行JavaScript的调试和测试所设计的,所以整个用户界面也是遵循了这一思想。仪表板页面主要有两部分内容组成:客户端概览视图以及插件视图。
客户端概览视图中显示正在测试的客户端以及活跃的客户端。Identify a client按钮使你可以快速找到哪个页面或窗口正在调试中。 插件视图中console固定在页面的下方,其他插件则以标签页的形式显示在上方。
日志记录
console标签页会显示从客户端发送的console信息。console.log(),console.warn()以及console.error()所记录的信息都会显示在仪表板上。
互动
你可以输入代码与远程客户端页面进行互动。所输入的代码会在页面中运行。
DOM浏览器
DOM浏览器中现在远程页面的dom。点击选中的节点在页面中会显示高亮,你也可以查看和修改其css属性。
Modernizr
Modernizr标签页中显示客户端所支持的浏览器特性。你可以据此分析哪些浏览器特性在客户端实际可用。在一些小众的移动终端或者游戏主机上调试时这一功能会非常有用。您可以使用搜索过滤器来选则某个专门的特性。
对象浏览器
对象浏览器标签页中列出了远程页面中所有的JavaScript变量,你可以点击来查看对象的属性。
开发插件
你可以轻松地为Vorlon.JS开发插件来进行扩展。通过插件你可以在仪表板页面中添加自己想要的功能。其实console,DOM浏览器和Modernizr也都是插件。
下载Vorlon.JS源码
进行插件开发的话现在还需要下载源码来运行Vorlon.JS
一下命令会复制Vorlon源码,安装以来并运行Vorlon服务器
git clone https://github.com/MicrosoftDX/Vorlonjs.git cd Vorlonjs npm install npm start
想要进一步了解Vorlon.JS插件的开发请点此
示例插件
每个Vorlon.JS插件都是一个Typescript类,运行时在服务器端和客户端都会加载这个类。Vorlon.JS应该继承Vorlon.Plugin类。你可以为仪表板页面或客户端进行开发,他们之间也可以进行双向通信。
为了让开发者容易上手,我们已经开发了一个示例插件。这个插件在仪表板页面添加了一个文本框。你可以输入以下字符点击回车,这些字符会被发送到客户端在逆序发回来。这个简单的示例演示了如何进行插件开发和服务器客户端通信。你可以在这里查看这一示例插件的源代码并在此基础上进行修改。
安装插件
现在安装插件还需要修改Vorlon.JS的源代码,但我们正在努力使安装过程变得很简单好用。如果你有什么好想法,请与我们联系。
英文文档链接