Introduction
\nVorlon.JS is a remote debugging and testing tool for JavaScript. It helps you remotely load inspect, test and debug JavaScript code running on any device with a web browser: whether it's a games console, mobile device or fridge.
\nVorlon.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 and communicates with your remote devices. Installing the Vorlon.JS client in your web site or application is as easy as adding a single script tag.
\nVorlon.JS can be extended with plugins which may add features to both the client and the dashboard, for example: feature detection, logging, and exception tracking.
\n","headers":[{"depth":"1","title":"Introduction","slug":"introduction"}]},{"meta":{"section":"installation","title":"Installing Vorlon.JS","sequence":1},"html":"Installing Vorlon.JS
\nVorlon.JS Server
\nTo get started using Vorlon.JS you will need to install it from npm:
\n$ npm i -g vorlon\nOnce Vorlon.JS is done installing, you can now run the server:
\n$ vorlon\nThe Vorlon server is running\nWith the server running, open http://localhost:1337 in your browser to see the Vorlon.JS dashboard.
\nVorlon.JS Client
\nBefore you can start debugging your app you have to enable it to communicate to the Vorlon.JS Server by adding this script tag to your application’s html:
\n<script src=\"http://localhost:1337/vorlon.js\"></script>\nYou can also open the sample page to test that your dashboard is working. You should see the client appear in your dashboard when you open that page.
\nVorlon.JS Client advanced topics
\nIf you want to get an unminified version of the plugins on your web page, you can use the following script tag:
\n<script src=\"http://localhost:1337/vorlon.max.js\"></script>\nYou can have more control on the moment the client side part is starting by using the autostartdisabled version:
\n<script src=\"http://localhost:1337/vorlon.autostartdisabled.js\"></script>\nwhich also exist with the unminified version of the code:
\n<script src=\"http://localhost:1337/vorlon.max.autostartdisabled.js\"></script>\nOnce this is done, you can start the vorlon client and connect it to the dashbard of you choice using the session id you want:
\nVORLON.Core.StartClientSide(\"http://localhost:1337\", \"default\");\nVorlon.JS Server advanced topics
\nIf you do not want to use a specific plugin in your dashboard and disable it also on the client part, you can use the config.json file on the server.\nTo be able to do this, you need to use Vorlon.js downloaded and installed from the GitHub repository. You can also modify the package downloaded from npm but this is not recommended.
\nThe file is located on the following folder :
\nServer/config.json\nBy default, it looks like this :
\n{\n \"includeSocketIO\": true,\n \"useSSLAzure\": false,\n \"useSSL\": true,\n \"SSLkey\": \"cert/server.key\",\n \"SSLcert\": \"cert/server.crt\",\n \"plugins\": [\n { \"id\": \"CONSOLE\", \"name\": \"Interactive Console\", \"panel\": \"bottom\", \"foldername\" : \"interactiveConsole\", \"enabled\": true},\n { \"id\": \"DOM\", \"name\": \"Dom Explorer\", \"panel\": \"top\", \"foldername\" : \"domExplorer\", \"enabled\": true },\n { \"id\": \"MODERNIZR\", \"name\": \"Modernizr\",\"panel\": \"bottom\", \"foldername\" : \"modernizrReport\", \"enabled\": true },\n { \"id\" : \"OBJEXPLORER\", \"name\" : \"Obj. Explorer\",\"panel\": \"top\", \"foldername\" : \"objectExplorer\", \"enabled\": true },\n { \"id\" : \"XHRPANEL\", \"name\" : \"XHR\",\"panel\": \"top\", \"foldername\" : \"xhrPanel\", \"enabled\": true },\n { \"id\" : \"NGINSPECTOR\", \"name\" : \"ngInspector\",\"panel\": \"top\", \"foldername\" : \"ngInspector\", \"enabled\": false }\n ]\n}\nIt is obviously using the JSON (JavaScript Simple Object Notation) format and is easy to understand: each line in the \"plugins\" array represents a plugin.
\nFor instance, you can change the folder where the plugin is installed. This folder has to be located under:
\nServer/public/vorlon/plugins\nBy convention, this name needs to be the same as the JavaScript file for the plugin for either the max file:
\n{FOLDERNAME}.js\nand the min version:
\n{FOLDERNAME}.min.js\nYou can also choose in which panel the plugin should be displayed using the \"panel\" property. It can be either \"bottom\" or \"top\".
\nYou can add and remove plugins here. \nIt will impact the dashbard by not displaying a removed plugin and also the client JavaScript file which is sent to the client website.
\nWe also added the option to NOT automatically include socket.io in the script returned to the client. You can disable socket.io embedding by setting:
\n\"includeSocketIO\": false\nIf you want to support SSL and HTTPS, you just have to set \"useSSL\" to true and then define SSLKey and SSLcert files.
\nConfigure base URL
\nYou can change the base URL path in config.json.
\n\"baseURL\": \"/your/directory\"\nConfigure authentication
\nYou can activate a basic authentication on the Vorlon.js dashboard by adding 3 values to the config.json file.
\n\"activateAuth\": true,\n\"username\": \"CHANGEHERE\",\n\"password\": \"CHANGEHERE\"\nIf the \"activateAuth\" is set to true, you will be redirected to the login page on the first navigation on the dashboard.\nYou then need to give the information set on the \"username\" et \"password\" settings value.
\nThis allows you to configure a remote Vorlon.js dashboard without risking everyone to access it.
\nSSL Support
\nIf you want to run the server with SSL support proceed as follows:
\n- \n
- 1.Install Vorlonjs following the steps in Easy Setup \n
- 2.Navigate to the installation folder \n
- 3.Modify JSON file to activate SSL support \n
- 4.In JSON file set to true \n
- 5.If you want to replace our localhost certificate should only change the path of the files with the private key and certificate \n
6.Exit and save JSON file
\n{\n \"useSSLAzure: false,\n \"useSSL\": true,\n \"SSLkey\": \"server/cert/server.key\",\n \"SSLcert\": \"server/cert/server.crt\",\n \"includeSocketIO\": true,\n \"plugins\": \n ...\n }\n\n
SSL Support on Azure
\n- \n
- 1.Navigate to the installation folder \n
- 2.Modify JSON file to activate SSLAzure support \n
- 3.In JSON file set to true \n
- 4.Exit and save JSON file \n
5.Navigate with https protole on your Azure WebSite
\n{\n \"useSSLAzure: true,\n \"useSSL\": false,\n \"SSLkey\": \"\",\n \"SSLcert\": \"\",\n \"includeSocketIO\": true,\n \"plugins\": \n ...\n }\n\n
Configure Vorlon behind a Nginx proxy
\nEdit your nginx.conf, find server { and use this (don't forget to change the paths below to your own paths).
\nserver {\n\n server_name vorlon;\n\n location ~ ^/(fonts/|images/|javascripts/|stylesheets/|vorlon/|vorlon.dashboardManager.js|robots.txt|humans.txt|favicon.ico) {\n root /PATH/TO/Vorlonjs/Server/public;\n access_log off;\n expires 24h;\n }\n\n location /test {\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection \"upgrade\";\n proxy_http_version 1.1;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n proxy_set_header Host $host;\n proxy_pass http://localhost:1337;\n }\n\n location /socket.io {\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection \"upgrade\";\n proxy_http_version 1.1;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n proxy_set_header Host $host;\n proxy_pass http://localhost:1337;\n }\nVorlon.JS Dashboard
\nThe Vorlon.JS dashboard is designed to help debug and test remote JavaScript applications and the UI is geared towards that goal. The dashboard has two major sections, the client summary view and the plugin view.
\nThe client summary view shows what the current session and client id are currently active and a list of available clients that you can work with. The Identify a client button quickly allows you to see which remote client browser tab or window you are currently working with.
The plugin view is where all the action is! The console is the only plugin that has a fixed location at the bottom of the dashboard and all other plugins will present themselves across the top as tabs.
\n","headers":[{"depth":"1","title":"Vorlon.JS Dashboard","slug":"vorlonjs-dashboard"}]},{"meta":{"section":"core-plugins","title":"Core Plugins","sequence":3},"html":"Core Plugins
\nConsole
\nLogging
\nThe console tab will stream console messages from the client to the dashboard that you can use for debugging. Anything logged with console.log(), console.warn() or console.error() will appear in the dashboard.
Interactivity
\nYou can also interact with the remote webpage by typing code into the input. Code entered will be evaluated in the context of the page.
\nDOM Explorer
\nThe DOM explorer shows you the dom of the remote webpage. You can inspect the DOM, clicking on nodes will highlight them in the host webpage, and if you select one you can also view and modify its css properties.
\nModernizr
\nThe 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. You can use the search filter to select only specific features.
\nObject Explorer
\nThe Object explorer tab will show you all JavaScript variable living on the remote page. You can click on object to see inner properties.
\nXHR panel
\nThe XHR panel will help you analyze XHR calls sent by your devices. You can track status code and others useful information.
\nngInspector
\nThe ngInspector tab is a tool that will display your Angular.js scopes. You can see inner scopes and even ngRepeat constructs.
\nNetwork Monitor
\nThe Network Monitor brings the ability to see all network exchanges done between the browser and the web server. It provides the resource name, the server domain, the type of request, the duration in milliseconds and a nice visual timeline.
\nResources Explorer
\nThe Resources Explorer provides information about what is locally stored on the client instance such as sessions, cookies, and local storage. This can be really useful when you want to debug local cache or login / persistent user data issues.
\nUnit Test for qUnit
\nThe unit test plugin helps you to run qUnit tests remotely from the Dashboard. You can upload a JavaScript file containing your tests or type test directly in the plugin. Hit the \"Run tests\" button and you get the results in the dashboard !
\nMy Device
\nThis displays you a lot of informations coming from the client such as the user agent, the size of the screen, the pixel per points, etc. The informations are dynamically updated if you redimension your browser.
\nBest practices
\nThis plugins checks for many rules related to best practices and web standards for your website. It can be usefull to detect various implementation details like accessibility, css checks like prefixes, ... The rules system and extensible. It means that you could contribute additionnal rules, or build rules for yourself based on your own needs.
\nNodeJS Process
\nThis displays you informations from your node.js process such as the required node modules, the node.js version, the operating system of your server, etc.\nThe plugins also allow you to see the memory usage of your process through a line chart.
\nExpress Debugger
\nThe Express Debugger allows you to debug your Node.js Express-based application, you can see the request flow, the routes, the sessions and the locals variable of your application.
\n","headers":[{"depth":"1","title":"Core Plugins","slug":"core-plugins"},{"depth":"2","title":"Console","slug":"console"},{"depth":"3","title":"Logging","slug":"logging"},{"depth":"3","title":"Interactivity","slug":"interactivity"},{"depth":"2","title":"DOM Explorer","slug":"dom-explorer"},{"depth":"2","title":"Modernizr","slug":"modernizr"},{"depth":"2","title":"Object Explorer","slug":"object-explorer"},{"depth":"2","title":"XHR panel","slug":"xhr-panel"},{"depth":"2","title":"ngInspector","slug":"nginspector"},{"depth":"2","title":"Network Monitor","slug":"network-monitor"},{"depth":"2","title":"Resources Explorer","slug":"resources-explorer"},{"depth":"2","title":"Unit Test for qUnit","slug":"unit-test-for-qunit"},{"depth":"2","title":"My Device","slug":"my-device"},{"depth":"2","title":"Best practices","slug":"best-practices"},{"depth":"2","title":"NodeJS Process","slug":"nodejs-process"},{"depth":"2","title":"Express Debugger","slug":"express-debugger"}]},{"meta":{"section":"creating-plugins","title":"Creating Plugins","sequence":4},"html":"Creating Plugins
\nVorlon.JS has been designed so that you can extend the dashboard and client application easily by writing or installing additional plugins. These can add extra panes to the dashboard which can communicate bi-directionally with the client application. The console, dom inspector and modernizr panes that come bundled with Vorlon.JS are all plugins themselves.
\nWriting Plugins
\nRunning Vorlon.JS from source
\nTo write plugins, you currently need to clone and run Vorlon.JS from source.
\nThese commands will clone the repo, install dependencies, and run the VorlonJS server from source:
\ngit clone https://github.com/MicrosoftDX/Vorlonjs.git\ncd Vorlonjs\nnpm install\nnpm start\nFor further documentation on developing on Vorlon.JS, check the full readme in the repo.
\nSample Plugin
\nA Vorlon.JS plugin is based on two Typescript classes, that will be loaded in both the client and dashboard. They have to extend from the Vorlon.ClientPlugin class and the Vorlon.DashboardPlugin class. It may also load html and css into the dashboard to define a panel. You can then write code for both the dashboard and client that can communicate bidirectionally to create whatever features you need.
To make it easy to get started, we’ve created a sample plugin. This adds an input field to the dashboard, that, when you type something and hit return, sends the message to your client browser, which will reverse the string and send it back, to be rendered in the dashboard. It’s just a simple example to show you how to create and communicate in a plugin. You should check the sample plugin’s readme for information about how to enable it, and then read the sample client plugin’s code and the sample dashboard plugin's code to see how you might modify it for your own needs.
\nInstalling Plugins
\nWe are still working on making it easy to install and run third-party plugins for Vorlon.JS. At the moment, you will need to write and compile plugins in a checked out version of vorlon as above, but we want to make it really easy for you to publish and use plugins with Vorlon.JS. If you have ideas on how we can improve this file an issue on github.
\nIn the meantime, if you've developed a plugin that you think could go in Vorlon.JS core, submit a pull request.
\nUseful reading
\nHow to create a plugin by Etienne Margraff
\n","headers":[{"depth":"1","title":"Creating Plugins","slug":"creating-plugins"},{"depth":"2","title":"Writing Plugins","slug":"writing-plugins"},{"depth":"3","title":"Running Vorlon.JS from source","slug":"running-vorlonjs-from-source"},{"depth":"3","title":"Sample Plugin","slug":"sample-plugin"},{"depth":"2","title":"Installing Plugins","slug":"installing-plugins"},{"depth":"2","title":"Useful reading","slug":"useful-reading"}]},{"meta":{"section":"vorlonproxy","title":"Vorlon proxy","sequence":5},"html":"Vorlon proxy
\nSometimes you must audit, test, or debug a website in production and you don't have Vorlon script injected in your pages. \nFor all such cases, you could now use Vorlon \"proxy\" feature to open your site.
\nHow does it work ?
\nThe proxy is a tool built with node.js, running server side on a separate process (and therefore a separate port or domain if you must deploy it). When the proxy is called with a target url, it will forward this http call (and all subsequent calls) to the target. The proxy will injects Vorlon's client script in the page for you in the meantime. To manage subsequent calls for resources from the website (like css, scripts, images, ...), the proxy create a cookie on first call with the target url. The (necessary) use of a cookie means that it is unadvised to run multiple Vorlon inspection using proxy with the same browser instance (because this cookie will be shared among browser tabs).
\nRunning proxy locally
\nFirst you must check that the proxy has been enabled. Open config.json and verify that \"enableWebproxy\" is set to true, and start your Vorlon server (using \"npm start\" for example). That's the only thing you must have to do. If you run the proxy locally, you could go to http://localhost:1337/httpproxy to open a helper page. The proxy itself will listen on port 5050 (by default). In case of trouble, look at the console for your server. At the very beginning you must have a trace indicating that the server and the proxy have started, and which port they are running on.
\nhosting the proxy
\nVorlon server and proxy resides on different processes and could be deployed separately. To work properly, the proxy must be listening at the root of a http domain. The proxy cannot work if it's set on a path like \"http://vorlonjs.com/documentation/\". This is due to the fact that inspected web pages may have url relative to the httpdomain (url starting with \"/\"). If the proxy is not listening at the root, it won't be able to catch those calls.
\nIf you want to host a Vorlon instance with the proxy feature, their are a few configurations that you may find usefull :\n\"vorlonServerURL\" is used by the proxy to build the url of Vorlon client script\n\"vorlonProxyURL\" is used by the Vorlon server to send requests to the proxy
\nif empty, \"vorlonServerURL\" and \"vorlonProxyURL\" default to localhost with the proper port.
\n","headers":[{"depth":"1","title":"Vorlon proxy","slug":"vorlon-proxy"},{"depth":"2","title":"How does it work ?","slug":"how-does-it-work"},{"depth":"2","title":"Running proxy locally","slug":"running-proxy-locally"},{"depth":"2","title":"hosting the proxy","slug":"hosting-the-proxy"}]},{"meta":{"section":"node","title":"Debugging Node.js applications","sequence":6},"html":"Debugging Node.js applications
\nVorlon.js is versatile enough to be used with Node.js applications as well.
\nBut because node.js does not provide DOM elements, all plugins can not be used when debugging Node.js applications.\nThis is why some plugins are flagged with nodeCompliant=true in the catalog file:
{ \"id\" : \"XHRPANEL\", \"name\" : \"XHR\",\"panel\": \"top\", \"foldername\" : \"xhrPanel\", \"enabled\": true, \"nodeCompliant\": true }
Referencing Vorlon.js in your Node.js application
\nTo do so, you have to npm install vorlon-node-wrapper. Once done, you can add this code to your application:
var vorlonWrapper = require(\"vorlon-node-wrapper\");\nvar serverUrl = \"http://localhost:1337\";\nvar dashboardSession = \"default\";\n\n//This will connect to your Vorlon.js instance (serverUrl) and download the Vorlon.node.js client file (Vorlon for node).\nvorlonWrapper.start(serverUrl, dashboardSession, false);\n\n// Your code\n// ...\nYou can also use the asynchronous version of the start function:
var vorlonWrapper = require(\"vorlon-node-wrapper\");\nvar serverUrl = \"http://localhost:1337\";\nvar dashboardSession = \"default\";\n\n//This will connect to your Vorlon.js instance (serverUrl) and download the Vorlon.node.js client file (Vorlon for node).\nvorlonWrapper.start(serverUrl, dashboardSession, true, function (result, errorMessage) {\n\n // Your code\n // ...\n});\nDevelopping a Node.js compliant plugin
\nIf you plan to create a plugin that could work with Node.js, the only think you have to do is to mark it as compliant in the catalog.json file.
\nRegarding the code itself, you can use Vorlon.Tools.IsWindowAvailable to determine if you are running in a browser context (where window object is available) or in a node.js context (where global object is available).
Contributing
\nVorlon.JS is a fully open source project. It is licensed with the MIT License.
\nFor information on how to develop on the Vorlon.JS server/client itself, and how to contribute, please read the README and CONTRIBUTING files over at the github repo.
\n","headers":[{"depth":"1","title":"Contributing","slug":"contributing"}]}] \ No newline at end of file +[{"meta":{"section":"introduction","title":"Introduction","sequence":0},"html":"Introduction
\nVorlon.JS is a remote debugging and testing tool for JavaScript. It helps you remotely load inspect, test and debug JavaScript code running on any device with a web browser: whether it's a games console, mobile device or fridge.
\nVorlon.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 and communicates with your remote devices. Installing the Vorlon.JS client in your web site or application is as easy as adding a single script tag.
\nVorlon.JS can be extended with plugins which may add features to both the client and the dashboard, for example: feature detection, logging, and exception tracking.
\n","headers":[{"depth":"1","title":"Introduction","slug":"introduction"}]},{"meta":{"section":"installation","title":"Installing Vorlon.JS","sequence":1},"html":"Installing Vorlon.JS
\nVorlon.JS Server
\nTo get started using Vorlon.JS you will need to install it from npm:
\n$ npm i -g vorlon\nOnce Vorlon.JS is done installing, you can now run the server:
\n$ vorlon\nThe Vorlon server is running\nWith the server running, open http://localhost:1337 in your browser to see the Vorlon.JS dashboard.
\nVorlon.JS Client
\nBefore you can start debugging your app you have to enable it to communicate to the Vorlon.JS Server by adding this script tag to your application’s html:
\n<script src=\"http://localhost:1337/vorlon.js\"></script>\nYou can also open the sample page to test that your dashboard is working. You should see the client appear in your dashboard when you open that page.
\nVorlon.JS Client advanced topics
\nIf you want to get an unminified version of the plugins on your web page, you can use the following script tag:
\n<script src=\"http://localhost:1337/vorlon.max.js\"></script>\nYou can have more control on the moment the client side part is starting by using the autostartdisabled version:
\n<script src=\"http://localhost:1337/vorlon.autostartdisabled.js\"></script>\nwhich also exist with the unminified version of the code:
\n<script src=\"http://localhost:1337/vorlon.max.autostartdisabled.js\"></script>\nOnce this is done, you can start the vorlon client and connect it to the dashbard of you choice using the session id you want:
\nVORLON.Core.StartClientSide(\"http://localhost:1337\", \"default\");\nVorlon.JS Server advanced topics
\nIf you do not want to use a specific plugin in your dashboard and disable it also on the client part, you can use the config.json file on the server.\nTo be able to do this, you need to use Vorlon.js downloaded and installed from the GitHub repository. You can also modify the package downloaded from npm but this is not recommended.
\nThe file is located on the following folder :
\nServer/config.json\nBy default, it looks like this :
\n{\n \"includeSocketIO\": true,\n \"useSSLAzure\": false,\n \"useSSL\": true,\n \"SSLkey\": \"cert/server.key\",\n \"SSLcert\": \"cert/server.crt\",\n \"plugins\": [\n { \"id\": \"CONSOLE\", \"name\": \"Interactive Console\", \"panel\": \"bottom\", \"foldername\" : \"interactiveConsole\", \"enabled\": true},\n { \"id\": \"DOM\", \"name\": \"Dom Explorer\", \"panel\": \"top\", \"foldername\" : \"domExplorer\", \"enabled\": true },\n { \"id\": \"MODERNIZR\", \"name\": \"Modernizr\",\"panel\": \"bottom\", \"foldername\" : \"modernizrReport\", \"enabled\": true },\n { \"id\" : \"OBJEXPLORER\", \"name\" : \"Obj. Explorer\",\"panel\": \"top\", \"foldername\" : \"objectExplorer\", \"enabled\": true },\n { \"id\" : \"XHRPANEL\", \"name\" : \"XHR\",\"panel\": \"top\", \"foldername\" : \"xhrPanel\", \"enabled\": true },\n { \"id\" : \"NGINSPECTOR\", \"name\" : \"ngInspector\",\"panel\": \"top\", \"foldername\" : \"ngInspector\", \"enabled\": false }\n ]\n}\nIt is obviously using the JSON (JavaScript Simple Object Notation) format and is easy to understand: each line in the \"plugins\" array represents a plugin.
\nFor instance, you can change the folder where the plugin is installed. This folder has to be located under:
\nServer/public/vorlon/plugins\nBy convention, this name needs to be the same as the JavaScript file for the plugin for either the max file:
\n{FOLDERNAME}.js\nand the min version:
\n{FOLDERNAME}.min.js\nYou can also choose in which panel the plugin should be displayed using the \"panel\" property. It can be either \"bottom\" or \"top\".
\nYou can add and remove plugins here. \nIt will impact the dashbard by not displaying a removed plugin and also the client JavaScript file which is sent to the client website.
\nWe also added the option to NOT automatically include socket.io in the script returned to the client. You can disable socket.io embedding by setting:
\n\"includeSocketIO\": false\nIf you want to support SSL and HTTPS, you just have to set \"useSSL\" to true and then define SSLKey and SSLcert files.
\nConfigure base URL
\nYou can change the base URL path in config.json.
\n\"baseURL\": \"/your/directory\"\nConfigure authentication
\nYou can activate a basic authentication on the Vorlon.js dashboard by adding 3 values to the config.json file.
\n\"activateAuth\": true,\n\"username\": \"CHANGEHERE\",\n\"password\": \"CHANGEHERE\"\nIf the \"activateAuth\" is set to true, you will be redirected to the login page on the first navigation on the dashboard.\nYou then need to give the information set on the \"username\" et \"password\" settings value.
\nThis allows you to configure a remote Vorlon.js dashboard without risking everyone to access it.
\nSSL Support
\nIf you want to run the server with SSL support proceed as follows:
\n- \n
- 1.Install Vorlonjs following the steps in Easy Setup \n
- 2.Navigate to the installation folder \n
- 3.Modify JSON file to activate SSL support \n
- 4.In JSON file set to true \n
- 5.If you want to replace our localhost certificate should only change the path of the files with the private key and certificate \n
6.Exit and save JSON file
\n{\n \"useSSLAzure: false,\n \"useSSL\": true,\n \"SSLkey\": \"server/cert/server.key\",\n \"SSLcert\": \"server/cert/server.crt\",\n \"includeSocketIO\": true,\n \"plugins\": \n ...\n }\n\n
SSL Support on Azure
\n- \n
- 1.Navigate to the installation folder \n
- 2.Modify JSON file to activate SSLAzure support \n
- 3.In JSON file set to true \n
- 4.Exit and save JSON file \n
5.Navigate with https protole on your Azure WebSite
\n{\n \"useSSLAzure: true,\n \"useSSL\": false,\n \"SSLkey\": \"\",\n \"SSLcert\": \"\",\n \"includeSocketIO\": true,\n \"plugins\": \n ...\n }\n\n
Configure Vorlon behind a Nginx proxy
\nEdit your nginx.conf, find server { and use this (don't forget to change the paths below to your own paths).
\nserver {\n\n server_name vorlon;\n\n location ~ ^/(fonts/|images/|javascripts/|stylesheets/|vorlon/|vorlon.dashboardManager.js|robots.txt|humans.txt|favicon.ico) {\n root /PATH/TO/Vorlonjs/Server/public;\n access_log off;\n expires 24h;\n }\n\n location /test {\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection \"upgrade\";\n proxy_http_version 1.1;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n proxy_set_header Host $host;\n proxy_pass http://localhost:1337;\n }\n\n location /socket.io {\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection \"upgrade\";\n proxy_http_version 1.1;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n proxy_set_header Host $host;\n proxy_pass http://localhost:1337;\n }\nVorlon.JS Dashboard
\nThe Vorlon.JS dashboard is designed to help debug and test remote JavaScript applications and the UI is geared towards that goal. The dashboard has two major sections, the client summary view and the plugin view.
\nThe client summary view shows what the current session and client id are currently active and a list of available clients that you can work with. The Identify a client button quickly allows you to see which remote client browser tab or window you are currently working with.
The plugin view is where all the action is! The console is the only plugin that has a fixed location at the bottom of the dashboard and all other plugins will present themselves across the top as tabs.
\n","headers":[{"depth":"1","title":"Vorlon.JS Dashboard","slug":"vorlonjs-dashboard"}]},{"meta":{"section":"core-plugins","title":"Core Plugins","sequence":3},"html":"Core Plugins
\nConsole
\nLogging
\nThe console tab will stream console messages from the client to the dashboard that you can use for debugging. Anything logged with console.log(), console.warn() or console.error() will appear in the dashboard.
Interactivity
\nYou can also interact with the remote webpage by typing code into the input. Code entered will be evaluated in the context of the page.
\nDOM Explorer
\nThe DOM explorer shows you the dom of the remote webpage. You can inspect the DOM, clicking on nodes will highlight them in the host webpage, and if you select one you can also view and modify its css properties.
\nModernizr
\nThe 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. You can use the search filter to select only specific features.
\nObject Explorer
\nThe Object explorer tab will show you all JavaScript variable living on the remote page. You can click on object to see inner properties.
\nXHR panel
\nThe XHR panel will help you analyze XHR calls sent by your devices. You can track status code and others useful information.
\nngInspector
\nThe ngInspector tab is a tool that will display your Angular.js scopes. You can see inner scopes and even ngRepeat constructs.
\nNetwork Monitor
\nThe Network Monitor brings the ability to see all network exchanges done between the browser and the web server. It provides the resource name, the server domain, the type of request, the duration in milliseconds and a nice visual timeline.
\nResources Explorer
\nThe Resources Explorer provides information about what is locally stored on the client instance such as sessions, cookies, and local storage. This can be really useful when you want to debug local cache or login / persistent user data issues.
\nUnit Test for qUnit
\nThe unit test plugin helps you to run qUnit tests remotely from the Dashboard. You can upload a JavaScript file containing your tests or type test directly in the plugin. Hit the \"Run tests\" button and you get the results in the dashboard !
\nMy Device
\nThis displays you a lot of informations coming from the client such as the user agent, the size of the screen, the pixel per points, etc. The informations are dynamically updated if you redimension your browser.
\nBest practices
\nThis plugins checks for many rules related to best practices and web standards for your website. It can be usefull to detect various implementation details like accessibility, css checks like prefixes, ... The rules system and extensible. It means that you could contribute additionnal rules, or build rules for yourself based on your own needs.
\nNodeJS Process
\nThis displays you informations from your node.js process such as the required node modules, the node.js version, the operating system of your server, etc.\nThe plugins also allow you to see the memory usage of your process through a line chart.
\nExpress Debugger
\nThe Express Debugger allows you to debug your Node.js Express-based application, you can see the request flow, the routes, the sessions and the locals variable of your application.
\n","headers":[{"depth":"1","title":"Core Plugins","slug":"core-plugins"},{"depth":"2","title":"Console","slug":"console"},{"depth":"3","title":"Logging","slug":"logging"},{"depth":"3","title":"Interactivity","slug":"interactivity"},{"depth":"2","title":"DOM Explorer","slug":"dom-explorer"},{"depth":"2","title":"Modernizr","slug":"modernizr"},{"depth":"2","title":"Object Explorer","slug":"object-explorer"},{"depth":"2","title":"XHR panel","slug":"xhr-panel"},{"depth":"2","title":"ngInspector","slug":"nginspector"},{"depth":"2","title":"Network Monitor","slug":"network-monitor"},{"depth":"2","title":"Resources Explorer","slug":"resources-explorer"},{"depth":"2","title":"Unit Test for qUnit","slug":"unit-test-for-qunit"},{"depth":"2","title":"My Device","slug":"my-device"},{"depth":"2","title":"Best practices","slug":"best-practices"},{"depth":"2","title":"NodeJS Process","slug":"nodejs-process"},{"depth":"2","title":"Express Debugger","slug":"express-debugger"}]},{"meta":{"section":"creating-plugins","title":"Creating Plugins","sequence":4},"html":"Creating Plugins
\nVorlon.JS has been designed so that you can extend the dashboard and client application easily by writing or installing additional plugins. These can add extra panes to the dashboard which can communicate bi-directionally with the client application. The console, dom inspector and modernizr panes that come bundled with Vorlon.JS are all plugins themselves.
\nWriting Plugins
\nRunning Vorlon.JS from source
\nTo write plugins, you currently need to clone and run Vorlon.JS from source.
\nThese commands will clone the repo, install dependencies, and run the VorlonJS server from source:
\ngit clone https://github.com/MicrosoftDX/Vorlonjs.git\ncd Vorlonjs\nnpm install\nnpm start\nFor further documentation on developing on Vorlon.JS, check the full readme in the repo.
\nSample Plugin
\nA Vorlon.JS plugin is based on two Typescript classes, that will be loaded in both the client and dashboard. They have to extend from the Vorlon.ClientPlugin class and the Vorlon.DashboardPlugin class. It may also load html and css into the dashboard to define a panel. You can then write code for both the dashboard and client that can communicate bidirectionally to create whatever features you need.
To make it easy to get started, we’ve created a sample plugin. This adds an input field to the dashboard, that, when you type something and hit return, sends the message to your client browser, which will reverse the string and send it back, to be rendered in the dashboard. It’s just a simple example to show you how to create and communicate in a plugin. You should check the sample plugin’s readme for information about how to enable it, and then read the sample client plugin’s code and the sample dashboard plugin's code to see how you might modify it for your own needs.
\nInstalling Plugins
\nWe are still working on making it easy to install and run third-party plugins for Vorlon.JS. At the moment, you will need to write and compile plugins in a checked out version of vorlon as above, but we want to make it really easy for you to publish and use plugins with Vorlon.JS. If you have ideas on how we can improve this file an issue on github.
\nIn the meantime, if you've developed a plugin that you think could go in Vorlon.JS core, submit a pull request.
\nUseful reading
\nHow to create a plugin by Etienne Margraff
\n","headers":[{"depth":"1","title":"Creating Plugins","slug":"creating-plugins"},{"depth":"2","title":"Writing Plugins","slug":"writing-plugins"},{"depth":"3","title":"Running Vorlon.JS from source","slug":"running-vorlonjs-from-source"},{"depth":"3","title":"Sample Plugin","slug":"sample-plugin"},{"depth":"2","title":"Installing Plugins","slug":"installing-plugins"},{"depth":"2","title":"Useful reading","slug":"useful-reading"}]},{"meta":{"section":"vorlonproxy","title":"Vorlon proxy","sequence":5},"html":"Vorlon proxy
\nSometimes you must audit, test, or debug a website in production and you don't have Vorlon script injected in your pages. \nFor all such cases, you could now use Vorlon \"proxy\" feature to open your site.
\nHow does it work ?
\nThe proxy is a tool built with node.js, running server side on a separate process (and therefore a separate port or domain if you must deploy it). When the proxy is called with a target url, it will forward this http call (and all subsequent calls) to the target. The proxy will injects Vorlon's client script in the page for you in the meantime. To manage subsequent calls for resources from the website (like css, scripts, images, ...), the proxy create a cookie on first call with the target url. The (necessary) use of a cookie means that it is unadvised to run multiple Vorlon inspection using proxy with the same browser instance (because this cookie will be shared among browser tabs).
\nRunning proxy locally
\nFirst you must check that the proxy has been enabled. Open config.json and verify that \"enableWebproxy\" is set to true, and start your Vorlon server (using \"npm start\" for example). That's the only thing you must have to do. If you run the proxy locally, you could go to http://localhost:1337/httpproxy to open a helper page. The proxy itself will listen on port 5050 (by default). In case of trouble, look at the console for your server. At the very beginning you must have a trace indicating that the server and the proxy have started, and which port they are running on.
\nhosting the proxy
\nVorlon server and proxy resides on different processes and could be deployed separately. To work properly, the proxy must be listening at the root of a http domain. The proxy cannot work if it's set on a path like \"http://vorlonjs.com/documentation/\". This is due to the fact that inspected web pages may have url relative to the httpdomain (url starting with \"/\"). If the proxy is not listening at the root, it won't be able to catch those calls.
\nIf you want to host a Vorlon instance with the proxy feature, their are a few configurations that you may find usefull :\n\"vorlonServerURL\" is used by the proxy to build the url of Vorlon client script\n\"vorlonProxyURL\" is used by the Vorlon server to send requests to the proxy
\nif empty, \"vorlonServerURL\" and \"vorlonProxyURL\" default to localhost with the proper port.
\n","headers":[{"depth":"1","title":"Vorlon proxy","slug":"vorlon-proxy"},{"depth":"2","title":"How does it work ?","slug":"how-does-it-work"},{"depth":"2","title":"Running proxy locally","slug":"running-proxy-locally"},{"depth":"2","title":"hosting the proxy","slug":"hosting-the-proxy"}]},{"meta":{"section":"node","title":"Debugging Node.js applications","sequence":6},"html":"Debugging Node.js applications
\nVorlon.js is versatile enough to be used with Node.js applications as well.
\nBut because node.js does not provide DOM elements, all plugins can not be used when debugging Node.js applications.\nThis is why some plugins are flagged with nodeCompliant=true in the catalog file:
{ \"id\" : \"XHRPANEL\", \"name\" : \"XHR\",\"panel\": \"top\", \"foldername\" : \"xhrPanel\", \"enabled\": true, \"nodeCompliant\": true }
Referencing Vorlon.js in your Node.js application
\nTo do so, you have to npm install vorlon-node-wrapper. Once done, you can add this code to your application:
var vorlonWrapper = require(\"vorlon-node-wrapper\");\nvar serverUrl = \"http://localhost:1337\";\nvar dashboardSession = \"default\";\n\n//This will connect to your Vorlon.js instance (serverUrl) and download the Vorlon.node.js client file (Vorlon for node).\nvorlonWrapper.start(serverUrl, dashboardSession, false);\n\n// Your code\n// ...\nYou can also use the asynchronous version of the start function:
var vorlonWrapper = require(\"vorlon-node-wrapper\");\nvar serverUrl = \"http://localhost:1337\";\nvar dashboardSession = \"default\";\n\n//This will connect to your Vorlon.js instance (serverUrl) and download the Vorlon.node.js client file (Vorlon for node).\nvorlonWrapper.start(serverUrl, dashboardSession, true, function (result, errorMessage) {\n\n // Your code\n // ...\n});\nDevelopping a Node.js compliant plugin
\nIf you plan to create a plugin that could work with Node.js, the only think you have to do is to mark it as compliant in the catalog.json file.
\nRegarding the code itself, you can use Vorlon.Tools.IsWindowAvailable to determine if you are running in a browser context (where window object is available) or in a node.js context (where global object is available).
Contributing
\nVorlon.JS is a fully open source project. It is licensed with the MIT License.
\nFor information on how to develop on the Vorlon.JS server/client itself, and how to contribute, please read the README and CONTRIBUTING files over at the github repo.
\n","headers":[{"depth":"1","title":"Contributing","slug":"contributing"}]}] \ No newline at end of file diff --git a/documentation/index.html b/documentation/index.html index fc65e09..30c35ac 100644 --- a/documentation/index.html +++ b/documentation/index.html @@ -31,7 +31,7 @@Vorlon.JS
- +Documentation
Running proxy locally
First you must check that the proxy has been enabled. Open config.json and verify that "enableWebproxy" is set to true, and start your Vorlon server (using "npm start" for example). That's the only thing you must have to do. If you run the proxy locally, you could go to http://localhost:1337/httpproxy to open a helper page. The proxy itself will listen on port 5050 (by default). In case of trouble, look at the console for your server. At the very beginning you must have a trace indicating that the server and the proxy have started, and which port they are running on.
hosting the proxy
-Vorlon server and proxy resides on different processes and could be deployed separately. To work properly, the proxy must be listening at the root of a http domain. The proxy cannot work if it's set on a path like "http://vorlonjs.com/documentation/". This is due to the fact that inspected web pages may have url relative to the httpdomain (url starting with "/"). If the proxy is not listening at the root, it won't be able to catch those calls.
+Vorlon server and proxy resides on different processes and could be deployed separately. To work properly, the proxy must be listening at the root of a http domain. The proxy cannot work if it's set on a path like "http://vorlonjs.com/documentation/". This is due to the fact that inspected web pages may have url relative to the httpdomain (url starting with "/"). If the proxy is not listening at the root, it won't be able to catch those calls.
If you want to host a Vorlon instance with the proxy feature, their are a few configurations that you may find usefull : "vorlonServerURL" is used by the proxy to build the url of Vorlon client script "vorlonProxyURL" is used by the Vorlon server to send requests to the proxy
diff --git a/index.html b/index.html index ff11e45..939873c 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,7 @@Vorlon.JS
- +Vorlon.JS
Extensible
See a Vorlon.JS Demo
Remote debug a Tesla!
+See a Vorlon.JS Demo
Learn more about Vorlon.js in this 20 minutes video
+Learn more about Vorlon.js in this 10 minutes video
Learn more about Vorlon.js in this 20 minutes video
Getting Started
+Prerequisites: please note that Vorlon.js doesn't work for now with Node v18, please use v16 until we fix it.
Learn everything you need to about Vorlon.js 0.1.0 in this video
Install and run the Vorlon.JS server from npm:
$ npm i -g vorlon
@@ -123,7 +127,6 @@ Getting Started
<script src="http://localhost:1337/vorlon.js"></script>
Now when you open your app you should see your client appear on the dashboard.
- You can also open the sample page, which already has this script tag in it, to test your dashboard.
Install Windows version
Install MacOSX version
- Download dmg file by clicking the button bellow. @@ -148,7 +151,7 @@
- If the window also contains a shortcut icon to 'Applications', drag and drop the app onto the shortcut.
- If not, double-click the mounted volume on your desktop and drag the app icon from there to the 'Applications' icon in the Finder sidebar.