最近 UIWebView 發(fā)現(xiàn)一個詭異的問題盹愚,頁面在 iOS 8 上加載不全您宪,空白冲茸,但在瀏覽器和 iOS 9 上正常顯示。如圖:
如何調試這個問題固灵?可以使用 Safari 的 Develop 開發(fā)調試工具捅伤。Safari 的 Develop 菜單默認是關閉的,在 Safari -> Preferences -> Advanced -> Show Develop menu in menu bar巫玻,勾選丛忆,即可打開 Develop 菜單。
在模擬器中運行應用仍秤,打開需要調試的頁面熄诡。返回 Safari,選擇 Develop->Simulator 菜單诗力,就可以看到模擬器中的頁面地址凰浮,如圖:
點擊這個地址就可以打開 Web Inspector 進行頁面的調試,如圖:
選擇 Element 標簽欄,查看 html 源代碼袜茧,選中在頁面沒顯示出來的 Div 標簽屿良。然后,在右邊的側邊欄惫周,選擇 Styles 標簽欄尘惧,查看 CSS 元素〉莸荩可以 Styles 這邊出現(xiàn)一些??喷橙,鼠標浮動到這個標志上,即可顯示警告的信息登舞。
iOS 8 不支持這個 flex, 點擊即可在 Web Inspector 中修改 CSS贰逾,換成 -webkit-flex,頁面正常顯示菠秒。原因定位到了疙剑,前端同學去改代碼了。
另外践叠,可在 Web Inspector 刷新 UIWebView 的頁面言缤,如圖:
右邊的按鈕可定位 WebView 頁面元素,快速定位元素的 html 源代碼禁灼。
更多細節(jié)可查看蘋果官方文檔:
Safari Web Inspector Guide
WWDC 視頻:
Getting to Know Web Inspector
Getting the Most Out of Web Inspector