VorlonJS remote debugging and testing tool for JavaScript

Hello Developers!
Working with the web, there is a lot of heavy-lifting done on the front-end with JavaScript. Now, scripts take  a considerable amount of time to debug and test on different browsers and devices. You need a tool that is easy to set up, platform-agnostic and extensible. There is a tool out there with these specs! VorlonJS, is that tool which allows you to remotely load, inspect, test and debug JavaScript code running on any device with a web browser.
It is a new, open source, extensible and platform-agnostic tool for remotely debugging and testing JavaScript. It is powered by node.js and socket.io.  Vorlon.js itself is a small web server you can run from your local machine, or install on a server for your team to use, that serves the Vorlon.JS dashboard and communicates with your remote devices. Vorlon is written in typescript, which is compiled with gulp (if you are wondering ) and you can find the source-code here on this GitHub repo https://github.com/MicrosoftDX/Vorlonjs. Vorlon.js can be extended with plugins which may add features to both the client and the dashboard, such as: feature detection, logging, and exception tracking.

Getting started with Vorlon.js is as easy as the following steps:
Install and run the Vorlon.JS server from npm

$ npm i -g 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 the following script tag to your web app:

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

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

To make it even simpler, you can also open this sample page, which already has this script tag in it, to test your dashboard.

The team there has already shipped vorlonjs 0.0.15 with some great additions:

  • Plugins
    • New plugin: XHR Panel to track xhr calls
    • Add envelope and commands for messages between dashboard and client
    • New control bar component available for plugins
    • Moving all CSS to LESS
    • Huge improvements for DOM Explorer
    • Loaded on demand
    • Direct inner text edit
    • Attributes display and edit
    • Hover coloration
    • Edit content as HTML
    • right-click context menu on DOM node (with shortcuts to attribute, HTML edit, …)
    • settings panel to define behavior
    • search nodes by CSS selectors
    • refresh through MutationObserver, if available in client browser
    • view layout info (margin, padding, size)
    • computed styles panel
    • Improvements on console plugin
    • history for commands
    • support for logging objects and console.dir
    • filtering on console entries
    • Moving catalog.json to /server/config.json
  • Core
    • New option to remove socket.io from vorlon.js in catalog.json file
    • Simplified plugin description in catalog.json file

Check it out, it is a very cool and powerful tool. A total must for web developers honestly.

Happy Scripting!

Posted in Web Development Tagged with: ,