Locally Debug Aframe-WebXR using Oculus Developer Hub

Camilo Diaz

Introduction

Since 2019 Three JS and AFRAME have moved all their implementations to support OpenXR and left behind their vendor specific APIs.

This has brougth multiple problems developing VR applications in webvr.

You can only deploy your webxr applications on https
If you run local webvr applications ( i.e using http://localhost:3000 ), AFRAME doest show the VR button to enable VR mode. Instead is switch to Full Screen mode.
The point above means you lose all the VR controllers callbacks.

At the moment this guide was written (May 2023) most of the webxr support on desktop browser is deprecated and there is no plans on how to solve this problem. AFRAME has an issue opened that is constantly monitoring the develop of this bug (or feature).

There are a few options to work-around this.

Option1 : Use Oculus Developer HuB

Download Oculus Developer Hub
If you are on windows, please make sure the path environmental variable points to PATH_TO\Meta Quest Developer Hub\resources\bin ( In MacOs this should be set automatically by running the installer)
Connect your Oculus Headset to your computer using usb-c cable
Open a terminal ( CmD on Windows) and execute the command abd devices. It should print the ID of your oculus
Execute the command adb reverse tcp:3000 tcp:3000 ( The port depends on where you are deploying your local server. Most NodeJS applications are deployed on port 3000)
Now use your Oculus headset and open the Oculus Web browser. In the URL field just type http://localhost:3000.
You will see your local deploy running on the oculus web-browser.
If you disconnect the oculus usb-c cable, just run the command adb reverse tcp:3000 tcp:3000 once again to run the developer mode.

How to Debug Variables and HTML elements

If you want to check the console errors ( or prints), varible values, styles and call stack, you have to enable port forwarding (Only tested on Chrome).

In your local chrome browser type chrome://inspect/#devices
Make sure the discover devices check box is enabled.
Click on Port Forwarding button. You will see a list of the applications opened in the oculus web browser.
In the list, select the application you want to inspect
A pop up window opens with the debug and console information.

Option2 : Use Steam VR

This option is bit less reliable and the VR camera doesnt work all the time. But I added just in case you cant deal with Oculus Developer Hub

Download and install steam and steam-vr
Connect your Oculus Headset to your computer using usb-c cable and allow the device to access your computer
In the oculus main app go to Quick settings (click on the button right next to your profile photo)-> Quest link and accept
Once you are in the oculus link app, open steam-vr

5. Once you are on steam-vr home , using the right controller press B button, it will pop up a menu, select Things -> Panels -> Desktop

6. You should be able to see your desktop, select your browser and go to your Aframe application, the VR button should be displayed.