背景

近日，在 微信web开发者工具 开发完成页面后，在个人手机上测试通过并移交产品经理测试，发现其手机打开页面后白屏，手机型号同样是 iPhone6，拿了其他小伙伴的安卓手机发现也打不开，无论是在微信浏览器还是在 Safari 或者 安卓原生浏览器均是这样的现象。重新编译、清除缓存都无法解决这个问题。

解决过程

• 一般情况下，前端无法渲染是由于 JavaScript 报错产生的，所以最好是看看控制台打印。
• 上网搜索资料，发现微信团队做了一个让我兴奋的东西：vConsole
  • GitHub 地址：https://github.com/WechatFE/vConsole
  • 该工具使用很简单，只需要引入一个 JavaScript 文件，即可在页面右下角生成一个按钮，点击可以查看控制台，以及手机系统、手机浏览器的一些信息，真是个神器！

• 引入了 vConsole，查看控制台，果然有一个错误抛出

  reference error can’t find variable symbol

  从字面理解，是指浏览器无法识别 symbol 这个变量。

• 继续谷歌，发现 GitHub 上有一些 issue 也是报了类似的问题，一篇一篇地读下来，找到了一个关键词，叫 babel-polyifll

• 搜索这个关键词，找到了阮一峰的这篇博文 http://www.ruanyifeng.com/blog/2016/01/babel.html

  Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
  举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

• 这下一切都清楚了，浏览器不支持一些新的对象，所以需要引入别的模块才能识别，具体做法很简单：
  安装

  npm install --save babel-polyfill
  

  在脚本中，引入该模块

  import 'babel-polyfill';
  

  编译、测试、问题解决！

总结

• 移动 web 开发的兼容性问题很多，遇到了要多积累经验。
• 解决问题的思路可以多样化，比如之前一直没想到要在移动端查看控制台，这次解决问题的经历让我学会了一个神器的使用。
• 谷歌错误信息后，要多打开几个页面，读一读别人的问题以及解决方法，看看能否从中寻找出一些端倪。
• 学会从一大堆页面和信息中寻找出关键词很重要，一旦找对了，问题很快引刃而解。