RN 开发时虽然可以借助 remote-devtools 等工具在 chrome 中调试，但是在有些场景下，比如微信登录，不能用 chrome 调试，这个时候就需要抓包工具的帮助了，在 Mac 上首选 Charles。
安装
配置配置代理端口号，我用的是 8888
配置手机代理，主机名是 mac 的 IP 地址，可以使用 ifconfig 指令查看
这样就可以正常抓包 http 请求了
https配置 ssl proxy，我直接使用的是 :，也可以有针对的配置
Mac 上安装证书
点击后会自动打开 Mac 的钥匙串管理，找到刚刚添加的 Charles 的证书
设置为”始终信任“
手机上添加证书
使用手机浏览器打开上面的链接，会下载证书文件，可能是 .pem 文件，也可能是 .crt 文件，直接打开，如果不能直接打开，可以通过从设备中找到证书文件安装，效果如下
安装时需要手机密码，安装后可以在信任列表中找到刚刚安装的证书
问题小米浏览器下载显示无法打开文件
在 设置 -> 更多设置 -> 系统安全 -> 加密与凭据 中，选择 “从存储设备安装”，然后找到下载的证书文件安装
可能因为系统版本不同略有差异，但大抵相同遵照配置安装证书之后 https 请求显示的还是 unknown
原因：这是 Android 7.0 及之后的系统版本的安全策略，APP 需要添加网络安全性配置才能进行调试
解决方法：在 APP 内添加安全配置文件修改 AndroidManifest.xml 文件1
2
3
4
5
6
7<?xml version="1.0" encoding="utf-8"?>
... >
...
在 res 目录下创建 xml 目录，在目录下创建 network_security_config.xml 文件(文件名一致即可)
network_security_config.xml 文件内容如下1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<?xml version="1.0" encoding="utf-8"?>
Android Studio 同步时报错：Gradle ‘app’ project refresh failed: Unable to find valid certification path to requested target
原因：Charles 会默认打开系统代理，所以 Android Studio 在 sync project 的时候，会经过 Charles 的代理，又因为 Charles 设置了根证书，所以 AS 在 sync project 的时候就报了‘找不到证书’的错误
解决方法：Charles -> Proxy -> Proxy Settings -> macOS
在 macOS 里把 Enable macOS proxy 和 Enable macOS proxy on launch 的勾去掉，然后重新启动一下 Charles ，重启 AS 就可以正常编译了
参考文章
