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

在微软Build开发者大会的主题演讲中,推出了Vorlon.js项目。最初,只有三个插件:DOM Explorer、Interactive Console和Modernizr。意识到,对于像Vorlon.js这样的项目来说,成功的关键因素在于插件的数量和质量。当想要调试网站时,并不希望进行复杂的操作。只需要选择正确的插件并获取正确的信息。

这就是为什么将这个项目开源的原因。知道有很多想法,可以为Web开发者提供出色的调试体验。

所以...经过2个月的努力,66次拉取请求,78个问题和547次提交之后:(和团队)自豪地宣布刚刚发布了Vorlon.js版本0.0.15!可以通过克隆GitHub仓库(https://github.com/MicrosoftDX/Vorlonjs)或者使用npm命令工具(npm install –g vorlon)来获取它。

注意:如果还在好奇Vorlon.js是什么,请先阅读David Catuhe的这篇文章:http://blogs.msdn.com/b/eternalcoding/archive/2015/04/30/why-we-made-vorlon-js-and-how-to-use-it-to-debug-your-javascript-remotely.aspx

让看看这个版本有什么新内容。

新插件

XHR Panel插件可以帮助获取通过XMLHttpRequest完成的请求列表。可以选择使用播放按钮启用或禁用录制。

Network Monitor插件为提供了在Vorlon中查看浏览器和Web服务器之间所有网络交换的能力。它提供了资源名称、服务器域、请求类型、毫秒为单位的持续时间以及一个漂亮的视觉时间线!

Resource Explorer插件为提供了关于客户端浏览器实例上存储的信息。有关会话、Cookie和LocalStorage的数据。当想要调试本地缓存或登录/持久用户数据问题时,这非常有用。

NG Inspector是一个Angular.js的$scope调试器。可以轻松访问每个作用域中存储的所有值。这个版本提供了信息,未来的版本将允许编辑作用域。

插件改进

DOM Explorer插件已经改进了很多。

以前,这个插件每次DOM数据发生变化时都会将所有DOM数据从客户端发送到仪表板。这对性能有很大的影响。现在这个问题已经解决了,可以通过手动点击刷新按钮或者在设置窗格中激活自动刷新来从客户端刷新DOM。自动刷新更智能,如果客户端浏览器上可用,它将使用MutationObserver。

额外功能:当客户端的DOM发生变化时,刷新按钮上的圆形指示器会变成红色!

正如看到的,DOM Exploring窗格现在更美观,更易于阅读。

现在可以通过点击它来编辑HTML内容和属性。当按下ENTER键时,更改将在客户端应用。

DOM高亮显示功能现在更容易访问。当鼠标悬停在Vorlon仪表板的DOM资源管理器中的DOM元素上时,就会发生这种情况。

还可以右键单击元素来删除或编辑内容。这是启用属性删除的最佳人体工程学方式。

在右侧窗格中,现在拥有的不仅仅是真实的CSS代码。

布局标签为提供了在经典F12工具中习惯获取的信息:边距、填充、边框和大小信息。

同样的事情也适用于计算样式,它包含所有显式和隐式继承的CSS样式。

HTML标签是编辑DOM文本的更好工具。可以进行换行,并在按下保存按钮后应用更改。

最后,设置部分是可以激活DOM自动刷新的地方。

交互式控制台也有一些新功能。

有windows.onerror、console.dir和复杂的对象日志支持。可以使用可视化树浏览对象属性。过滤器可用于仅显示日志的子集,可以使用类似搜索的文本区域进行过滤。

其他更改和改进

在代码组织和结构上做了很多其他更改,这些更改在插件和功能中并不直接可见。

例如,重命名并移动了包含插件列表和一些参数的catalog.json文件到服务器文件夹。现在它被称为config.json,因为一些参数与插件无关。为了避免复制粘贴,为了简化调试和使用,还在config.json中的插件配置中添加了一个名为enabled的布尔参数。如果对于特定插件为false,它将不会在仪表板中加载,也不会在生成的vorlon.js文件中发送到客户端。

还将插件分成了两个单独的文件。最初,插件只包含一个JavaScript文件,包含仪表板和客户端的代码。当开始这个项目时,这更容易。现在创建了更复杂的插件,出于优化的原因,将这个分成了两个不同的文件:yourplugin.client.js和yourplugin.dashboard.js。

可以在GitHub仓库上阅读所做的更改:https://github.com/MicrosoftDX/Vorlonjs/blob/master/whatsnew.md

下一步是什么?

现在正在开发下一个版本,它将包含新的插件和核心改进。认证、WebGL、WebAudio都是列表的一部分!

正如所说的,希望这个项目成为Web开发者的项目。如果有一个想法,可以通过以下方式提交:

在GitHub上提交问题:https://github.com/MicrosoftDX/Vorlonjs/issues

自己创建并提交拉取请求(每天都会审查!)

注意:为了帮助学习如何创建插件,写了这个:http://bit.ly/vorlonplugin

让共同努力,使Vorlon.js的调试体验更轻松、更好。

不要忘记关注团队Twitter账户:http://twitter.com/vorlonjs

这篇文章是微软技术传道者关于实用的JavaScript学习、开源项目和互操作性最佳实践的Web开发系列文章的一部分,包括Microsoft Edge浏览器和新的EdgeHTML渲染引擎。

鼓励在包括Microsoft Edge在内的浏览器和设备上进行测试——Windows 10的默认浏览器——以及在dev.modern.IE上的免费工具:

扫描网站,查找过时的库、布局问题和可访问性问题

使用Mac、Linux和Windows的虚拟机

在自己设备上远程测试Microsoft Edge

GitHub上的编码实验室:跨浏览器测试和最佳实践

来自工程师和传道者的深入技术学习,关于Microsoft Edge和Web平台:

Microsoft Edge Web峰会2015(新浏览器、新支持的Web平台标准以及来自JavaScript社区的嘉宾演讲者的预期)

哇,可以在Mac和Linux上测试Edge和IE!(来自Rey Bango)

在不破坏Web的情况下推进JavaScript(来自Christian Heilmann)

使Web正常工作的Edge渲染引擎(来自Jacob Rossi)

释放3D渲染能力与WebGL(来自David Catuhe,包括vorlon.JS和babylonJS项目)

托管Web应用和Web平台创新(来自Kevin Hill和Kiril Seksenov,包括manifold.JS项目)

更多免费的跨平台工具和Web平台资源:

适用于Linux、MacOS和Windows的Visual Studio Code

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485