Vorlon.js: 远程调试和测试JavaScript的新工具

在开发跨平台的Web应用时,调试和测试JavaScript代码往往是一项挑战,特别是当涉及到多种设备和浏览器时。为了解决这个问题,有幸与微软的一些才华横溢的工程师和技术布道者一起创建了Vorlon.js。这个工具可以帮助远程加载、检查、测试和调试任何带有Web浏览器的设备上的JavaScript代码,无论是游戏机、移动设备,甚至是连接到物联网的冰箱。

为什么选择Vorlon.js?

Vorlon.js的核心理念是“无原生代码,无特定浏览器依赖,仅使用JavaScript、HTML和CSS在选择的设备上运行”。它是一个小型的Web服务器,可以从本地机器运行,或者安装在服务器上供团队访问,它提供了Vorlon.js仪表板(指挥中心)并与远程设备通信。在网站或应用程序中安装Vorlon.js客户端就像添加一个简单的脚本标签一样简单。此外,它还是可扩展的,开发者可以编写插件来为客户端和仪表板添加功能,例如:特性检测、日志记录和异常跟踪。

Vorlon.js的插件

Vorlon.js被设计为可以通过编写或安装额外的插件来轻松扩展仪表板和客户端应用程序。可以调整仪表板的大小或添加额外的窗格,这些窗格可以与客户端应用程序进行双向通信。最初有三个插件:

  • 控制台日志:控制台标签将从客户端流式传输控制台消息到仪表板,可以用于调试。任何使用console.log()、console.warn()或console.error()记录的内容都会出现在此仪表板中。
  • 交互性:还可以通过在输入框中输入代码与远程网页进行交互。输入的代码将在页面的上下文中进行评估。
  • DOM Explorer:DOM检查器向展示了远程网页的DOM。可以检查DOM,点击节点将在主机网页中突出显示它们,如果选择一个节点,还可以查看和修改其CSS属性。
  • Modernizr:Modernizr标签将显示由Modernizr报告的受支持的浏览器功能。可以使用它来确定哪些功能实际上是可用的。这在不寻常的移动设备或游戏机等设备上可能特别有用。

如何使用Vorlon.js?

从Node命令行,只需执行以下命令:

$ npm i -g vorlon $ vorlon

现在localhost上的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/为例。首先,必须启动服务器(使用node start.js在/server文件夹中)。然后,只需要在客户端网站中添加这行代码:

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

因为没有定义SESSIONID,所以可以直接去http://localhost:1337/dashboard。仪表板看起来像这样:

(注:上面的浏览器是Microsoft Edge(以前称为Project Spartan),微软为Windows 10推出的新浏览器。也可以在Mac、iOS、Android或Windows设备上远程测试Web应用程序@http://dev.modern.ie/。或者试试Vorlon.js。)

回到主题:可以查看控制台消息,这在调试移动设备上的babylon.js时非常有用(如iOS、Android或Windows Phone)。可以点击DOM Explorer中的任何节点来获取CSS属性的信息:

在客户端,选定的节点会用红色边框突出显示:

此外,可以切换到Modernizr标签来查看特定设备的功能:

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

关于如何构建Vorlon.js的更多信息

从一开始,就想要确保Vorlon.js保持尽可能的移动优先和平台中立。因此,决定使用开源技术,这些技术可以在更广泛的环境中共用。开发环境是Visual Studio Community,现在可以免费获得。使用了Node.JS工具和Azure进行后端开发。前端是JavaScript和TypeScript。如果不熟悉TypeScript,可以在这里了解为什么用它构建babylon.js。最近Angular 2也是用TypeScript构建的。但不必了解它就可以使用Vorlon.js。

Vorlon.js是基于可扩展性的理念构建的。鼓励做出贡献!还在考虑如何将VorlonJS集成到浏览器开发工具以及Web音频调试中。如果想尝试,只需点击一下:

。更多技术文档可以在上找到。

可能会感到惊讶,微软有很多关于许多开源JavaScript主题的免费学习资源,正在努力创建更多与Microsoft Edge相关的资源。查看:

  • WebGL 3D和HTML5以及Babylon.js的介绍
  • 使用ASP.NET和AngularJS构建单页应用程序
  • HTML中的尖端图形

或者团队的学习系列:

  • 实用的性能提示,让HTML/JavaScript更快(从响应式设计到休闲游戏到性能优化的7部分系列)
  • 现代Web平台JumpStart(HTML、CSS和JS的基础知识)
  • 使用HTML和JavaScript开发通用Windows应用程序JumpStart(使用已经创建的JS构建应用程序)
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485