WebView中的页面调试方法

　　在 iOS 12 中，苹果正式弃用 UIWebView，改成 WKWebView，参考官方声明。

　　后者在性能、稳定性、功能方面有很大提升，并且与 Safari 具有相同的 JavaScript 引擎（JavaScriptCore）。

　　从 Android 4.4 开始，增加 Chromium WebView，用来取代 Android WebKit WebView。

　　从 Android 5.0 开始，Chromium WebView 支持以 Android System WebView App 的形式在应用商店中下载，可独立升级。

　　Android 可以在 App 中集成其他 WebView 组件，例如如 TBS X5 内核的 WebView，或者集成其他 JavaScript 引擎（默认采用 V8 引擎），例如为 React Native 专门优化的 Hermes。

　　而 iOS 上就只能使用系统内置的 WebView。由此可知，iOS 和 Android 对于 CSS 和 JavaScript 的支持度各不相同，在研发时需要注意兼容性。

一、调试的困难

　　在客户端中调试网页，不像在 PC 的浏览器有那么完善的控制台，对于网页的各方面都能一目了然。

　　

1）注入脚本

　　若要调试此类页面，需要些方法，比较常见的有在页面中加入 vConsole 脚本，生成一个控制台。

　　

　　PageSpy 是一款适用于远程 Web 项目调试的工具（可在异地调试），需要在页面注入脚本，并且还需要在服务器中部署一套控制台系统。

　　

2）抓包工具

　　或者借助 Charles、Fiddler 这类抓包工具来查看网络通信、映射本地脚本等。

　　

　　不过在 Android 6.0 之后，不会信任从抓包工具导出的根证书，这就导致无法在抓包工具中浏览 HTTPS 通信，不过 iOS 没有这方面的限制。

　　而网页中的某些业务可能需要借助客户端的能力（JSBridge）才能完成，但这块无法在 PC 浏览器中实现。

　　由此可见，需要有种办法能够调试 iOS 和 Android 两种客户端中的网页。

二、iOS

　　iOS 的调试比较简单，可以借助 Safari 浏览器实现。

1）显示开发

　　首先显示 Safari 浏览器的“开发”菜单。

　　以 macOS 为例，偏好设置 > 高级，然后勾选“在菜单栏中显示开发菜单”。

　　

2）开启调试

　　然后是开启 iPhone 的 Safari 调试模式，设置 > Safari浏览器 > 高级 > 网页检查器 > 启用。

　　

3）两端联调

　　现在就可以开始调试了，将手机用数据线与电脑连接。

　　在访问页面后，选中开发菜单，找到对应的手机，就能看到访问中的网页地址。

　　

4）调试窗口

　　点击页码地址，进入调试窗口，常规的诸如网络、元素等调试模块都有。

　　

　　除了能映射客户端 WebView 中的网页之外，Safari 浏览器中的页面也能同步映射到调试窗口。

三、Android

　　Android 配置调试的过程比较波折，可以借助 Chrome 浏览器实现。

1）显示开发者选项

　　首先需要在手机中显示开发者选项，默认是隐藏的，各款手机的开启过程可能略有不同。

　　以小米为例，我的设备 > 全部参数与信息 > MIUI版本，点击 5~8 下，就会有一个开发者模式开启的提示。

　　

2）开启 USB 调试

　　然后进入更多设置，翻到最后就能看到开发者选项菜单，进入后，开启 USB 调试。

　　

3）Chrome Inspect

　　接着打开电脑的 Chrome 浏览器，输入 chrome://inspect。

　　

　　现在可以在客户端中访问网页，下图的 WebView 表示客户端环境，点击 inspect。

　　

　　应该是弹出控制台，但是却发生了错误，提示 HTTP/1.1 404 Not Found。

　　

　　这是因为 Android System WebView 的版本低于电脑 Chrome 浏览器的版本，前者是 117，而后者是 120。

　　

　　如果移动端的 Chrome 浏览器版本较低，那么在调试时，也会出现同样的问题。

　　若未出现上述异常，可直接跳过下一节的版本升级。

4）版本升级

　　两者的解决办法都是升级，一个是升级 Android System WebView，另一个是升级 Chrome 浏览器。

　　而 Android System WebView 需要到 Google Play Store 中更新。

　　由于图中已经是最新版本，因此没有显示更新按钮。

　　

　　在更新成功后，以小米为例，在开发者选项中，选中 WebView 实现，就能看到当前版本。

　　

5）调试窗口

　　重新访问网页，提示 Remote browser is newer than client browser. Try `inspect fallback` if inspection fails。

　　也就是说，客户端的版本高于电脑浏览器，那么可以点击 inspect fallbak 按钮。

　　

　　在点击后，就能正式出现完整的调试窗口，左边是网页，右边是控制台。

　　当有一端移动网页时，另一端也能看到在移动，两者实现了同步。

　　

参考资料：

iOS UIWebView与WKWebView 那些事

Web 浏览器相关的一些概念

小米手机开发者选项在哪？

Chrome远程调试

MIUI 更新 WebView 组件