H5移动端调试攻略

基于目前干流场景——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关键提供两种视图：

假设照应的恳求太多了，可以启动挑选：

④ 标识

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