最近在做公司项目一个 H5 版本的页面优化，合并到测试环境之后，在手机 Safari 下有部分样式问题，需要联机即时调试更快的解决，但在联机过程遇到了不少坑，这里简单记录一下问题和解决方法。

如果想要在移动端真机上调试，就不能使用 localhost 这种地址了，使用局域网 IP 地址又有可能遇到请求后端 API 出现跨域的问题，我的解决方法是选择建立一个与测试、生产环境共享根域的二级域名（当然前提后端也允许了该二级域名的跨域行为），再路由器上设置 Hosts 连接到开发机的方案。

比如 paul.me 是生产环境，local.paul.me 就是本地开发环境，强制指定 IP 到开发机，这样就能保留此前传递和获取登录态的逻辑代码

访问失败问题

起初在另外一台 Mac 电脑上直接访问开发机对应的页面，访问失败，使用 ping IP 则正常，未分析到具体原因，重新连接网络后得到了解决。

重定向问题

我在手机上打开本地调试地址后，发现会被强制使用 HTTPS，可我完全是本地服务，怎么可能会有重定向？通过搜索得知，这里使用到了一个叫 HSTS 的技术，因为访问生产环境的时候就是根域名，可能在根域名下存在 HSTS 记录，导致所有子域都会强制重定向一次。

在 iPhone 的 Safari 上，需要在 Safari 设置里面找到网站数据，将整个域名下的清空（包括登录态等均被删除），之后重新打开浏览器访问本地调试环境，就没遇到 307 跳转了。

联机调试崩溃

我原本想用电脑上的 iOS 模拟器来试试的，但是发现 Safari 的调试工具一直有问题，无论是“元素”还是“控制台”都是空白无内容的，重开多次均无效。后尝试使用 iPhone 13 真机调试，但是首次设置就遇到了登录态设置上去但没用的情况。

最后我的解决方法是直接在控制台里面设置 Cookie，然后去调整 Cookie 对应的域名和 Path 值为 /，后续请求其他页面就没有掉登录态的情况。

但是在我需要调试的关键页面，手机一打开就出现崩溃甚至闪退的情况。经过检查发现本地调试环境该页面的打包代码居然有 100MB+，可能就是这个原因导致的，手机直接不堪重负。

因为该页面的路由完全和 PC 共享，仅仅只是一个 if 条件判断来返回手机版的页面，因此这里有完整打包的 PC 端的代码（屎山），目前我直接注释掉了 PC 端的代码，NextJS 自动给我去除掉了，JS 文件瞬间缩小到了 2MB，调试终于得以正常进行...

样式问题记录

简单来说就是有一个 button 元素，内部有一个 div 设置了 aspect-ratio: 1/1 强制设置比例，结果发现元素塌陷，并没有支撑起来。对于这个问题我发现有个最简单的办法，就是将元素替换成 div，就解决了。挺诡异的，我只知道 button 相较于 div 会有一个额外的 appearence 属性，但我修改它也并没有用。

具体 Demo 稍后在 GitHub 上放出

这件事说明目前还是不能完全信任 AI 写出来的代码，依旧得自己充分验证才知道有没有问题。