基于目前主流场景——H5页面内嵌在APP端的动端调试应用,我们基于H5页面承载的攻略平台,遇到很多设备的动端调试兼容性问题【如:ios13.6.1页面一直循环请求问题、Android5.0 + ios10白屏问题等】,攻略针对特殊机型,动端调试我们并不能直接通过浏览器调试出其问题所在。攻略因此,动端调试需要我们在真实的攻略设备场景下,采用真机调试的动端调试方法,进行进一步问题的分析。
对于mac电脑,ios可以直接使用USB,将真机连接在MAC电脑上,通过Safari浏览器调试。
手机的准备工作:
手机准备就绪后,开始在电脑上操作:
注意事项:
对于mac,需要安装android和adb配置,才可以在chrome的调试工具中看到将要调试的页面。安装后需要配置adb,参考以下文章:https://www.jianshu.com/p/61339291c9e2
然后打开终端,输入以下命令:
touch .bash_profile
该命令的作用是如果不存在.bash_profile文件,则创建该文件;然后输入以下命令:
open -e .bash_profile
该命令的作用是用文本编辑器 TextEdit 打开.bash_profile文件。如果第一次配置环境变量,则该文档应该是空的。
接下来,在该文件中加入下面的代码:
export ANDROID_HOME="/Users/macbook/Library/Android/sdk" /// Android SDk 路径
export PATH=${ PATH}:${ ANDROID_HOME}/tools ///
export PATH=${ PATH}:${ ANDROID_HOME}/platform-tools /// adb环境变量 路径
编辑好后按下 command + S 保存退出即可。
执行以下命令来刷新环境变量:
source .bash_profile
通过以下命令来测试 adb 是否安装成功,如果还不行,请检测保存的sdk路径是否正确:
adb version
安装好adb后就进行创建和修改adb_usb.ini文件:
如果查看手机设备时,已添加的设备不是devices,而是unauthorized『未授权』状态,则使用以下解决方法:
连接成功后,打开谷歌调试工具:chrome://inspect/#devices,手机端打开H5页面,即可看到调试的H5页面地址,点击后即可调试:
抓包主要是在数据返回有问题,需要提供curl或者分析服务端返回数据结构时进行的操作。这里主要介绍使用 Charles 抓包。
Charles 是常用的 HTTPS 协议网络包截取工具,是一款非常好用的抓包工具。
Charles 的优势如下:
Charles 的工作原理: Charles的抓包的本质是通过网络代理进行抓包。
综上,其实 Charles 在中间做了一个拦截,对请求和响应进行截取和修改的过程。
下面来看看 HTTP 的抓包过程是怎么的。
① 开启Charles代理
② 手机端WIFI添加代理
打开 wifi 设置,选择已经连接的WIFI,点击进入修改网络,将代理改为手动;输入代理服务器的IP与端口,IP 即安装了 Charles 的电脑 IP 地址,端口就是上一步设置 Charles 时设置的端口:
注意: 手机连接的 WIFI 要与电脑在同一个局域网内。
③ 开启Charles录制功能
当手机连接上代理后,Charles会弹出相应的提示框,点击 allow 即可。点击工具栏上的开始录制按钮,即启动抓包功能。
④ 启动移动端中的应用开始抓包
在手机上操作相应的页面进行抓包,在Charles的主界面上就可以看到对应的请求内容。
⑤ 分析抓取的数据包
以上为 HTTP 请求的抓包流程,但是针对 C 端项目,绝大部分都是 https 请求,所以对于HTTPS,我们还需要做一些前置的工作,保证可以顺利的抓包。
① HTTPS 的基本原理
HTTPS 其实就是HTTP的升级版,在HTTP上又加了一层处理加密信息的模块【HTTPS = HTTP + SSL/TSL】。服务端和客户端的信息传输都会通过TLS进行加密,所以传输的数据都是加密后的数据。这样就避免了敏感信息被第三方获取。
② 在手机端安装SSL证书
将Android手机与 Charles 进行连接,输入好IP地址和端口号后,打开Charles的证书,直接将证书安装在Android手机上。
然后在手机浏览器中打开『chls.pro/ssl』地址,打开后安装证书到本地,显示下载完成后,在文件管理中找到刚刚下载的证书,将后缀为 prem 的文件,更改扩展名变为crt。变更完成后点击证书进行安装,选择证书安装程序,为证书命名,点击确定后弹出"已安装『命名』",则成功安装。
ios 手机也在WIFI中连接打开Charles的电脑IP,同android的Charles下载证书的步骤,将证书下载到iOS手机上。然后在手机Safari浏览器中也输入chls.pro/ssl,则弹出图1弹窗,点击允许,进入安装步骤,点击安装,进入警告,点击安装,则安装完成。之后在设置→ 关于本机→ 证书信任设置 → 找到刚安装的证书,将开关打开,即安装完成。
③ 激活Charles的SSL代理
④ 将指定的URL请求开启SSL代理功能
如果点击某一个请求后发现是乱码,则需要将指定的URL请求开启SSL代理功能。【开启后,enabled是置灰的】
⑤ 抓包流程与HTTP抓包流程相同
至此,可以进行数据的分析
① 弱网模拟
打开弱网设置模块如下图,勾选允许弱网调试后,在下面的参数中调整弱网的参数:
② 修改请求和响应的内容
设置Charles的断点:
对指定的URL开启断点功能:
编辑请求与响应的内容:
③ 视图切换和关键字筛查
Charles主要提供两种视图:
如果响应的请求太多了,可以进行筛选:
④ 标识
开启以上设置的标识如下:
(责任编辑:娱乐)
金富科技(003018.SZ)2020年度净利润降14.99% 基本每股收益0.44元
海关总署:前10个月煤、天然气进口量价齐升 进口铁矿砂9.33亿吨
联想小新Pad Pro 12.7平板将上市 拥有8种互联方式
AYANEO AIR 1S掌机发布 超轻设计预售4699元起
狂暴1070Ti+8700K 攀升H8 Power主机现售7999元起
康健国际医疗(03886.HK)公布消息:预计年度综合亏损约2.55亿港元
百模大战,谁是赢家?文心3.5稳坐国内第一,综合评分超ChatGPT!