使用 Safari 的 Web Inspector 调试 WebView

最近 UIWebView 发现一个诡异的问题，页面在 iOS 8 上加载不全，空白，但在浏览器和 iOS 9 上正常显示。如图：

如何调试这个问题？可以使用 Safari 的 Develop 开发调试工具。Safari 的 Develop 菜单默认是关闭的，在 Safari -> Preferences -> Advanced -> Show Develop menu in menu bar，勾选，即可打开 Develop 菜单。

在模拟器中运行应用，打开需要调试的页面。返回 Safari，选择 Develop－>Simulator 菜单，就可以看到模拟器中的页面地址，如图：

Develop

点击这个地址就可以打开 Web Inspector 进行页面的调试，如图：

Web Inspector

选择 Element 标签栏，查看 html 源代码，选中在页面没显示出来的 Div 标签。然后，在右边的侧边栏，选择 Styles 标签栏，查看 CSS 元素。可以 Styles 这边出现一些⚠️，鼠标浮动到这个标志上，即可显示警告的信息。

Web Inspector 修改 CSS

iOS 8 不支持这个 flex, 点击即可在 Web Inspector 中修改 CSS，换成 -webkit-flex，页面正常显示。原因定位到了，前端同学去改代码了。

另外，可在 Web Inspector 刷新 UIWebView 的页面，如图：

右边的按钮可定位 WebView 页面元素，快速定位元素的 html 源代码。

更多细节可查看苹果官方文档：
Safari Web Inspector Guide
WWDC 视频：
Getting to Know Web Inspector
Getting the Most Out of Web Inspector