公司项目有一个 Bug 涉及到 iPad,要知道无论是 iPhone 还是 iPad 都只能使用 MacOS 的 Safari 浏览器进行调试,这是个小问题,配台 Mac 就可以了。但如何让 iPad 能够正常访问开发机器上运行的环境,对我而言就挺蛋疼的。
我的 iPhone 上安装了一款叫做「小火箭」的应用,这款软件自带规则设置,可以通过设置 Hosts 的方式,主动让 iPhone 直接连接我的开发机器,此时即可接入 Safari 开发者工具进行调试了。
iPadOS 和 iOS 很多地方大同小异,为什么我偏偏觉得 iPad 难呢?
因为这台给我调试的 iPad 是公司的,里面登录了测试曾经的 iCloud 账号,我又不知道密码,短时间内可能没法联系到账号主人退出账号。对于现在的情况,我只想到了这几个方法:
退出账号,登录一个带小火箭的账号,下载软件
- 无学习成本,纯粹靠运气(需要联系到所有者)
使用自定义 DNS 指向调试域名到开发机器的 IP 地址
- 需要学习自建 DNS 服务器,大概率是使用 Docker(我太讨厌运维了)
购买路由设备,配置 Hosts
- 看上去很靠谱,但大概率需要自己掏钱(但是后期干什么都舒服)
自建 DNS 失败
既然没法退出账号,我就想着自建 DNS 不就能解析到我开发机了。我想首选 Docker 镜像来配置,@提莫 建议我使用 bind9
这个镜像。按照他提供的步骤配置了一波,结果并没有成功,发现开发机自身跑着的 Clash 占用了 DNS 的端口号,使用 TCP 模式又不能用(iPad 设置上去并没有反应)此次折腾宣告失败。
具体可读:《困难且未解决的 iPad 调试问题》
使用 Clash 解决
日常和 @凯文 讨论了下有关服务器的问题(此前 Cloudcone 黑五优惠期,在考虑要不要换更高配置的机器),就和他日常扯淡了这几天蛋疼的经历,他说直接让 iPad 连接电脑上的 Clash 不就行了。
只需要借助我开发机器上的 Clash 代理软件,设置局域网访问,就能在手机上通过连接代理服务器的方式,直接使用开发机的代理,就能共享开发机的 Hosts 配置了。这方法确实很凑效,用了极低的学习成本就成功解决了问题。Docker 再见,自己配置 DNS 服务器再见!
--《解决了 iPad 调试的问题》
我在 MacOS 上使用的是 ClashX 客户端,参考 Clash 的官方文档,大概需要这样修改:
ClashX 托盘图标 -> 配置 -> 打开配置文件夹 -> 找到对应配置后编辑
mixed-port: 7890
allow-lan: true
bind-address: '*'
mode: rule
log-level: info
external-controller: '127.0.0.1:9090'
dns:
enable: true
ipv6: false
default-nameserver: [223.5.5.5, 119.29.29.29]
enhanced-mode: redir-host
fake-ip-range: 198.18.0.1/16
use-hosts: true
nameserver: ['https://doh.pub/dns-query', 'https://dns.alidns.com/dns-query']
fallback: ['https://doh.dns.sb/dns-query', 'https://dns.cloudflare.com/dns-query', 'https://dns.twnic.tw/dns-query', 'tls://8.8.4.4:853']
fallback-filter: { geoip: true, ipcidr: [240.0.0.0/4, 0.0.0.0/32] }
在上面添加一条 hosts
记录即可。
hosts:
'meet.paul.me': 10.0.0.101
之后打开 iPad 设置 -> 无线局域网 -> 找到当前网络名称点击右侧「信息」按钮 -> HTTP 代理 -> 配置代理 -> 选择「手动」,输入开发机器地址 10.0.0.101
和端口 7890
后保存。
使用 Safari 打开公司项目正常访问,但是发现部分功能出现了异常,使用 MacOS 的 Safari 调试后发现出现了新的错误信息:
WebSocket connection to 'wss://xxx.xxx/' failed
解决 WebSocket 无法连接
根据这个问题继续上网查找相关讨论,起初以为是 Vite 的问题,但并没有定位出来。搜索报错内容后看到 这篇文章 ,有点恍然大悟。虽然是 Nginx 的,但这种情况我此前还确实遇到了。
尝试以 Clash 为关键词去搜索,找到了这篇 Issues,得知 HTTP 代理模式存在问题,切换成 Socks 代理模式就可以解决。那么新的问题又来了,MacOS 上设置很简单,但 iPad 和 iPhone 呢?
继续搜索答案,找到一篇文章《让 iPhone iPad 连接的 Wifi 能够使用 Socks 代理》,提供了不错的方案。
就是需要在开发机器上开一个 HTTP 服务,托管一个静态的 proxy.pac
文件,这还不简单么?
我使用 VSCode 的 Live Server 插件跑了一个 HTTP 服务器,再把文章所述的 proxy.pac
文件丢进去,指向开发机器上运行的 Clash 客户端,WebSocket 断线的错误就成功解决,调试环境一切运行正常了。😄
// 这就是个 JavaScript 代码?
function FindProxyForURL(url, host) {
return "SOCKS 10.0.0.102:7890";
}
将链接的 IP 地址和端口号替换成开发机上对应的值保存,重新打开 Safari 浏览器访问项目地址,此问题成功得到解决。
已有 8 条评论
最近也玩起了clash, 有几个问题不知道怎么回事.
1.浏览器访问 307 到 HTTPS, 我明明还什么都没干, 首页还是 welcome to nginx
2.对应的 IP 和我想的不太一样, 我希望通过域名访问运行 clash 的机器, IP 填 127 结果是解析到我客户端本地的。。。
3.自签证书好麻烦
如果没有记错……仅退出商店是不需要密码的(
可以试试 LightProxy 开发调试利器
不明觉历
这种场景内网 DNS 服务器管理内网地址解析是最合理的,用代理工具在多个项目联调的时候就显得力不从心了,主流路由器应该都可以在管理界面配置 Hosts 解析。
@Secret 专门找人调还是比较蛋疼的,毕竟小公司没有专门的运维人员(不过现在有一个远程的运维同事,负责各种问题排查)我是想着能自己解决问题是相对合理的。Hosts 我家路由器本来就不行,刷了 OpenWrt 系统才行,公司的就不太清楚了
其实归根结底是因为在中国要用代理吧?产品设计者可没想这么多
@沉舟侧畔 注意 ⚠️ 我的目的是让 iPad 能以低成本的方式接入到开发环境,并非和其他原因有关