Vorlon.js 是一个强大的远程调试和测试 JavaScript 的工具。本文是一系列文章中的第一篇，将详细探讨 Vorlon.js 的一个特定功能——DOM Explorer。
如果对 Vorlon.js 不熟悉，建议首先阅读，它解释了为什么创建 Vorlon.js 以及如何使用它。可以在本文末尾找到更多关于 Vorlon.js 的信息。
DOM 检查器可以显示远程网页的 DOM。可以通过点击节点在宿主网页上高亮显示它们，并且如果选择一个节点，还可以查看和修改它的 CSS 属性。
作为提醒，以下是使用 Vorlon.js 需要做的步骤：
从 npm 安装并运行 Vorlon.js 服务器：
$ npm i -g vorlon
$ vorlon
一旦 Vorlon.js 安装完成，现在可以运行服务器：
$ vorlon
Vorlon 服务器正在运行
服务器运行后，在浏览器中打开 以查看 Vorlon.js 的仪表板。
最后一步是通过添加这个脚本标签来启用 Vorlon.js：
现在当打开应用程序时，应该能在仪表板上看到客户端。
默认情况下，DOM 探索器是开启的，但如果需要启用它，必须去 [Vorlon 文件夹] \ Server \ config.json 并启用插件：
{
"useSSL": false,
"includeSocketIO": true,
"activateAuth": false,
"username": "",
"password": "",
"plugins": [
{
"id": "DOM",
"name": "Dom Explorer",
"panel": "top",
"foldername": "domExplorer",
"enabled": true
}
]
}
一旦启用，将能够通过插件的主窗口控制几乎所有与 DOM 相关的内容。
以下是将能够做的事情：
选择覆盖层 通过将鼠标悬停在任何节点上，将能够看到这个节点在客户端属于哪里：
实时文本编辑 通过双击 DOM 探索器窗口中的任何文本，有能力实时编辑它：
但也可以使用右侧窗格中的 HTML 部分来编辑 HTML 文本内容：
这个功能也可以通过右键单击节点本身来访问。
属性编辑 节点的属性也可以通过单击它们来编辑：
但也可以右键单击节点名称本身来添加新属性：
通过右键单击现有属性，将获得更多选项，如更新值或名称或删除属性：
使用 CSS 选择器搜索 当处理大型 HTML 页面时，可能想要搜索特定的节点。这就是引入“按 CSS 选择器搜索节点”功能的原因。
只需在搜索框中输入选择器即可完成！
动态刷新 DOM Explorer 窗口可以在客户端 DOM 更改时自动刷新（请注意，这可能会消耗大量的 CPU 功率和网络带宽，即使使用增量更新），也可以按需刷新。
自动刷新在设置窗格中控制：
当自动刷新关闭时，刷新按钮可以告诉客户端是否有可用的更新（按钮上的小点会变成红色）：
在这种情况下，只需单击按钮即可启动页面的完整刷新
样式编辑器 当单击一个节点时，样式窗格将为呈现为这个节点明确定义的所有样式：
然后可以使用“+”按钮来添加新样式或单击现有样式来更改它们的值：
要查看应用于节点的所有样式（包括隐式样式），请使用“计算样式”窗格：
布局 像浏览器的 F12 工具一样，布局窗格在这里帮助理解选择的每个节点的布局：
与交互式控制台插件链接 最后，可能会发现有用的东西：当一个节点有一个 ID 时，可以单击节点右侧的小按钮，将其直接链接到交互式控制台，在那里将能够执行想要的代码：