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 就可以正常编译了
参考文章