起因
早晨出家門之前在窗前望了望外面，有點兒陰天，沒有下雨，這可能就襯托了今天要發生的事情了吧。不過我還是哼著小曲騎著電動車去地鐵了。
到了公司看了會兒技術文章，這時旁邊的駿哥發出了幾個哎？嗯？什麼情況？我也納悶到底是什麼情況？然後駿哥就把一個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的思路很重要。複製程式碼