Vorlonjs
A new, open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. Powered by node.js and socket.io
Top Related Projects
Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem
Node.js debugger based on Blink Developer Tools
Quick Overview
Vorlonjs is an open-source, cross-platform, remote debugging and testing tool for web applications. It allows developers to inspect, debug, and test their web applications from any device, including mobile devices, using a web-based interface.
Pros
- Remote Debugging: Vorlonjs enables remote debugging, allowing developers to inspect and debug their web applications from any device, including mobile devices.
- Cross-Platform: Vorlonjs is a cross-platform tool, supporting a wide range of devices and operating systems, including Windows, macOS, and Linux.
- Real-Time Inspection: Vorlonjs provides real-time inspection of the DOM, CSS, and JavaScript, allowing developers to quickly identify and fix issues.
- Extensible: Vorlonjs is designed to be extensible, with a plugin system that allows developers to add custom functionality to the tool.
Cons
- Limited Documentation: The project's documentation could be more comprehensive, making it challenging for new users to get started.
- Outdated Dependencies: Some of the project's dependencies may be outdated, which could lead to compatibility issues or security vulnerabilities.
- Lack of Active Maintenance: The project appears to have a low level of active maintenance, with the last commit being over a year ago.
- Limited Community Support: The project has a relatively small community, which may limit the availability of support and resources for users.
Code Examples
N/A (Vorlonjs is not a code library)
Getting Started
N/A (Vorlonjs is not a code library)
Competitor Comparisons
Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem
Pros of awesome-chrome-devtools
- Comprehensive collection of Chrome DevTools resources and extensions
- Regularly updated with community contributions
- Covers a wide range of development topics and use cases
Cons of awesome-chrome-devtools
- Limited to Chrome DevTools ecosystem
- Requires manual exploration to find relevant tools
- No built-in functionality; serves as a curated list
Code Comparison
While a direct code comparison isn't applicable due to the nature of these repositories, here's a brief example of how they might be used:
awesome-chrome-devtools:
# Chrome DevTools Protocol
- [Chrome DevTools Protocol Viewer](https://chromedevtools.github.io/devtools-protocol/)
- [Chrome DevTools Protocol GitHub](https://github.com/ChromeDevTools/devtools-protocol)
Vorlonjs:
var vorlon = require('vorlon');
vorlon.createServer();
vorlon.listen(1337);
awesome-chrome-devtools is a curated list of resources, while Vorlonjs is an actual debugging tool with its own API and functionality. The former provides a wealth of information and tools for Chrome DevTools users, while the latter offers a more focused, cross-browser debugging solution. awesome-chrome-devtools is more flexible and extensive in its coverage, but Vorlonjs provides a ready-to-use debugging environment out of the box.
Node.js debugger based on Blink Developer Tools
Pros of node-inspector
- More mature and established project with a longer history
- Supports older versions of Node.js
- Extensive documentation and community support
Cons of node-inspector
- No longer actively maintained (last commit in 2017)
- Limited to debugging Node.js applications
- Requires manual setup and configuration
Code Comparison
node-inspector:
var inspector = require('node-inspector');
inspector.open(9229, 'localhost', true);
Vorlonjs:
var vorlon = require('vorlon');
vorlon.createServer();
vorlon.listen(1337);
Additional Notes
Vorlonjs is a more modern and versatile debugging tool that supports multiple platforms and languages, including Node.js, browsers, and mobile devices. It offers a plugin-based architecture for extensibility and a user-friendly interface. However, it may have a steeper learning curve for developers accustomed to traditional Node.js debugging tools.
node-inspector, while no longer actively maintained, remains a reliable option for debugging Node.js applications, especially for older versions. It integrates well with Chrome DevTools, providing a familiar debugging experience for many developers.
When choosing between the two, consider factors such as the specific debugging requirements of your project, the platforms you need to support, and the level of community support and documentation available for each tool.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Vorlon.JS
A new, open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. Powered by node.js and socket.io.
Understand all about Vorlon.js in 20 minutes watching this video : https://channel9.msdn.com/Shows/codechat/046
Learn more at VorlonJS !
Chat with us on slack (get a free invite clicking on the badge below)
Deploy on Azure
Easy setup
Install and run the Vorlon.JS server from npm:
$ npm i -g vorlon
$ vorlon
With the server is running, open http://localhost:1337 in your browser to see the Vorlon.JS dashboard.
You may notice errors from Python, node-gyp and socket.io. This is a known issue already reported to socket.io team. This is not a blocking issue though as socket.io still works well even with this error :)
Custom port
[Linux]
$ PORT=3000 vorlon
[Windows]
c:\>SET PORT=3000 && vorlon
//Vorlon listening on port 3000
The last step is to enable Vorlon.JS by adding this to your app:
<script src="http://localhost:1337/vorlon.js"></script>
SSL Support
If you want to run the server with SSL support proceed as follows:
- Install Vorlonjs following the steps in Easy Setup
- Navigate to the installation folder
- Modify JSON file for activation SSL support
- In JSON file set to true
- If you want to replace our localhost certificate should only change the path of the files with the private key and certificate
- Exit and save JSON file
SSL Support on Azure
- Navigate to the installation folder
- Modify JSON file for activation SSLAzure support
- In JSON file set to true
- Exit and save JSON file
- Navigate with https protole on your Azure WebSite
Sample of azure hosted config.json file
{
"baseURL": "",
"useSSLAzure": true,
"useSSL": false,
"SSLkey": "cert/server.key",
....
...
}
Custom log file
By default Vorlon.JS application logs with debug level and files are stored in the installation folder. If you want to customize logs, proceed as follows :
- Navigate to the installation folder
- Modify JSON file, add or edit the "logs" section :
- enableConsole : enabled logging to the console,
- level : allowed values : info, warn, error
- filePath : folder where log files should be store
- vorlonLogFileName : name of Vorlon.JS log file,
- exceptionsLogFileName : name of the log files for exceptions
- Exit and save JSON file
[Windows]
C:\>cd %HOMEPATH%\node_modules\vorlon
C:\Users\Username\node_modules\vorlon>notepad Server/config.json
## JSON FILE ##
{
"useSSL": true,
"SSLkey": "server/cert/server.key",
"SSLcert": "server/cert/server.crt",
"includeSocketIO": true,
"plugins": [
{ "id": "CONSOLE", "name": "Interactive Console", "panel": "bottom", "foldername" : "interactiveConsole", "enabled": true},
{ "id": "DOM", "name": "Dom Explorer", "panel": "top", "foldername" : "domExplorer", "enabled": true },
{ "id": "MODERNIZR", "name": "Modernizr","panel": "bottom", "foldername" : "modernizrReport", "enabled": true },
{ "id" : "OBJEXPLORER", "name" : "Obj. Explorer","panel": "top", "foldername" : "objectExplorer", "enabled": true },
{ "id" : "XHRPANEL", "name" : "XHR","panel": "top", "foldername" : "xhrPanel", "enabled": true },
{ "id" : "NGINSPECTOR", "name" : "ngInspector","panel": "top", "foldername" : "ngInspector", "enabled": false }
],
"logs": {
"level" : "info",
"enableConsole" : true,
"filePath" : "E:\\temp",
"vorlonLogFileName": "vorlonjs.log",
"exceptionsLogFileName": "exceptions.log"
}
}
C:\Users\Username\node_modules\vorlon>vorlon
Vorlon with SSL listening on port 1337
With the server is 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 to your app:
<script src="https://localhost:1337/vorlon.js"></script>
Documentation
Read further documentation about Vorlon.JS, and writing your own plugins at http://vorlonjs.com/documentation.
Developing on Vorlon.JS
If you wish to work on Vorlon.JS's server or core plugin code, you'll need to clone this directory and work in it.
Vorlon is written in typescript, which is compiled with gulp. There are two main directories:
- /Server contains the code for the vorlon server, and the dashboard code
- /Server/Scripts contains the server and dashboard code
- /Server/public contains the dashboard files served by express web server
- /Plugins contains the code for vorlon core, and for the plugins
- /Plugins/samples contains the sample client web page you can use to test your dashboard
- /Plugins/Vorlon contains the client infrastructure code
- /Plugins/Vorlon/plugins contains default plugins
Compiling from source
There is a gulpfile.js
in the root folder of the repository. It contains gulp tasks to compile typescript to javascript for the plugins and the server. In addition it ensures that the compiled plugin code is copied in to the right place in the Server
directory.
To compile everything (plugins, then server) run this:
gulp
To compile only plugins run this :
gulp default-plugins
To compile only server run this :
gulp default-server
Compiling
The simplest way to run Vorlon.JS is to run npm start
from the root directory. This will run both gulpfiles to compile typescript and start the server.
gulp watch
You can also run the gulp commands individually. This is useful if you wish to work on plugins in particular, as gulp watch
will compile typescript for you automatically.
If you want to run gulp
commands from command line, you will need to first install gulp globally on your system with:
$ npm install -g gulp
You can now run gulp watch
in the root directory to have gulp compile typescript to javascript automatically You can also run gulp watch-plugins
or gulp watch-server
to only watch and compile the plugins or the server.
Plugin test page
There is a demo webpage that includes the vorlon code that you can open to test the dashboard behaviour. It lives at ./Plugins/samples/index.html. There is a gulptask in the Plugins
gulpfile to host it, just run gulp webserver
, and then navigate to http://localhost:1338/index.html to view the page.
Visual Studio users
For Visual Studio users, we provide an integrated solution through VorlonJS.sln. In order to interact with Node.js, you just need to install the NodeJS Tool for Visual Studio plugin. Once the plugin is installed, just open the solution and you'll be ready to develop for Vorlon.js
Visual Studio Code users
Visual Studio Code is a completly new code editor which is cross-platforms, free and light as hell ! You can do node.js debugging, there is intelliSense and so on (more about this on Code Website). There also is a task workflow integration and we prepared you a file in the repo which contains all for you to be able to hit the Ctrl+Shift+B to run the default task in the gulp file.
Committing & Pull Requests
Once you've made a change, you can commit and submit a pull request to this repository. You will also need to electronically sign the Microsoft Contributor License Agreement (CLA) if you wish for your changes to be merged.
When committing changes, ensure that compiled JavaScript files (those compiled from TypeScript) are not committed, only the original TypeScript files should be committed.
Contributing
Read CONTRIBUTING.md for more info on contributing to Vorlon.JS.
License
Vorlon.JS is released under the MIT license. Please see LICENSE for full details.
Top Related Projects
Awesome tooling and resources in the Chrome DevTools & DevTools Protocol ecosystem
Node.js debugger based on Blink Developer Tools
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot