众所周知，在调试微信相关的开发能力（登录、跳转小程序或 app）时候，微信 sdk 会先校验当前连接是否安全，域名是否在白名单里等操作，当然也可以通过改开发端口(80/443)、ssl 证书和本地 hosts文件来调试，但真机上的本地 dns 映射还是挺麻烦，况且我们开发的最终结果就是要以最终真机运行的效果为准的。
而 Charles 是目前强大、流行的http抓包调试工具，更有 Map Local 可以映射本地的资源，改写请求的参数和响应体。当我们调试 内嵌 web 的 app 项目和微信相关功能的时候，直接在手机上调试是最可靠的手段。
这篇文章会简单又不失细致地说一下开发中用到的 Charles 调试真机的一些方法。现在正文开始。
下载 Charles
当然是要先下载个对应操作系统的 Charles 啦宝。
使用 Charles 抓取 http 请求
打开 Charles，如果本次只是想抓取移动设备上的包，可以先把 macOS Proxy（windows 上的叫Window Proxy）的选项去掉，避免抓到 pc 端上的包带来的干扰。
打开 Charles 的 Proxy Settings 面板，在 HTTP Proxy 栏，填写代理端口（默认 8888），勾选 Enable transparent HTTP proxying
然后确保手机和 PC 端处于同一个局域网中，打开当前手机的网络配置，配置代理选项选择“手动”。
- 服务器：填写 pc 设备的 ip 地址
- 端口：输入刚刚在 Charles 配置的端口号
这个时候可以看到 Charles，会看到有一个设备连接提示，选择 Allow 添加到 Access Control 列表。
Charles 主要提供两种查看封包的视图，分别名为 “Structure”和 “Sequence”。其中Structure 视图会将抓到的网络请求按访问的域名分类；Sequence 视图则是将网络请求按访问的时间排序。大家可以根据具体的需要在这两种视图之间来回切换。
使用 Charles 抓取加密的 https 请求
当使用 Charles 抓取 https 的包的时候，会发现面板上的请求的 Content 信息上显示的全是乱码。
这是因为 charles 作为中间人的角色抓取到的数据都是加密过的，显示的自然就是上图的乱码。
选择 Help 菜单 -> SSL Prxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser
确保手机跟 PC 在同一个局域网内，并且手机网络上已配置 Charles 的 代理地址和端口，然后使用手机设备访问下图的红框框住的地址，下载并信任提供给 Chalres 使用的 CA 证书。不同的 Charles 版本，这个红框处的地址也都不一样的，这里要注意一下。
IOS 和安卓上下载和配置证书还有些区别，下面展开讲讲。
IOS 设备 CA 证书配置
手机打开浏览器（IOS 要用 Safari 浏览器），输入图中红框框中的 chls.pro/ssl，去下载适用 Charles 的 CA 证书安装，然后在手机的设置 > 通用 > 关于本机那滑动滑块信任 Charles 的 CA 证书：
Andriod 设备配置 CA 证书
这里用的一台小米8 的测试机，发现系统自带的浏览器不能下载 pem 这类文件，最后还是用的大 UC 的浏览器才可以，安卓的建议使用第三方的浏览器下载证书。
然后同样打开红框框中的 url 地址下载证书，下载完成之后打开 设置 -> 安全 -> 高级 -> 加密与凭据（或者直接在设置里搜索“加密与凭据”，选择“从存储设备安装”，选择下载下来的证书，给证书起个名， “凭据用途”或者叫使用用途这个地方要选择“WLAN”，然后点击确定即可。
证书配置完成之后
这时你就会发现 Charles 里能够看到加密了的请求和响应内容了。
原理就是设备信任了 Charles 的CA 证书之后，发送的 https 请求通过代理的 Charles，Charles 可以用自己的私钥来解密对称数据，然后 Charles 作为中间人，可以在服务器和客户端之间转发和查看所有报文。
使用 Map Local 映射本地资源
当要在真机上调试项目的时候，就可以用上 Charles 的 Map Local 功能来将线上的资源映射到自己本地的资源上，达到调试的目的。
以我手头上的某个项目为例，项目的静态资源存放在 https://static-cdn.***.com 域名下的 /static/** 目录
对着想要替换的资源路径右键，选择 Map Local 功能
选择对应要映射的本地路径，按 Select 确认
后续设备请求对应资源就会映射到本地的资源了
在本地的项目中执行相应的打包命令，配合 watch 指令就可以开启舒服的调试。
# 本地项目中
npm run build:dev -- --watch
断点调试 http 请求
对着想要打断点调试的请求url，右键选择 breakpoint
可以看到工具栏上的 Breakpoint 图标亮了起来，我们也可以通过这个按钮来全局开关断点。
当设备重新请求对应的请求的时候，一个断点会停滞两次，一次是拦截请求，一次拦截响应。我们可以通过 Edit Request 和 Edit Response 来更改请求或响应的信息。
这里通过给 base_info 接口打断点，更改直播间的标题为“阿五的直播间”，改完点击 Excute 生效
总结
熟练地使用 Charles 可以高效在真机设备中调试项目，特别是在 App 中内嵌的 h5，或者是需要使用微信开放能力的公众号页面，这些在模拟器上调试都比较繁琐，使用 Charles 的话，就都很简单了。况且使用 Charles 来调试也是最接近真机效果的，比较推荐这种方式。
打完收工。
参考资料
- Charles Getting Started: www.charlesproxy.com/documentati…
- 用 Charles 断点调试 HTTPS 请求，原理揭秘： juejin.cn/post/715386…
