Vorlon.js: Focus on DOM Explorer

In April 2015, our team of engineers and tech evangelists at Microsoft released vorlon.js - an open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. This article is the first in a series that will take a detailed look at one specific feature, starting with one of the biggest: the DOM Explorer.

Overview

If you’re not familiar with vorlon.js, I recommend first reading this blog post, which explains why we made vorlon.js and how to use it. You’ll find additional vorlon.js information at the end of this article.

The DOM inspector shows you the DOM of the remote webpage. You can inspect the DOM, clicking on nodes will highlight them in the host webpage, and if you select one you can also view and modify its CSS properties.

Installing Vorlon.js

Just as a reminder, here is what you have to do to use Vorlon.js:

• Install and run the Vorlon.JS server from npm:

  $ npm i -g vorlon
  $ vorlon
  

• Once Vorlon.js is done installing, you can now run the server:

  $ vorlon
  The Vorlon server is running
  

• With the server is running, open http://localhost:1337 in your browser to see the Vorlon.js dashboard.
• The last step is to enable Vorlon.js by adding this script tag to your app:

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

Now when you open your app you should see your client appear on the dashboard.

Using the DOM Explorer

By default, the DOM explorer is on but if you need to enable it, you have to go to [Vorlon folder]\Server\config.json and enable the plugin:

{
    "useSSL": false,
    "includeSocketIO": true,
    "activateAuth": false,
    "username": "",
    "password": "",
    "plugins": [
        { "id": "DOM", "name": "Dom Explorer", "panel": "top", "foldername": "domExplorer", "enabled": true }
    ]
}

Once enabled you will be able to control almost everything related to the DOM through plugin’s main window.

Continue reading %Vorlon.js: Focus on DOM Explorer%

by David Catuhe via SitePoint