前端利器躬行记（9）——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 按钮。
在点击后，就能正式出现完整的调试窗口，左边是网页，右边是控制台。
当有一端移动网页时，另一端也能看到在移动，两者实现了同步。
参考资料：