这篇文章上次修改于 481 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

公司项目有一个 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";
}

IMG_0174.jpg

将链接的 IP 地址和端口号替换成开发机上对应的值保存,重新打开 Safari 浏览器访问项目地址,此问题成功得到解决。