我们在开发H5应用的时候经常会遇到需要定位，或者其他必须在真机上才能体验的功能，这时候我们就需要在手机上预览我们的H5页面，但是我们电脑本地开发环境，手机访问不到，这时候怎么办呢，我们就用到Charles了，Charles可以抓包APP内的HTTP和HTTPS请求的数据，当然也能抓到我们H5的各种数据，或者预览我们H5的本地开发页面。
Charles官网下载对应版本即可
安装完成之后打开Charles，出现以上界面。
配置
1.配置电脑的代理端口，找到Charles的Proxy中的Proxy Settings进行相关设置，一般默认即可。
2.在Charles的Help中的Local IP Addresses找到本地电脑的IP地址，并记录下来：
例如：
我的本地IP是172.16.1.14，
我的VPNIP是10.204.248.59，
这里用到的是我本地的IP地址，也就是172.16.1.14
3.在Charles的Help中SSL Proxying的Install Charles Root Certificate安装证书。
一直下一步安装即可。
4.在Charles的Proxy中的SSL Proxying Settings添加一个SSL代理，
并在Access Control Settings中完成设置。
这里需要输入我们自己电脑本地IP，正常情况这里默认就有了。
手机配置
1.手机连接上和电脑相同的wifi，要保证电脑和手机在同一个wifi下。
2.在手机的wifi设置中进行代理设置。点击相应wifi进入设置页面，点击配置代理，选择手动，填入刚刚记录的IP地址和配置的端口号。我这边分别配置172.16.1.14和8888
3.打开手机自带浏览器，访问chls.pro/ssl 下载证书并且安装，期间
Charles会有弹框，选择允许即可。（我这里已经安装过了，所以不在弹框了，就不在截图展示了）下载完成后进行安装，安装证书。
到此手机的设置就完成了。
H5预览/APP抓包/调试
这时候我们就能在手机上进行预览页面了。
在手机的浏览器里面输入我们本地环境的地址：例如172.16.1.11:3000
就可以在手机上进行预览功能了，在Charles中也可以看到我们访问的地址
包括我们的请求接口和请求数据等等，都可以看到了
我们就可以在手机上进行调试了。
同理APP上的抓包也是这样抓包的，例如以下，我就可以抓到一些美团APP的数据了。
请求拦截
1.在url列表中，找到需要拦截的url，右键选择Breakpoint。然后重新请求这时候我们会自动跳到Breakpoint的Edit Request中。这时候我们能够修改Request相关参数等
2.修改完成后，点击Execute进入请求返回结果，这时候我们点击Edit Response并且选择Json Text，这时候我们就能修改请求返回结果了，改成我们需要的结果再次点击Execute就可以让接口相应结果达到我们要的结果。
