🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
  在 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 的浏览器有那么完善的控制台,对于网页的各方面都能一目了然。 :-: ![](https://img.kancloud.cn/61/9c/619c37fc5d9923d778ad6c521a376692_1941x1113.png =800x) **1)注入脚本**   若要调试此类页面,需要些方法,比较常见的有在页面中加入[vConsole](https://github.com/Tencent/vConsole)脚本,生成一个控制台。 :-: ![](https://img.kancloud.cn/3f/f9/3ff9edc2ce7e94379bca14a2f4846300_400x711.jpeg =300x)   还有一个[PageSpy](https://github.com/HuolalaTech/page-spy-web)是一款适用于远程 Web 项目调试的工具(可在异地调试),需要在页面注入脚本,并且还需要在服务器中部署一套控制台系统。 :-: ![](https://img.kancloud.cn/19/db/19dbb59a5b3b7edc1eafd7688b65b5f6_1316x851.png =800x) **2)抓包工具**   或者借助[Charles](https://www.charlesproxy.com/)、[Fiddler](https://www.telerik.com/fiddler)这类抓包工具来查看网络通信、映射本地脚本等。 :-: ![](https://img.kancloud.cn/de/a3/dea37b6d1af2bb0578d032b4a82eacf4_2058x1382.png =800x)   不过在 Android 6.0 之后,不会信任从抓包工具导出的根证书,这就导致无法在抓包工具中浏览 HTTPS 通信,不过 iOS 没有这方面的限制。   而网页中的某些业务可能需要借助客户端的能力(JSBridge)才能完成,但这块无法在 PC 浏览器中实现。   由此可见,需要有种办法能够调试 iOS 和 Android 两种客户端中的网页。 ## 二、iOS   iOS 的调试比较简单,可以借助 Safari 浏览器实现。 **1)显示开发**   首先显示 Safari 浏览器的“开发”菜单。   以 macOS 为例,偏好设置 > 高级,然后勾选“在菜单栏中显示开发菜单”。 :-: ![](https://img.kancloud.cn/92/f3/92f36a8a6a1679e94b90481a3acadb26_1536x874.png =600x) **2)开启调试**   然后是开启 iPhone 的 Safari 调试模式,设置 > Safari浏览器 > 高级 > 网页检查器 > 启用。 :-: ![](https://img.kancloud.cn/51/06/51061dab33451cbd43445d470b6e4180_1242x1030.png =300x) **3)两端联调**   现在就可以开始调试了,将手机用数据线与电脑连接。   在访问页面后,选中开发菜单,找到对应的手机,就能看到访问中的网页地址。 :-: ![](https://img.kancloud.cn/09/9a/099a3ee177a3270a0a495a451b3d2510_2026x468.png =800x) **4)调试窗口**   点击页码地址,进入调试窗口,常规的诸如网络、元素等调试模块都有。 :-: ![](https://img.kancloud.cn/f3/75/f3750a4630dde9f458508b2b1ab16f72_2000x1300.png =800x)   除了能映射客户端 WebView 中的网页之外,Safari 浏览器中的页面也能同步映射到调试窗口。 ## 三、Android   Android 配置调试的过程比较波折,可以借助 Chrome 浏览器实现。 **1)显示开发者选项**   首先需要在手机中显示开发者选项,默认是隐藏的,各款手机的开启过程可能略有不同。   以小米为例,我的设备 > 全部参数与信息 > MIUI版本,点击 5~8 下,就会有一个开发者模式开启的提示。 :-: ![](https://img.kancloud.cn/de/45/de45f1dc7624e24609ad00bc9f3d08d1_485x675.png =300x) **2)开启 USB 调试**   然后进入更多设置,翻到最后就能看到开发者选项菜单,进入后,开启 USB 调试。 :-: ![](https://img.kancloud.cn/d5/c9/d5c91920344e360eecd326be24332143_459x485.png =300x) **3)Chrome Inspect**   接着打开电脑的 Chrome 浏览器,输入 chrome://inspect。 :-: ![](https://img.kancloud.cn/09/25/09255804f30ed91dd00d640fff430b05_1152x554.png =600x)   现在可以在客户端中访问网页,下图的 WebView 表示客户端环境,点击 inspect。 :-: ![](https://img.kancloud.cn/5d/93/5d9314fc188b68a9d37ab020806852b2_1802x892.png =600x)   应该是弹出控制台,但是却发生了错误,提示 HTTP/1.1 404 Not Found。 :-: ![](https://img.kancloud.cn/de/d7/ded7e2951884b065c83841ec435039e8_2516x452.png =800x)   这是因为 Android System WebView 的版本低于电脑 Chrome 浏览器的版本,前者是 117,而后者是 120。 :-: ![](https://img.kancloud.cn/4f/f2/4ff2774a559447667751387f041a0b37_2540x1400.png =800x)   如果移动端的 Chrome 浏览器版本较低,那么在调试时,也会出现同样的问题。   若未出现上述异常,可直接跳过下一节的版本升级。 **4)版本升级**   两者的解决办法都是升级,一个是升级 Android System WebView,另一个是升级 Chrome 浏览器。   而 Android System WebView 需要到 Google Play Store 中更新。   由于图中已经是最新版本,因此没有显示更新按钮。 :-: ![](https://img.kancloud.cn/6e/d1/6ed102b073d9bc42deffffe63c484c59_474x514.png =300x)   在更新成功后,以小米为例,在开发者选项中,选中 WebView 实现,就能看到当前版本。 :-: ![](https://img.kancloud.cn/0d/9c/0d9c16850117ad9209f81e63c0e0c322_492x251.png =300x) **5)调试窗口**   重新访问网页,提示 Remote browser is newer than client browser. Try `inspect fallback` if inspection fails。   也就是说,客户端的版本高于电脑浏览器,那么可以点击 inspect fallbak 按钮。 :-: ![](https://img.kancloud.cn/9a/7d/9a7d73fbf091ea782b39ccab2c023dff_1462x716.png =600x)   在点击后,就能正式出现完整的调试窗口,左边是网页,右边是控制台。   当有一端移动网页时,另一端也能看到在移动,两者实现了同步。 :-: ![](https://img.kancloud.cn/ab/75/ab75b77135a13dd2992623321700e526_2892x1722.png =800x) 参考资料: [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),欢迎浏览。 ![](https://box.kancloud.cn/2e1f8ecf9512ecdd2fcaae8250e7d48a_430x430.jpg =200x200) 推荐一款前端监控脚本:[shin-monitor](https://github.com/pwstrick/shin-monitor),不仅能监控前端的错误、通信、打印等行为,还能计算各类性能参数,包括 FMP、LCP、FP 等。