曲折的 iPad 网页调试之路

曲折的 iPad 网页调试之路

公司项目有一个 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 浏览器访问项目地址，此问题成功得到解决。