起因
早晨出家门之前在窗前望了望外面，有点儿阴天，没有下雨，这可能就衬托了今天要发生的事情了吧。不过我还是哼着小曲骑着电动车去地铁了。
到了公司看了会儿技术文章，这时旁边的骏哥发出了几个哎？嗯？什么情况？我也纳闷到底是什么情况？然后骏哥就把一个OPPO手机拿到我面前出现了如下画面：
我很震惊，为什么显示这么多线条，而且还很有规律的样子，but正常的页面没有显示出来。
骏哥严肃的和我讲到，这个页面不是必现，但是接口返回正常，和正常页面的请求返回并没有什么区别。
然后我问骏哥要了一下这个页面的地址，放到浏览器上拼命的刷，刷不出来这个错误页面。那么结果就是这个错误在pc端不会出现，只会在移动端出现。pc端调试时不会出现错误而且接口返回正常，这就变相的增加了debug的难度，肿么办？
好在Chrome也应该想到了这个问题，可以用安卓手机连接电脑，利用 Chrome 开发者工具远程调试 Android 中的原生 WebView。怎么做呢一个叫亦枫的人写的调试教程，很详细
连上手机之后打开pc端的调试页面如下
上图中商品订单的那个页面，就是我们出问题的页面 打开调试后，怎么说呢，页面非常的干净，异常的干净（如下图）
分析一下这个页面，没有报错，资源加载正常，接口返回正常。骏哥我俩面面相觑，通俗的说是大眼瞪小眼。这可怎么调。。。 以下为错误的分析流程，复盘之后觉得完全没有必要
- 更改html内容看是否能显示，改完之后能显示，但是在最外层的节点加入文字才能显示（为什么）
- 更改线条颜色，生效
- 更改列表内容，无效
- 删除样式，并查看是否为webpack编译错误，查看代码发现并没有
- 弹弹弹alert，生效
总结：js没问题，css也没问题，webview的问题？内心戏：（难道是webview第一次渲染之后，再添加内容就不改变了？不对啊，js都执行了，alert也弹了，后期添加内容也能显示。）
骏哥说：要不改下列表高度看看？
我：好！
骏哥：该多少？
我：都行！
骏哥：那改大点儿！
我：好，多少？
骏哥:1000吧
我：好，走你！
我好想并没有说什么具有建设性的意见，最后决定是1000px;
改完之后生效了！居然生效了！
骏哥说：那我改成rem试试。
我：好！
改完之后和原来一样。这就有意思了，rem不生效，再回来看调试上的element各个节点，确实样式也都对应上了，就是高度都为0了。什么情况？什么情况？
我看了一下根元素的font-size，如图：
心里有句mmp，不知当讲不当讲啊。
后面的问题就比较明了了，大家也都知道，rem布局依赖html的font-size值，我们代码是根据宽度动态设置，在一开始head标签里面写的。但是OPPO手机一开始加载webview的clientWidth的值为0。无解，再重新获取下就好了。至于解决办法具什么策略，屏幕宽为0是设置默认font-size值，还是多请求几次，全凭大家喜好。
我要做的是重新复盘一下debug流程，以免以后再有类似问题，还要好长时间才能找到问题所在。感觉有点儿事后诸葛亮。
- pc端无问题，移动端有问题，那么肯定要想办法在移动端调试，这时候不要做无用功在pc端，毕竟浏览器的内核都不一样。
- 移动端调试方法，链接数据线远程debug（这个是关键，能够看到页面是否报错，判断是js问题还是css问题）
- console无报错，不是js问题。
- 资源下载正常，不是服务器问题。
- 接口返回正常不是后台接口问题。
- 能看到线条，说明是样式问题。
- 修改css线条颜色能够改变说明编译无问题。
- 线条挤到一起说明无高度。
- 看html节点都正常，图片也正常下载了，为什么无高度？高度也写了。
- 更改元素高度，rem,px都尝试一下
- px有效，rem无效。根元素font-size问题
- font-size根据页面宽度而定，clientWidth的问题，弹之。。
- 果然页面一开始弹0，再后来弹360
- 出解决方案，解决测试上线。
总结
解决bug的结果并不重要，解决bug的思路很重要。
