Recently at//BUILD/ 2015 we announcedVorlon.js—an open source,extensible, platform-agnostic tool for remotely debugging and testing yourJavaScript. I had the opportunity to create Vorlon.js with the help of sometalented engineers and tech evangelists at Microsoft (the same guys thatbrought youBabylon.js).

Vorlon.js is powered by Node.js,Socket.IO, and late-night coffee. I would like to share with you why we madeit and how to incorporate it into your own testing workflow, as well as sharing somemore details on the art of building a JavaScript library like it.

Why Vorlon.js?

Vorlon.js helps youremotely load, inspect, test and debug JavaScript code running on any devicewith a web browser. Whether it is a game console, mobile device, or even an IoT-connected refrigerator, you can remotely connect up to 50 devices and executeJavaScript in each or all of them. 

The idea here is that dev teams can alsodebug together—each person can write code, and the results are visible to all.We had a simple motto in this project:No native code, no dependencyto a specific browser,only JavaScript, HTML and CSS running on thedevices of your choice.

Vorlon.js itself is asmall web server you can run from your local machine, or install on a serverfor your team to access, that serves the Vorlon.js dashboard (your commandcenter) and communicates with the remote devices. 

Installing the Vorlon.jsclient in your web site or app is as easy as adding a single script tag. It'salso extensible, so devs can write plug-ins that add features to both theclient and the dashboard, such as feature detection, logging, andexception tracking.

So why the name? Thereare actually two reasons. The first one is because I am just crazy aboutBabylon 5 (the TV show). Based onthis, the second reason is because theVorlons are one of the wisestand most ancient races in the universe and thus, they are helpful as diplomatsbetween younger races. Their helpfulness is what inspired us: for web devs,it's still just too hard to write JavaScript that works reliably in the variousdevices and browsers. Vorlon.js seeks to make it just a little easier.

You MentionedVorlon.js Has Plug-ins?

Vorlon.js has beendesigned so that you can extend the dashboard and client application easily bywriting or installing additional plugins. You can resize or add extra panes tothe dashboard which can communicate bidirectionally with the clientapplication. There are three plug-ins to begin with:

Console

Logging: The console tab will stream console messages from the client to thedashboard that you can use for debugging. Anything logged withconsole.log(),console.warn()orconsole.error() will appear in the dashboard. Like theF12 Dev ToolDOM explorer, you can see the DOM tree, select a node (which will behighlighted on the device, and update or add new CSS properties).

Interactivity:You can also interact with the remote webpage by typing code into the input.Code entered will be evaluated in the context of the page.

DOM Explorer

TheDOM 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 selectone you can also view and modify its CSS properties.

Modernizr

TheModernizr tab will show you the supported browser features as reported byModernizr. You can use this todetermine what features are actually available. This might be particularlyuseful on unusual mobile devices, or things like games consoles.

How Do I Use It?

From your node commandline, just execute this:

1

$ npm i -g vorlon

2

3

$ vorlon

Now you have a serverrunning on your localhost on port 1337. To get access to the dashboard, just navigate tohttp://localhost:1337/dashboard/SESSIONID, whereSESSIONID is theid for the current dashboard session. This can be any string you want.

You have then to add asingle reference in your client project:

1

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

Please note thatSESSIONID can be omitted and in this case, it will beautomatically replaced by "default". 

And that's it! Now your client will send debug information to your dashboardseamlessly. Let's now have a look at an example using a real site. 

DebuggingBabylonjs.com Using Vorlon.js

Let's usehttp://www.babylonjs.com/ for our example. First,I have to launch my server (using node start.js inside the/server folder).Then, I just have to add this line to my client site:

1

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

Because I am not definingaSESSIONID, I can just go tohttp://localhost:1337/dashboard. Thedashboard looks like this:

Sidenote: The browser shown aboveis Microsoft Edge (formerly known asProject Spartan), Microsoft's newbrowser for Windows 10. You can also test your web apps for it remotely on yourMac, 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 Idebug 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, theselected node is highlighted with a red border:

Moreover, I can switch to theModernizr tab to see the capabilities of my specific device:

On the left side, you cansee the list of currently connected clients and you can use theIdentify aclient button to display a number on every connected device.

A Little More onHow We Built Vorlon.js

From the very beginning,we wanted to be sure that Vorlon.js remains asmobile-first andplatform-agnosticas possible. So we decided to use open source tech that worked across thebroader number of environments.

Our dev environment wasVisual Studio Community which you canget for free now. We used theNode.js tools for Visual Studio andAzurefor the back-end. Our front-end was JavaScript and TypeScript. If you're notfamiliar with TypeScript, you can learn why we've built Babylon.js with itin this blog post. RecentlyAngular 2 has been built withTypeScript. But you don't have to know it to use Vorlon.js.

Here's a global schema ofhow it works:

 Here are the parts we built it with:

• ANode.js server is hosting a dashboard page (served using Express) and a service.
• The service is usingSocket.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 consoleplugin works this way:

• The client side generates a hook on top ofconsole.log(),console.warn() orconsole.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 aremote console:

You can get an evenbetter understanding of Vorlon.js extensibility, including how to build your ownplug-ins, at the Vorlon.js website.

What's Next?

Vorlon.js is built on theidea ofextensibility. We encourage you to contribute! And we're already thinking about how we might integrate Vorlon.js into browser dev tools as well as WebAudio debugging.

If you want to try it,you are just one click away:vorlonjs.com. Andthe more technical docs are onour GitHub.

More Hands-On WithJavaScript

It might surprise you a bit, but Microsofthas a bunch of free learning on many open source JavaScript topics, and we’re ona mission to create a lot more withMicrosoft Edge. Check out my own:

• 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:

• Practical Performance Tips to Make your HTML/JavaScript Faster (a seven-part series fromresponsive design to casual games to performance optimization)
• The Modern Web Platform Jump Start (the fundamentals ofHTML, CSS, and JS)
• Developing Universal Windows App with HTML and JavaScript Jump Start (use the JS you’vealready created to build an app)

And some free tools:Visual Studio Community,Azure Trial, andcross-browser testing tools for Mac, Linux, orWindows.

This article is part of the web dev techseries from Microsoft. We’re excited to shareMicrosoftEdge and the newEdgeHTMLrendering engine with you. Get free virtual machines or test remotely onyour Mac, iOS, Android, or Windows device @http://dev.modern.ie/.