基于目前主流场景——H5页面内嵌在APP端的应用，我们基于H5页面承载的平台，遇到很多设备的兼容性问题【如：ios13.6.1页面一直循环请求问题、Android5.0 + ios10白屏问题等】，针对特殊机型，我们并不能直接通过浏览器调试出其问题所在。因此，需要我们在真实的设备场景下，采用真机调试的方法，进行进一步问题的分析。

（1）IOS 调试

对于mac电脑，ios可以直接使用USB，将真机连接在MAC电脑上，通过Safari浏览器调试。

手机的准备工作：

手机准备就绪后，开始在电脑上操作：

注意事项：

（2）Android 调试

对于mac，需要安装android和adb配置，才可以在chrome的调试工具中看到将要调试的页面。安装后需要配置adb，参考以下文章：

然后打开终端，输入以下命令：

该命令的作用是如果不存在.bash_profile文件，则创建该文件；然后输入以下命令：

该命令的作用是用文本编辑器 TextEdit 打开.bash_profile文件。如果第一次配置环境变量，则该文档应该是空的。

接下来，在该文件中加入下面的代码：

export ANDROID_HOME Android SDk 路径export PATH$PATH$ANDROID_HOMEtoolsexport PATH$PATH$ANDROID_HOMEplatformtools adb环境变量 路径

编辑好后按下 command + S 保存退出即可。

执行以下命令来刷新环境变量：

通过以下命令来测试 adb 是否安装成功，如果还不行，请检测保存的sdk路径是否正确：

adb version

安装好adb后就进行创建和修改adb_usb.ini文件：

如果查看手机设备时，已添加的设备不是devices，而是unauthorized『未授权』状态，则使用以下解决方法：

连接成功后，打开谷歌调试工具：chrome://inspect/#devices，手机端打开H5页面，即可看到调试的H5页面地址，点击后即可调试：

抓包主要是在数据返回有问题，需要提供curl或者分析服务端返回数据结构时进行的操作。这里主要介绍使用 Charles 抓包。

（1）Charles 概述

Charles 是常用的 HTTPS 协议网络包截取工具，是一款非常好用的抓包工具。

Charles 的优势如下：

Charles 的工作原理：Charles的抓包的本质是通过网络代理进行抓包。

综上，其实 Charles 在中间做了一个拦截，对请求和响应进行截取和修改的过程。

（2）HTTP 抓包过程

下面来看看 HTTP 的抓包过程是怎么的。

① 开启Charles代理

② 手机端WIFI添加代理

打开 wifi 设置，选择已经连接的WIFI，点击进入修改网络，将代理改为手动；输入代理服务器的IP与端口，IP 即安装了 Charles 的电脑 IP 地址，端口就是上一步设置 Charles 时设置的端口：

注意： 手机连接的 WIFI 要与电脑在同一个局域网内。

③ 开启Charles录制功能

当手机连接上代理后，Charles会弹出相应的提示框，点击 allow 即可。点击工具栏上的开始录制按钮，即启动抓包功能。

④ 启动移动端中的应用开始抓包

在手机上操作相应的页面进行抓包，在Charles的主界面上就可以看到对应的请求内容。

⑤ 分析抓取的数据包

（3）HTTPS抓包步骤

以上为 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抓包流程相同

至此，可以进行数据的分析

（4）Charles 其他操作

① 弱网模拟

打开弱网设置模块如下图，勾选允许弱网调试后，在下面的参数中调整弱网的参数：

② 修改请求和响应的内容

设置Charles的断点：

对指定的URL开启断点功能：

编辑请求与响应的内容：

③ 视图切换和关键字筛查

Charles主要提供两种视图：

如果响应的请求太多了，可以进行筛选：

④ 标识

开启以上设置的标识如下：