是基于目前的主流场景——H5页面在APP端嵌入到应用中。基于H5页面承载的平台，我们遇到了很多设备的兼容性问题【比如：ios13.6.1页面一直循环请求问题】，Android5.0+ios10白屏问题等】对于特殊机型，我们无法直接通过浏览器调试问题。因此，我们需要在真实的设备场景中采用真机调试的方式来进行进一步的问题分析。一、真机调试（一）IOS调试对于mac电脑，ios可以直接使用USB，真机连接MAC电脑，通过Safari浏览器进行调试。手机准备：打开设置，找到Safari浏览器，在Safari浏览器中找到高级，在高级中找到webinspector和JavaScript，打开webinspector和JavaScript手机准备好后，开始在电脑上操作：首先打开Safari进行开发和调试，在首选项中选择开发选项框。您现在将看到“开发”菜单栏。手机连接电脑后，打开Safari浏览器，在手机上打开我们的H5页面，在Safari的菜单栏中找到开发，在开发下拉选项卡中找到连接的设备信息，然后就可以了选择设备后看到右侧我们打开H5对应的页面地址，选择之后我们会发现在移动设备中也会有选择的标识。单击后，将打开调试弹出窗口。顶部有调试选项：包括控制台、元素和源。工具不全等，建议升级Safari版本再试。由于APP包本身的问题，如果没有在本地IDE中打出包，在调试APP中直接连接H5页面，将无法获取勾选的应用。(2)Android调试对于Android4.2及以后版本，开发者选项默认是隐藏的。开启开发者选项需要在设置中点击关于本设备，然后点击版本号7次，会出现弹窗。Windows提示，打开开发者选项；在开发者选项中，打开USB调试开关；电脑连接手机，手机上选择允许电脑连接；【注意：有的充电线只能用来充电，需要的是可以USB调试的数据线，前者打开USB，但没有反应】mac需要安装android和adb配置后才能在chrome调试工具中看到要调试的页面。安装完成后需要配置adb，参考以下文章：https://www.jianshu.com/p/61339291c9e2打开AndroidStudio，打开File中的ProjectStructure，复制sdk路径并打开终端，输入以下命令:touch.bash_profile这条命令的作用是如果.bash_profile文件不存在则创建；然后输入以下命令：open-e.bash_profile该命令的作用是用文本编辑器TextEdit打开.bash_profile文件。如果是第一次配置环境变量，这个文件应该是空的。接下来，将以下代码添加到文件中：exportANDROID_HOME="/Users/macbook/Library/Android/sdk"///AndroidSDK路径exportPATH=${PATH}:${ANDROID_HOME}/tools///exportPATH=${PATH}:${ANDROID_HOME}/platform-tools///编辑adb环境变量路径后，按command+S保存退出。执行以下命令刷新环境变量：source.bash_profile使用以下命令测试adb是否安装成功。如果不是，请检查保存的sdk路径是否正确：adb版本安装adb后，创建并修改adb_usb.ini文件：手机连接电脑，在终端输入：system_profilerSPUSBDataType，即可查看所有界面和计算机的设备信息。获取上面Android机器的vendorID，复制终端输入：vim~/.android/adb_usb.ini，输入i，进入编辑模式，将vendorID粘贴进去，然后输入：wq保存。关闭并重启adb：adbkill-server,adbstart-server最后查看移动设备是否连接成功：adbdevices如果查看移动设备，添加的设备不是设备，而是未授权的“未授权”状态，然后使用以下解决方法：删除adbkey撤销手机USB调试权限，关闭手机开发者模式，关闭USB调试，关闭adb【adbkill-server】，或者重启电脑重新连接手机，打开开发者选项，打开USB调试弹出是否允许USB调试弹窗，再次点击允许，然后执行adbdevices，即可完美解决。连接成功后，打开谷歌调试工具：chrome://inspect/#devices，在手机端打开H5页面，可以看到调试的H5页面地址，点击调试：2.抓包主要在数据返回有问题，需要提供curl或者分析服务器返回数据结构时执行的操作。这里主要介绍Charles抓包的使用。（一）Charles概述Charles是一款常用的HTTPS协议网络数据包拦截工具，是一款非常好用的抓包工具。Charles的优点有：支持SSL代理，可以拦截分析SSL请求；支持流量控制，模拟弱网情况；支持ajax调试，自动格式化json或xml数据，方便查看；支持重发网络请求，方便后端调试；支持修改网络请求检查；支持拦截和动态修改网络请求；支持多种平台（mac、windows和linux）。Charles的工作原理：Charles抓包的本质是通过网络代理抓包。普通HTTP请求流程：加入Charles的HTTP代理的请求和响应流程：综上所述，Charles其实在中间做了一个拦截，对请求和响应进行拦截和修改。(2)HTTP抓包流程下面我们来看一下HTTP抓包流程。①开启Charles代理第一次下载安装后，机器的系统代理会默认开启，因为我们只监控移动端，所以去掉这个选项：激活http代理功能：②添加代理到手机WIFI打开wifi设置，选择已连接WIFI，点击修改网络，代理改为手动；输入代理服务器的IP和端口，IP为安装Charles的电脑IP地址，端口为上一步设置Charles时设置的端口：注意：手机连接的WIFI必须与计算机处于同一局域网中。③开启查尔斯录音功能。当手机连接代理时，Charles会弹出相应的提示框，点击允许即可。点击工具栏上的开始录制按钮，启动抓包功能。④启动移动端应用，开始抓包。在手机端操作相应的页面进行抓包，在Charles的主界面可以看到相应的请求内容。⑤分析抓取的数据包（三）HTTPS抓包步骤以上是HTTP请求的抓包流程，但是对于C端项目来说，大部分都是HTTPS请求，所以对于HTTPS，我们还是需要做一些前期工作,保证能顺利抓包。①HTTPS的基本原理HTTPS实际上是HTTP的升级版，在HTTP的基础上增加了处理加密信息的模块[HTTPS=HTTP+SSL/TSL]。服务端和客户端的信息传输都会经过TLS加密，所以传输的数据都是加密数据。这可以防止第三方获取敏感信息。②在手机上安装SSL证书Android手机将Android手机连接Charles，输入IP地址和端口号，打开Charles证书，直接在Android手机上安装证书。然后在手机浏览器中打开“chls.pro/ssl”地址，打开后将证书安装到本地，显示下载后，在文件管理中找到刚才下载的证书，将文件扩展名改为prem，并将扩展名更改为crt。更改完成后，点击证书安装，选择证书安装程序，为证书命名，点击确定弹出“Installed“Named””，则安装成功。ios手机和ios手机也连接WIFI打开Charles的电脑IP，按照android的Charles下载证书的步骤将证书下载到iOS手机上。然后在手机的Safari浏览器中输入chls.pro/ssl，就会弹出图1的弹窗。点击允许进入安装步骤。单击安装以输入警告。单击安装以完成安装。然后进入设置→关于本机→证书信任设置→找到新安装的证书，打开开关，安装完成。③激活Charles的SSL代理④对指定的URL请求启用SSL代理功能。如果点击某个请求后发现是乱码，则需要为指定的URL请求开启SSL代理功能。【启用后，启用是灰色的】⑤抓包过程与HTTP抓包过程相同。至此，就可以进行数据分析了（4）Charles其他操作①弱网模拟打开弱网设置模块如下图，勾选Allowweaknetwork调试好后，在下面调整弱网的参数参数：②修改请求和响应的内容设置Charles的断点：开启指定URL的断点功能：编辑请求和响应的内容：编辑请求：点击editRequest编辑请求内容，点击执行后editing，将此请求发送给服务器编辑response：点击editresponse，可以编辑response内容，完成后点击execute，将修改后的数据发送给客户端③视图切换和关键字符筛选Charles主要提供了两个视图：结构：视图根据访问的域名对网络请求进行分类顺序：视图根据访问时间对网络请求进行排序如果有太多响应较多，可以过滤：④将以上设置标记为启用标识如下：第一：SSL设置第二：弱网控制第三：断点设置
