Remote debugging with Vorlon.js

Introduction

Showpad experience apps provide a lot of benefits compared to a custom sales app. One of these benefits is it Runs on all devices and there is no need for platform-specific development. This statement means we use web technology to write our App and use the Showpad Javascript API to talk with native Showpad functionalities.

Not every browser and platform runs web technology the same way. You have different browser engines interpreting javascript and CSS in a specific way. Developers can use tools like https://caniuse.com/ to see if certain technology is already released or has a different implementation.

Second, Showpad is not your everyday FTP server. We use different techniques to cache and display custom apps on different browsers and platforms. Web content is inside an Iframe and we use a tiny server to host & serve the application on a mobile device. This particular setup could mess around with your code. 

There are several caveats to keep in mind like fetching 3rd party resources where you can't whitelist your Showpad domain because it's served from localhost. Or different platforms giving a different structure of an object like an asset. It's important to test and being able to debug on al the platforms you want to target.

Vorlon.js

This tool by the Microsoft DX organization is an open-source, extensible, platform-agnostic tool for remote debugging. It's powered by NodeJS and uses WebSockets to connect with your app. Vorlon can be installed on your localhost or deployed on Azure. We will use Azure in this tutorial because it enables us to easily configure SSL, which is necessary. After all, Showpad is hosted securely.

1. Go to https://github.com/MicrosoftDX/Vorlonjs and click on the Deploy on Azure button. Use your Microsoft account to log in or create one.
2. You will be redirected to a wizard to configure Azure, you can use the free tier. Use a general site location like North-Europe as local locations will not work. Take an easy to remember a name like your-company-showpad-remote-debugging
3. Complete the wizard until Vorlon.js is deployed to your instance and you are redirected to https://portal.azure.com/ or go this URL by yourself.
4. Go inside your App in the portal and click on App Service Editor in the sidebar. You should see an online version of VS code.
5. Go to the Server directory and click on the config.json file. Change "useSSLAzure" to true.
6. Exit the editor, the file will be saved automatically but you can check to go back in.
7. Navigate with the HTTPS protocol to the azure website you just created. If you followed the suggestion it will look like https://your-company-showpad-remote-debugging.azurewebsites.net/

You will now see the Vorlon.js dashboard. To link your application to vorlon, you have to include a script tag pointing to this service. This will be displayed on the dashboard. We suggest putting the script URL in the Experience App Editor and load it dynamically. This enables the admin to enable and disable the debugging on-demand without having to upload a new version.

Vorlon.js will detect any open application with the debugging enabled and will list this in the sidebar. Vorlon comes with a lot of the standard development functionalities.

• Dom explorer
• Object explorer
• Resources Explorer
• Network Monitor
• Interactive console

And has nice extra features like Modernizr and Ng. Inspector. You can even write plugins if you're feeling adventurous. If you have any questions or struggles about this topic, comment on this article or ask a question on the community.

Happy debugging,

Showpad