我们在开发H5应用的时候经常会遇到需要定位，或者其他必须在真机上才能体验的功能，这时候我们就需要在手机上预览我们的H5页面，但是我们电脑本地开发环境，手机访问不到，这时候怎么办呢，我们就用到Charles了，Charles可以抓包APP内的HTTP和HTTPS请求的数据，当然也能抓到我们H5的各种数据，或者预览我们H5的本地开发页面。
Charles官网下载对应版本即可

image.png

安装完成之后打开Charles，出现以上界面。

配置

1.配置电脑的代理端口，找到Charles的Proxy中的Proxy Settings进行相关设置，一般默认即可。

image.png

2.在Charles的Help中的Local IP Addresses找到本地电脑的IP地址，并记录下来：
例如：
我的本地IP是172.16.1.14，
我的VPNIP是10.204.248.59，
这里用到的是我本地的IP地址，也就是172.16.1.14

image.png

3.在Charles的Help中SSL Proxying的Install Charles Root Certificate安装证书。
一直下一步安装即可。

image.png

4.在Charles的Proxy中的SSL Proxying Settings添加一个SSL代理，

image.png

并在Access Control Settings中完成设置。

image.png
这里需要输入我们自己电脑本地IP，正常情况这里默认就有了。

手机配置

1.手机连接上和电脑相同的wifi，要保证电脑和手机在同一个wifi下。
2.在手机的wifi设置中进行代理设置。点击相应wifi进入设置页面，点击配置代理，选择手动，填入刚刚记录的IP地址和配置的端口号。我这边分别配置172.16.1.14和8888

image.png
3.打开手机自带浏览器，访问chls.pro/ssl 下载证书并且安装，期间Charles会有弹框，选择允许即可。（我这里已经安装过了，所以不在弹框了，就不在截图展示了）
下载完成后进行安装，安装证书。
到此手机的设置就完成了。

H5预览/APP抓包/调试

这时候我们就能在手机上进行预览页面了。
在手机的浏览器里面输入我们本地环境的地址：例如172.16.1.11:3000

image.png

就可以在手机上进行预览功能了，在Charles中也可以看到我们访问的地址
包括我们的请求接口和请求数据等等，都可以看到了

image.png

我们就可以在手机上进行调试了。

同理APP上的抓包也是这样抓包的，例如以下，我就可以抓到一些美团APP的数据了。

image.png

请求拦截

1.在url列表中，找到需要拦截的url，右键选择Breakpoint。然后重新请求这时候我们会自动跳到Breakpoint的Edit Request中。这时候我们能够修改Request相关参数等

image.png

2.修改完成后，点击Execute进入请求返回结果，这时候我们点击Edit Response并且选择Json Text，这时候我们就能修改请求返回结果了，改成我们需要的结果再次点击Execute就可以让接口相应结果达到我们要的结果。

image.png