H5页面在iOS11系统上白屏了，bug修复过程

时间回到一周前，当时刚开发完公司A项目的一个新的版本，等待着测试完成就进行发布。此时的我也准备从连续多日的紧张开发状态中走出来，以为可以稍稍放松一下。而那时的我还不知道，我即将面临一个强大的Bug选手，更不知道我要跟这个Bug来来回回进行多次的搏斗。当然，我们能看到这篇文章也就说明了我最终解决了这个Bug，而且这个过程也是相当的精彩的。什么？你不相信，那就让我来带你进入这个“跌宕起伏”的经历中吧。

友情提示：接下来的文章也许有一点长，但是希望你能够坚持读下去。我相信我在解决这个Bug的过程中的一些思路会给你带来一些思考。当然也希望你在这个过程中能够像我一样学习到一些新的知识，为以后排查类似的Bug积累一些经验。好啦，话不多说，让我们开始吧。

项目介绍

先来简单介绍一下A项目，这是一个基于Vue框架的项目，项目使用的也是Vue CLI这个开发工具。这个项目是需要集成在别的APP中的，也就是页面需要在APP中进浏览和操作。这个项目在我接手之前已经开发过一段时间了。所以项目中的一些依赖库和工具库版本相对比较低，这也给我后续的调试以及解决Bug的过程增加了一些困难。

BUG初现

当时开发完成之后，就交给我们这边的测试和另一个城市的相关同学去验收这次开发的功能。在我们这边一切都很正常，测试这边也没有反馈有什么问题。但是在另一个城市的同学小C的iPhone手机上却发现了白屏，打开页面之后什么内容也没有。

发现了这个问题之后，我再次跟我们这边的测试同学确认了一下，看看我们这边测试的iOS系统的iPhone手机有没有这个问题。经过测试的测试，发现我们这边的几台iPhone手机都没有问题。然后就问了小C他使用的测试手机的系统版本是多少，当时感觉应该跟iOS的系统版本有关系。

小C反馈说他的iPhone是6S Plus，然后系统的版本是11.1.2。我问了我们这边测试使用的iPhone版本都是多少，测试反馈说系统的版本都是12以上的。所以到这里，我确定了这个白屏Bug的出现肯定跟iPhone手机的系统有关系。

重现BUG之路

虽然确定了问题出现的环境，但是因为我身边没有系统是11的iPhone手机，所以想让这个问题重现就变成了一个难题。询问了身边的同事，大家的系统版本也都普遍高于12，所以借用别人的手机进行调试这个方法暂时也不可行。

在平时的开发中，如果网页在iOS系统的APP中有一些问题的话，我们一般都会通过Safari浏览器进行调试。但是因为这次出现问题的iPhone手机不在我这里，并且我这边也没有相同系统的手机。所以想通过真机进行调试就不太可能了。那怎么办呢？这个问题肯定是要解决的，我也相信办法总比困难多。

想要进行调试，最简单的办法就是让我有一个系统是11的iPhone手机。所以我就搜索看看有没有什么办法可以给iPhone手机安装11的系统。一搜索还真的有，过程也不算是很复杂。但是其中有一个步骤是需要到一些论坛或者第三方的助手网站下载跟自己手机型号相匹配的iOS系统，这个步骤让我有点感觉不安全。毕竟不是官方的，不能够保证安全性。而且也未必有版本是11的系统。所以这个方案就暂时作罢。

在我搜索的过程中，我发现有网友说可以使用Xcode安装相应系统版本的iPhone模拟器来进行调试。哎，你说我怎么没有想到这个办法呢？这确实是一个不错的办法。因为之前跟公司的同事学习过Swift，也了解过Xcode的一些操作。突然感慨，真是技多不压身，你不知道你什么时候就会用上你学过的知识。所以有条件的话，还是多学习一些知识。额，有点跑题了。

安装Xcode

我打开公司的电脑，开始安装Xcode，但是发现公司的电脑系统版本太低，安装Xcode需要升级系统，所以没办法，先升级系统吧。因为升级的时间比较长，我想到自己家中的Mac电脑上是有安装过Xcode，所以决定先回家。留下公司的电脑慢慢升级。

回到家，二话不说就开始准备调试，但是发现我的Xcode上面的iPhone模拟器的系统版本也都是12以上的，查了一下资料，Xcode是可以安装不同系统版本的模拟器的，于是我就安装了系统版本是11的模拟器。这个过程需要我们打开Xcode的偏好设置，然后在Components选项中，选择下载你要安装的对应系统版本的模拟器。

安装iOS11的模拟器

安装成功之后，运行iPhone 6S Plus模拟器，使用模拟器的Safari打开h5的页面地址，果然是白屏。

iPhone 6S Plus模拟器出现白屏

小样，终于把这个问题给复现了，这样就距离解决这个Bug不远了。我打开Mac的Safari浏览器，进入开发者模式，发现了如下所示的报错

Safari浏览器控制台的报错

我搜索了一下这个错误，发现是因为项目中使用了...ES6扩展运算符，然后iOS 11系统不支持这个这个运算符。这么容易就找到问题了，开心。想到这个问题还是比较好解决的，可以通过使用Babel的一些插件，很容易就可以将这个问题解决掉。然后我就开心的睡觉去了，心想这个问题也不是什么大问题，明天处理一下就好了。

安装Safari Technology Preview

第二天到公司，我就在项目中的babel的配置文件中添加了相应的插件

{...  // 省略原来的配置内容"plugins": ["@babel/plugin-proposal-object-rest-spread"]
}
复制代码

然后发布到测试环境中。告诉了小C同学再次测试一下，我也在等着解决这个Bug的好消息。但是，出现的却不是好消息，小C给我回复说还是不可以。什么，不可能呀，我就马上用公司的电脑再次进行测试。当我用公司电脑的Safari调试系统是iOS 11的iPhone 6S PLus模拟器的时候，却发现出现了下面这个情况：审核警告：“data-custom”太新，无法在此检查的页面上运行

审核警告：“data-custom”太新，无法在此检查的页面上运行

我就又搜索了一下为什么会出现这个问题，终于让我找到了答案，Safari浏览器的Web Inspector工程师也说这是一个Bug，不过他们已经修复了，在下个发布的版本中就可以正常使用新的Safari浏览器去调试比较老的iOS系统的模拟器了。知道现在这个版本的Safari调试不了模拟的iOS 11系统的页面。我有点沮丧，总不能我现在回家把我的电脑拿过来吧