在 iOS 12 中，苹果正式弃用 UIWebView，改成 WKWebView，参考[官方声明](https://developer.apple.com/documentation/webkit/replacing_uiwebview_in_your_app)。   后者在性能、稳定性、功能方面有很大提升，并且与 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](https://github.com/Tencent/vConsole)脚本，生成一个控制台。 :-:    还有一个[PageSpy](https://github.com/HuolalaTech/page-spy-web)是一款适用于远程 Web 项目调试的工具（可在异地调试），需要在页面注入脚本，并且还需要在服务器中部署一套控制台系统。 :-:  **2）抓包工具**   或者借助[Charles](https://www.charlesproxy.com/)、[Fiddler](https://www.telerik.com/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 那些事](https://juejin.cn/post/7056680479436570631) [Web 浏览器相关的一些概念](https://keqingrong.cn/blog/2019-11-24-concepts-related-to-web-browsers/) [小米手机开发者选项在哪？](https://blog.csdn.net/shujuwa_data/article/details/124978906) [Chrome远程调试](https://github.com/CN-Chrome-DevTools/CN-Chrome-DevTools/blob/master/md/Use-Tools/remote-debugging.md) [MIUI 更新 WebView 组件](https://www.manshaoco.com/765.html) ***** > 原文出处： [博客园-前端利器躬行记](https://www.cnblogs.com/strick/category/1472499.html) [知乎专栏-前端利器躬行记](https://zhuanlan.zhihu.com/pwtool) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。