Build 2015 and Vorlon.js

  • Article

As promised, here is the second in the series of technical articles following the Build 2015 conference. This post is dedicated to Vorlon.js. So what is Vorlon?  It is a new, open source, extensible, browser-agnostic tool for remotely debugging your JavaScript all powered by node.JS and socket.io.

Yep - imagine being able to easily use any browser to debug your web site or web app running anywhere.

What we demonstrated at Build went a little further. In the keynote, I used manifold.js (see my last post for more on that) to turn a responsive web site into mobile applications. In less than a minute, I converted the web site into mobile apps for iOS, Android, Chrome, Firefox, Windows 8, and Windows 10.  And on Windows 10 it is a universal Windows app that runs across Windows phone, desktop, tablet and Xbox.   Doing that is very easy – and a pretty cool way to quickly create both a web site and all of the mobile apps for the most widely used platforms.

Now with Vorlon, you can debug the web site and any of these mobile apps – all remotely.

There are of course other great tools out there that offer full-featured remote web debugging. Google offers such tools for Android and Chrome. Apple and Microsoft offers tools for their browsers and apps as well. We built Vorlon.JS with node.js and socket.io so it can work anywhere – it works from any browser to any JavaScript execution environment.  Right now this also means that Vorlon.js has some significant limitations compared to these other tools – for example, you can’t set breakpoints and step through code – but members of the open source team are working to add these features in the future.

Getting started is easy. Vorlon.JS is available as a node package, installed easily using NPM.

$ npm install –g vorlon

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

$ vorlon
The Vorlon server is running

With the server running, open https://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 / website:

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

 

Here we are showing using localhost which is great for development-time debugging.  If you want to enable debugging for anyone using your apps on the Internet you will need to setup a public IP address for your Vorlon server.

Once inside the dashboard, you can start remotely debugging your app or your web site. Sometimes you will be debugging more than one app on your machine, and it’s easy to see which app is which using the client list feature.

 

With the DOM inspector you can quickly navigate the DOM of the remote webpage. You can inspect by clicking on nodes which will highlight them in the host webpage. If you select a node you can also view and modify its CSS properties.

The console lets you run Javascript remotely so you can look at values or take actions within the application.

The Modernizr tab will show you the supported browser features as reported by Modernizr. You can use this to determine what features are available by browser and platform. This might be useful on unusual mobile devices or games consoles.

We’ve tested Vorlon.JS with 50 JavaScript client debugging sessions at once regardless of the platform or device running the client-side code.

And importantly it is open source and extensible. Vorlon.JS has been designed so that you can extend the dashboard and client application easily by writing or installing additional plugins.

Check out Vorlon here https://www.vorlonjs.com and you can get the code from Github at https://github.com/MicrosoftDX/Vorlonjs.