Vorlon.js：专注于 DOM 浏览器

David Catuhe

5.00/5 (4投票s)

2015年9月29日

CPOL

5分钟阅读

13161

本文是系列文章的第一篇，该系列将深入探讨 Vorlon.js 的一项特定功能，从最大的功能之一开始：DOM 浏览器。

2015 年 4 月，我们微软的工程师和技术传道者团队发布了 vorlon.js—一个开源、可扩展、平台无关的工具，用于远程调试和测试您的 JavaScript。本文是系列文章的第一篇，该系列将深入探讨一项特定功能，从最大的功能之一开始：DOM 浏览器。

概述

如果您不熟悉 vorlon.js，我建议您先阅读这篇博文，它解释了我们为什么创建 vorlon.js 以及如何使用它来远程调试您的 JavaScript。您将在本文末尾找到更多 vorlon.js 信息。

DOM 浏览器向您显示远程网页的 DOM。您可以检查 DOM，点击节点会在宿主网页中突出显示它们，如果您选择了一个节点，还可以查看和修改其 CSS 属性。

安装 Vorlon.js

在此提醒一下，要使用 Vorlon.js，您需要执行以下操作：

从 npm 安装并运行 Vorlon.JS 服务器

$ npm i -g vorlon
$ vorlon

Vorlon.js 安装完成后，您现在可以运行服务器了。

$ vorlon

Vorlon 服务器正在运行

服务器运行后，在您的浏览器中打开 https://:1337 以查看 Vorlon.js 仪表板。
最后一步是通过将此脚本标签添加到您的应用程序来启用 Vorlon.js：

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

现在，当您打开您的应用程序时，您应该会在仪表板上看到您的客户端。

使用 DOM 浏览器

默认情况下，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 相关的内容。