记录一次 iOS 网页崩溃的修复，利用 Safari 进行移动端调试

代码与野兽2023-12-24 11:49

我们团队新开发的 AI 产品快要上线了，找了几个用户帮忙一起内测。

突然收到内测用户的 Bug 报告，说在 iOS 手机上进行某个操作会崩溃，无论是用 Chrome 还是 Safari 都会这样。

我觉得很奇怪，因为前不久我还试过这个功能是正常的。

为了验证这个问题，我在自己的 iPhone 上进行了同样的操作，发现确实会报错。

这种移动端的错误不是很容易调试，因为 Safari 没办法在手机上直接打开控制台，当然可以使用 vConsole 这类库来做，但是 vConsole 毕竟不是原生的控制台，用起来没那么舒服。

怎么样在电脑上调试 iOS 设备上的错误呢？

首先你要有一根数据线和一台 MacOS 的电脑，然后把手机连接到电脑上。

再之后打开手机的设置->Safari->Advanced(高级)，确保 JavaScript 和 Web Inspector 是开启的状态。

再之后打开电脑上的 Safari，在 Safari 中选择 Preferences。

再选择 Advanced，把 Show Develop menu in menu bar 的选项打开。

现在在 Safari 的菜单栏就可以看到 Develop 选项了。

进入手机的 Safari，打开出问题的网页，电脑上的 Develop 菜单会自动显示这个网页。

点击它，就可以在电脑上打开移动端网页的控制台，再从手机上进行错误操作。电脑上就可以看到错误了。

接下来就是解决掉这个问题。

Object.hasOwn 这个 API 是 ECMAScript2022 的 API。老版本的 iOS 系统上没有这个 API 就报错了。

解决方案有很多，比如修改编译工具的配置，把目标版本设置低一些。

这里我直接写了一个 Polyfill 修复了这个问题。

js 复制代码

if (!window.Object.hasOwn) {
    window.Object.hasOwn = function (object, property) {
        return window.Object.prototype.hasOwnProperty.call(object, property);
    };
}