移动端调试是每一位前端工程师必须掌握的技能，在移动端环境上往往有很多不同的情况，我们需要借助一些工具来调试。本文将介绍 Mac 如何安装 charles，进行抓包、以及一些应用场景。

场景一：app端内线上环境接口报错，想看看请求数据是否有误

场景二：微信环境内调用微信支付等，需要验证域名(aaa.bbb.com)才能调试。改一行代码我就发布上去?好麻烦啊。

场景三：app端内H5，调用jsBridge，和端上通信，本地开发环境压根没有这些jsBridge方法，那我改一行代码我就发布上去？然后在端内调试？

常用调试工具

eruda/vConsole Weinre、spy-debugger 等

charles 抓包

下载charles

下载并且安装charles并且打开

Mac 代理

1. Mac上安装证书

安装完成后，我们只能抓取 http 的网址，想要抓 https 的包需要安装证书

点击 Help -- SSL Proxying -- Install Charles Root Certificate

2. 信任证书

安装成功后需要信任证书

3. 开启Mac OS proxy

4. 把需要代理到域名添加到 SSL Proxying

5. 抓 https包 成功

6. 抓包无法成功？

闭电脑上 其他 网络代理！！不关闭可能导致charles代理失败

安卓手机 代理

1. 开启工具

点击 Help -- SSL Proxying -- Install Charles Root Certificate on a Mobile Device or Remote Browser

2. 手机连接Wi-Fi配置网络代理

连接当前网段wifi，长按当前wifi-修改网络-高级设置-代理手动-输入ip地址和端口号

3. 在手机浏览器输入 chls.pro/ssl 下载证书

4. 安装证书

在手机系统设置中搜索凭据-点击加密和凭据

点击从存储设备中安装

选择刚刚在浏览器中下载的证书

5.把需要代理到域名添加到 SSL Proxying

和Mac 设置SSL Proxying 步骤一致，

如果嫌单独添加麻烦, Proxy —> SSL Proxying Settings 的配置地址，如果不想每个域名都设置一次，可以直接把 Host 和 Port 都设为 *，允许抓取所有域名的请求包

6. 至此安卓 抓包就可以成功了

手机上打开一个百度的链接，在charles的 structure 看看是否能抓到网络请求。

用Map Remote 本地文件替换线上文件