在移动浏览器中测试Verge3D应用

当您通过应用管理器启动一个Verge3D应用时,它是运行在本地开发服务器上的使用localhost地址的网页。此地址只能在本机访问。如需在移动端设备上测试您的应用,可按照以下流程之一操作。

方法1:本地IP地址

点击应用管理器左侧的齿轮图标,在其设置中启用外部服务器(Enable external server interface)选项”:

再次打开应用管理器设置,应该会显示本地网络地址 (Local network address) 信息了。

现在您可以在本地Wi-Fi网域或局域网中使用IP地址替代localhost来访问应用管理器了。在移动端浏览器可通过访问对应的IP地址来启动应用管理器,例如:

http://192.168.0.170:8668/

如此一来,您在移动端设备即可如PC端一样,通过点击应用管理器中的蓝色图标启动应用。

方法2:本地IP地址+二维码

这是第一种方法的扩展方式。您可以先在 电脑浏览器 中通过访问IP地址的方式打开应用管理器,启动应用。

http://192.168.0.170:8668/

然后通过扫描二维码的方式在移动端打开到应用。如果您的浏览器没有自带的二维码生成功能,可以为浏览器安装二维码扩展。例如Safari扩展应用 QRify for Safari注:Chrome和Edge浏览器最新版的地址栏已经自带二维码转换功能,光标定位到地址栏后,二维码快捷图标就会显示出来。

现在用移动设备摄像头扫描二维码即可在移动端浏览器上打开对应的链接了。如果您的移动端设备不支持直接扫描打开网址,可以自行安装二维码扫码程序,例如, QR Code Reader for AndroidQR Reader for iPhone,或是直接用微信扫码。

方法3:端口转发

这种方法仅适用于Android设备。通过USB连接线和Chrome开发者工具,您可以在移动端浏览器中访问 localhost:8668来启动应用管理器。

因为AR/VR应用需要在浏览器中为服务器启用安全连接(https),而localhosthost地址则无此限制,此时方法3比1和2更适用。此外,使用这一方法还可以看到移动浏览器中的控制台输出。

在Android设备上,转到 设置 > 开发者选项 并启用USB调试

默认情况下,Android设备中的开发者选项是隐藏的。您可以在设置菜单中找到系统内部版本号,并连续点击,即可解锁开发者选项。

用USB线连接您的Android设备。在计算机上的Chrome浏览器中,导航到 chrome://inspect

此时在您的Android设备上将弹出一个对话框——如果没有,重新加载 chrome:i//nspect 或者重新插入USB连接线。在弹出窗口中,点击OK以允许USB调试。

您现在应该可以在 chrome://inspect 页面看到Android设备了。同样,如果您在移动设备上打开了Chrome,也会在那里列出。

chrome://inspect 页面单击端口转发(Port forwarding)按钮。在接下来显示的窗口中:在端口port字段中,输入 8668,在IP地址和端口IP address and port字段中,键入 localhost:8668。单击启用端口转发Enable port forwarding,点击Done按钮关闭窗口。

此时在 chrome://inspect 页面会显示设备旁端口转发的绿色指示。

至此,您应该可以在移动端浏览器访问 localhost:8668地址来启动应用管理器了。此外,您可以单击 chrome://inspect 页面中的inspect键来查看移动端浏览器控制台的输出信息。

其他方法推荐

移动端还有一些其他的调试方法,如iOS设备的Safari浏览器开发者模式,在网页中嵌入 vConsole 控制台,或使用 weinre 映射移动端日志到PC中等。其中,使用微信团队开发的 vConsole 最为简洁和方便。详细使用方法见Verge3D微信公众号推送: 在移动端调试Verge3D应用的简便方法

遇到问题?

欢迎您随时在 论坛上提问!您还可以加入中文用户社区QQ群(171678760),在线寻求帮助。