Testing Verge3D Applications on Mobile Browsers

When you launch a Verge3D application from the App Manager, it runs on top of local development server using the localhost address. This address can only be used on your local machine. In order to test how your app works on a mobile device's browser, you can use one of the following procedures.

Method #1: Local IP Address

Click the gear icon on the left bar of the App Manager and in the General settings turn on Enable external server interface:

Enable external server interface in App Manager

Open App Manager settings again, the Local network address should appear.

Now you can use the provided IP address in your local Wi-Fi or Ethernet network instead of localhost. Launch the App Manager on a mobile device's web browser by navigating to the network address, for example:

http://192.168.2.3:8668/

Finally, run your apps on mobile as usual - by tapping blue icons in the App Manager.

Method #2: Local IP Address + QR Code

This is a variation of method #1. Instead of running the App Manager and then an application on a mobile device's browser, you can launch the application on your computer via the App Manager using the network address.

http://192.168.2.3:8668/

A link to the application can be conveniently opened on mobile using a QR code. To generate such QR codes, use the sharing feature of the Google Chrome browser (also available in Microsoft Edge):

Generating QR codes in Chrome browser

For other browsers you should use QR generator extensions for the same purpose.

The obtained QR code can be scanned with a mobile device's camera (by using the built-in camera app) thus opening the link on a mobile browser.

Method #3: Port Forwarding

This method will work for Android devices. With a USB cable and Chrome DevTools, you can launch the App Manager right from your mobile device's browser by navigating to localhost:8668.

Unlike methods 1-2, this method is suitable for launching AR/VR applications, as localhost does not require a secure connection between the mobile browser and the workstation. In addition, you'll be able to see the output of the mobile browser's console.

On an Android device, go to Settings → Developer options and enable USB debugging.

By default, the developer options in Android devices are hidden. You can unlock them by locating the Build number in your Settings menu and tapping it multiple times.

Debugging Android devices in Chrome

Connect your Android device with a USB cable. In Chrome browser on your computer, navigate to chrome://inspect.

Chrome Inspect page

This should show a dialog popup on your Android device - if not, reload the chrome://inspect or re-insert the USB cable. In the popup, allow USB debugging by tapping OK.

Allow USB debugging popup dialog

You now should see your Android device on the chrome://inspect page. Also, if you open Chrome on your mobile device, it should be listed there.

Device shown in Chrome Inspect

Click Port forwarding button on the chrome://inspect page. In the shown-up window: in Port field, type 8668, in IP address and port field, type localhost:8668. Click Enable port forwarding and close the window with Done button.

Enabling port forwarding in Chrome

The chrome://inspect page should display a green indicator for port forwarding near the device.

Testing port forwarding in Chrome

As a result, you should be able to launch the App Manager right from your mobile device's browser by navigating to localhost:8668. In addition, you can see the output of the mobile browser's console by clicking inspect link on the chrome://inspect page.

Got Questions?

Feel free to ask on the forums!