This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
Recently at //BUILD/ 2015 we announced Vorlon.js—an open source,
extensible, platform-agnostic tool for remotely debugging and testing your
talented engineers and tech evangelists at Microsoft (the same guys that
brought you Babylon.js).
Vorlon.js itself is a small web server you can run from your local machine, or install on a server for your team to access, that serves the Vorlon.js dashboard (your command center) and communicates with the remote devices.
Installing the Vorlon.js client in your web site or app is as easy as adding a single script tag. It's also extensible, so devs can write plug-ins that add features to both the client and the dashboard, such as feature detection, logging, and exception tracking.
You Mentioned Vorlon.js Has Plug-ins?
Vorlon.js has been designed so that you can extend the dashboard and client application easily by writing or installing additional plugins. You can resize or add extra panes to the dashboard which can communicate bidirectionally with the client application. There are three plug-ins to begin with:
Logging: The console tab will stream console messages from the client to the
dashboard that you can use for debugging. Anything logged with
console.error() will appear in the dashboard. Like the F12 Dev Tool
DOM explorer, you can see the DOM tree, select a node (which will be
highlighted on the device, and update or add new CSS properties).
The DOM inspector shows you the DOM of the remote webpage. You can inspect the DOM, clicking on nodes to highlight them in the host webpage, and if you select one you can also view and modify its CSS properties.
The Modernizr tab will show you the supported browser features as reported by Modernizr. You can use this to determine what features are actually available. This might be particularly useful on unusual mobile devices, or things like games consoles.
How Do I Use It?
From your node command line, just execute this:
$ npm i -g vorlon $ vorlon
Now you have a server
running on your localhost on port 1337. To get access to the dashboard, just navigate to http://localhost:1337/dashboard/SESSIONID, where
SESSIONID is the
id for the current dashboard session. This can be any string you want.
You have then to add a single reference in your client project:
Please note that
SESSIONID can be omitted and in this case, it will be
automatically replaced by "default".
And that's it! Now your client will send debug information to your dashboard seamlessly. Let's now have a look at an example using a real site.
Debugging Babylonjs.com Using Vorlon.js
Let's use http://www.babylonjs.com/ for our example. First,
I have to launch my server (using node start.js inside the
Then, I just have to add this line to my client site:
Because I am not defining
SESSIONID, I can just go to http://localhost:1337/dashboard. The
dashboard looks like this:
Sidenote: The browser shown above is Microsoft Edge (formerly known as Project Spartan), Microsoft's new browser for Windows 10. You can also test your web apps for it remotely on your Mac, iOS, Android, or Windows device @ http://dev.modern.ie/. Or try Vorlon.js too.
Back to it: I can see console messages for instance, which is useful when I debug Babylon.js on mobile devices (like iOS, Android or Windows Phone). I can click on any node on the DOM Explorer to get info about CSS properties:
On the client side, the selected node is highlighted with a red border:
Moreover, I can switch to the Modernizr tab to see the capabilities of my specific device:
On the left side, you can see the list of currently connected clients and you can use the Identify a client button to display a number on every connected device.
A Little More on How We Built Vorlon.js
From the very beginning, we wanted to be sure that Vorlon.js remains as mobile-first and platform-agnostic as possible. So we decided to use open source tech that worked across the broader number of environments.
Here's a global schema of how it works:
Here are the parts we built it with:
- A Node.js server is hosting a dashboard page (served using Express) and a service.
- The service is using Socket.IO to establish a direct connection with both the dashboard and the various devices.
- Devices have to reference a simple Vorlon.js page served by the server. It contains all the plugins' client code which interacts with the client device and communicates with the dashboard through the server.
- Every plug-in is split in two parts:
- the client side, used to capture information and to interact with the device
- the dashboard side, used to generate a command panel for the plugin inside the dashboard
For instance, the console plugin works this way:
- The client
side generates a hook on top of
console.error(). This hook is used to send the parameters of these functions to the dashboard. It can also receive orders from the dashboard side that it will evaluate.
- The dashboard side gathers these parameters and displays them on the dashboard.
The result is simply a remote console:
You can get an even better understanding of Vorlon.js extensibility, including how to build your own plug-ins, at the Vorlon.js website.
Vorlon.js is built on the idea of extensibility. We encourage you to contribute! And we're already thinking about how we might integrate Vorlon.js into browser dev tools as well as Web Audio debugging.
- Introduction to WebGL 3D with HTML5 and Babylon.JS
- Building a Single Page Application with ASP.NET and AngularJS
- Cutting Edge Graphics in HTML
Or our team’s learning series:
- The Modern Web Platform Jump Start (the fundamentals of HTML, CSS, and JS)
This article is part of the web dev tech series from Microsoft. We’re excited to share Microsoft Edge and the new EdgeHTML rendering engine with you. Get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device @ http://dev.modern.ie/.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post