远程调试和测试 Javascript：新的 vorlon.JS 插件

Etienne Margraff

5.00/5 (2投票s)

2015 年 9 月 10 日

CPOL

6分钟阅读

11051

远程调试和测试 Javascript：新的 vorlon.JS 插件

2015 年 4 月，我们微软的工程师和技术布道师团队推出了 Vorlon.js——一个开源、可扩展、平台无关的工具，用于远程调试和测试您的 JavaScript。

在微软 Build 开发者大会的开幕演讲中发布该项目时，我们只有三个插件：DOM 浏览器、交互式控制台和 Modernizr。我们当时就知道，像 Vorlon 这样的项目的成功关键在于插件的数量和质量。当您想调试网站时，您不想做太多复杂的事情。您只想选择正确的插件并获取正确的信息。

这就是我们为什么将此项目开源的原因。我们知道您有很多想法，可以为 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 面板 可帮助您获取通过 XMLHttpRequest 完成的请求列表。您可以选择启用或禁用录制，方法是单击播放按钮。

网络监视器 让您能够在 Vorlon 中查看浏览器和 Web 服务器之间进行的所有网络通信。它提供资源名称、服务器域、请求类型、持续时间（毫秒）以及精美的可视化时间轴！

资源浏览器 可为您提供有关客户端浏览器实例本地存储的信息。包括会话、Cookie 和本地存储的数据。当您想要调试本地缓存或登录/持久用户数据问题时，这会非常有用。

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

插件改进

DOM 浏览器 得到了极大的改进。

以前，此插件会在每次更改时将所有 DOM 数据从客户端发送到仪表板。这严重影响了性能。现在已修复此问题，您可以通过手动点击刷新按钮来刷新客户端的 DOM，或在设置窗格中激活自动刷新。自动刷新更智能，并在可用时使用客户端浏览器的 MutationObserver。

奖励功能：当客户端 DOM 更改时，刷新按钮中的圆形指示器会变为红色！ ;-)

正如您所见，DOM 浏览窗格更美观，也更易于阅读。

您现在可以通过单击 HTML 内容和属性来编辑它们。按 Enter 键后，更改将应用于客户端。

DOM 突出显示功能更易于访问。当您的鼠标悬停在 Vorlon 仪表板的 DOM 浏览器中的 DOM 元素上时，就会发生此效果。

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

在右侧窗格中，您现在可以看到比仅显示实际 CSS 代码更多的信息。

布局选项卡提供了您在经典 F12 工具中习惯获取的信息：边距、内边距、边框和大小信息。

计算样式也一样，它包含所有显式应用和隐式继承的 CSS 样式。

HTML 选项卡是编辑 DOM 中文本的更好工具。您可以进行换行，然后按保存按钮应用更改。

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

交互式控制台也获得了一些新功能。

我们支持 windows.onerror、console.dir 和复杂的对象日志。您可以使用可视化树导航对象属性。提供了过滤器，以仅显示日志的子集，您还可以使用类似搜索的文本区域进行过滤。

其他更改和改进

我们在代码组织和结构方面进行了许多其他更改，这些更改在插件和功能中并不直接可见。

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

我们还将插件拆分成了 2 个独立的文件。最初，一个插件只包含一个 JavaScript 文件，其中包含仪表板和客户端的代码。这在项目开始时更容易。现在，随着更复杂的插件的创建以及出于优化原因，我们将其拆分成了 2 个不同的文件：yourplugin.client.js 和 yourplugin.dashboard.js。

您可以在我们 GitHub 存储库中的 whatsnew.md 文件中阅读有关我们所做更改的更多信息：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：新的 vorlon.JS 插件

新插件

插件改进

其他更改和改进

接下来是什么？

更多关于 JavaScript 的实践