Here are some quick steps to help with debugging for WebXR. These things are LIFE CHANGING for WebXR development! Note: the steps are specific to Windows OS.

Install Firefox and Android Debug Bridge (adb)

Add Android Debug Bridge (adb) to Path

  • Type path in the windows search and hit enter on Edit the system environment variables
  • Click Environment Variables
  • Select Path and click Edit
  • Select New
  • Paste the location of adb.exe. The location should be something like this C:\Users\USERNAME\AppData\Local\Android\sdk\platform-tools
  • Restart your computer

Run the project locally and connect to remote debugging

  • Open your WebXR Project (Starter Template for BabylonJS Here)
  • Run the project npm start
  • Open Firefox on PC
  • Connect to Oculus Quest to PC with USB
  • Click the menu on the right of the Firefox browser
  • Then select Web Developer -> Remote Debugging
  • Click Connect on device

Reverse the Ports to make localhost available

  • Open cmd or windows terminal
  • List connected devices: adb devices
  • Set the reverse device id: adb reverse -s <ID from device attached above>
  • Reverse the port and update to the port you are using: adb reverse tcp:8080 tcp:8080
  • If it gets disconnected (sometimes it does) just rerun the last cmd to reconnect.
  • On the Oculus headset go to localhost:8080 (update 8080 to your port)

That's it! You are now running localhost on your VR headset and the debug output on your PC.