首页 > 其他分享 >WebView中的页面调试方法

WebView中的页面调试方法

时间:2023-12-27 09:56:43浏览次数:21  
标签:网页 iOS 浏览器 WebView Android 调试 页面

  在 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)抓包工具

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

  

  不过在 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 组件

标签:网页,iOS,浏览器,WebView,Android,调试,页面
From: https://www.cnblogs.com/strick/p/17913802.html

相关文章

  • 解决Linux环境下Android调试adb没有权限问题
    转载自:https://codeleading.com/article/1564378047/问题描述adbdevicesnopermission(userxxxisnotintheplugdevgroup);see[http://developer.android.com/tools/device.html]解决方案在/etc/udev/rules.d/目录下创建文件:51-android.rules,并在文件中填入如......
  • 如何从Word中的整个文档中选择页面范围?
    转自:如何从Word中的整个文档中选择页面范围?如果要在Word文档中选择任何页面范围,可以用几种方法完成它?现在,我介绍一些技巧,供您选择MicrosoftWord中的页面范围。按住Shift键并在Word中选择页面范围使用VBA选择页面范围选择一系列页面KutoolsforWord 按住Shift键并在Word......
  • API文档生成!超好用API调试工具
    在数字化时代,API已经成为了应用程序之间进行通信的关键桥梁。随着API的普及和复杂性的增加,API研发和管理也面临着越来越多的挑战。为了更好地应对这些挑战,Apipost提供了一整套API研发工具,包括API设计、API调试、API文档和API自动化测试等功能。本文将深入介绍Apipost的优势和特点,助......
  • API文档生成!超好用API调试工具
    在数字化时代,API已经成为了应用程序之间进行通信的关键桥梁。随着API的普及和复杂性的增加,API研发和管理也面临着越来越多的挑战。为了更好地应对这些挑战,Apipost提供了一整套API研发工具,包括API设计、API调试、API文档和API自动化测试等功能。本文将深入介绍Apipost的优势和特点,......
  • nginx部署vue编译项目刷新页面404
    原因:nginx配置错误。因为vue打包输出的是单页网页应用,只有一个index.html入口,其他路径是由前端路由去跳转的,服务器目录下没有对应物理路径,所以就会报404。这样的nginx配置会出现该问题。location/{alias/home/vue/dist/;indexindex.html;}  解......
  • 基于Python-Windows环境的Excel页面截图并邮件正文发送
    截图模块#截图模块defget_snapshot():#定义变量#excel文件的绝对位置excel_file=r'E:\L.xlsx'#输出图片的绝对位置output_png_path=r'E:\L.png'#excel的sheet名称excel_tb='每日销售'#注意要装excel软件,否则会报错excel=win......
  • Flutter 页面专场动画
    在不同路由(或界面)之间进行切换的时候,许多设计语言,例如Material设计,都定义了一些标准行为。但有时自定义路由会让app看上去更加的独特。为了更好的完成这一点,PageRouteBuilder提供了一个Animation对象。这个Animation能够通过结合Tween以及Curve对象来自定义路由转换......
  • page-spy-web 一个方便的web 远程调试工具
    page-spy-web一个方便的web远程调试工具,可以实现像chrome一样debug远程web,同时也提供了比较专业的web管理运行docker-composeversion:"3"services:app:image:ghcr.io/huolalatech/page-spy-web:releaseports:-"6752:6752"web集成使用index.html<!DOC......
  • 使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的
    在前面随笔《在Winform应用中增加通用的业务编码规则生成》,我介绍了基于Winform和WPF的一个通用的业务编码规则的管理功能,本篇随笔介绍基于后端WebAPI接口,实现快速的Vue3+ElementPlus前端界面的开发整合,同样是基于代码生成工具实现快速的前端代码的生成处理。1、通用的业务编码规......
  • 鸿蒙开发入门:多HAP的开发调试与发布部署流程
    多HAP的开发调试与发布部署流程多HAP的开发调试与发布部署流程如下图所示。图1多HAP的开发调试与发布部署流程开发开发者通过DevEcoStudio工具按照业务的需要创建多个Module,在相应的Module中完成自身业务的开发。调试通过DevEcoStudio编译打包,生成单个或者多个HAP,即可基于HAP进......