通过局域网在手机浏览器上访问电脑开发的应用


引言

今天在开发过程中遇到一个 bug 是在某台手机自带的浏览器上出现的。我们前端开发的好朋友 Chrome 开发者工具虽然可以模拟手机进行调试,但是这台机型比较小众,在尝试添加它的 user agent 仍无法复现 bug 的情况下,部门大佬让我通过局域网进行访问。以下记录操作过程:

环境

PC: MacBook Pro

Mobile: OnePlus 3T

步骤

首先确保两台设备在同一局域网中,笔者两台电脑都连接着同一 WiFi。接着在 PC 端打开终端,如 iTerm2,输入 ifconfig 。查找 en0en1,然后在该条目下查找 inet 关键字,会出现类似 192.168.1.100 这样的地址,这就是 PC 的局域网地址。

然后在 Mobile 上通过浏览器访问 192.168.1.100:3000 (此处应用运行的端口是 3000)就可以访问我们的应用了。

总结

这个方法只能用来检查页面效果,不能真正做到 debug。但因为 bug 只在特定的浏览器上出现,debug 的途径没几个,所以只能通过这种方式来检查效果了。