noham/knowledge-kit
1
0
Fork 0
mirror of https://github.com/NohamR/knowledge-kit.git synced 2026-05-24 20:00:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: Charles 高级技巧

Browse Source
This commit is contained in:
binpeng.liu
2022-11-29 23:56:21 +08:00
parent f0e20eaf2e
commit 09cb172354
8 changed files with 187 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
Chapter7 - Geek Talk/7.2.md
View File

@@ -13,6 +13,7 @@
- 服务器压力测试
- 反向代理
- 解决与翻墙软件的冲突
- 电脑已经可以科学上网了，手机如何科学上网？
@@ -75,7 +76,7 @@ Charles 的工作原理是将自身设置为系统的代理服务器来捕获所
- 方法3:一般打开 Charles 并设置好配置信息后（比如电脑本机或者设置过代理的手机）所有的网络请求都将在 Charles 的面板上显示，同时我们感兴趣的网络请求如果也在面板上显示的话，**“Structure”模式下**可以选中需要分析的网络请求，鼠标右击选择**“Focus”**。**“Sequence”模式下**可以在面板的网络请求显示面板的右下角看到一个**Focus**按钮，点击勾选后 Charles 只会显示你感兴趣的网络请求。
![Structure模式下Focus过滤网络请求](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2018-07-23%20上午9.22.39.png)
![Sequence模式下Focus过滤网络请求](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180723-092259.png)
@@ -119,7 +120,7 @@ Charles 的工作原理是将自身设置为系统的代理服务器来捕获所
![Charles确认开启抓取HTTPS](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2018-07-23%20上午9.47.09.png)
如果你需要捕获移动设备的 HTTPS 网络请求，则需要在移动设备上安装证书并作简单的设置
- 选择 Charles 顶部菜单栏选择 **“Help” ->"Install Charles Root Certificate on a Mobile Device or Remote Browser"**。然后就可以看到 Charles 弹出的安装说明了。
@@ -134,13 +135,12 @@ Charles 的工作原理是将自身设置为系统的代理服务器来捕获所
- iPhone 打开设置 -> 通用 -> 关于本机 -> 证书信任设置 -> 开启开关
![手机端CA证书的信任](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/164ac9a9ca26c907.png)
- 在 Charles 菜单栏 Proxy -> SSL Proxying Setting -> 点击 Add 按钮 -> 在弹出的对对话框设置需要监听的 HTTPS 域（*:代表通配符）
![HTTPS抓包端口和主机设置](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/164ac9aaad2c0ff8.png)
- 设置完毕，尽情抓取你想要的 HTTPS 网络请求吧。
![抓取京东HTTPS数据](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/164ac9a9a966fafe.png)
@@ -149,9 +149,9 @@ Charles 的工作原理是将自身设置为系统的代理服务器来捕获所
在平时开发的时候我们经常需要模拟弱网环境，并作弱网环境下的适配工作。Charles 为我们提供了这个服务。
在 Charles 菜单栏选择 **“Proxy” -> "Throttle Settings"**。在弹出的面板上设置网络请求的参数（上行，下行带宽、利用率、可靠性等等信息）。如下图所示。
![模拟弱网环境](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2018-07-23%20上午10.27.22.png)
如果你想对**指定主机**进行弱网环境下的测试，可以点击上图的“Add”按钮，在弹出的面板上设置协议、主机、端口来对指定的主机进行弱网设置。
![设置指定网络请求的弱网模拟](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180723-102606.png)
@@ -265,13 +265,36 @@ Charles 的反向代理功能允许我们将本地指定端口的请求映射到
Charles 的工作原理是把自己设置为系统的代理服务器，但是我们开发者经常会利用 VPN 翻墙访问谷歌查找资料（这些翻墙软件的工作原理也是把自己设置成为系统的代理服务器），为了2者和平共处。我们可以在 Charles 的 External Proxy Settings 中将翻墙的代理端口等信息填写。同时我们需要关闭翻墙软件的自动设置，更改为**“手动模式”**。（使其不主动修改系统代理）
## 电脑已经可以科学上网了，手机如何科学上网？
我们有时候会面临这样的问题，我们的电脑有科学上网能力，手机没有。这时候可以利用 Charles 强大的 **External Proxy Setting** 能力。
前提条件是：电脑具备科学上网能力、手机通过 Charles 设置代理到电脑上。
具体操作路径：顶部菜单栏 -> Proxy -> External Proxy Settings，点击勾选后弹出设置面板，如下图
![](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assetsCharles-ExternalProxySettings.png)
查看你电脑上科学上网工具的代理端口。我使用的是 clashX，打开：菜单栏 -> Help -> Ports 可以查看端口信息
![](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assetsClashx-Ports.png)
然后：
- 将顶部的 Use external proxy servers checkbox 进行勾选
- 将 Web Proxy（HTTP）进行勾选。另外在右侧的输入框填写 `127.0.0.1`,端口填写 ClashX 中查看到的端口信息，这里是 7890
- 将 Secure Web Proxy进行勾选。另外在右侧的输入框填写 `127.0.0.1`,端口填写 ClashX 中查看到的端口信息，这里是 7890
- 将 SOCKS Proxy 进行勾选。另外在右侧的输入框填写 `127.0.0.1`,端口填写 ClashX 中查看到的端口信息，这里是 7890
这样我们的手机也具备科学上网能力啦。
Tips：iPhone 的 App Store 内置了苹果证书（Certificate pinning），所以抓包（也就是伪造证书）的方式是不行的。
## 总结
Charles 功能强大、界面简洁，读完这篇文章并做出练习，相信你能很快掌握它，“工欲善其事，必先利其器” ，掌握了它，相信可以为你大大提高开发中调试网络的效率。**Enjoy yourself**
## 参考链接
[唐巧的博客](http://blog.devtang.com/2015/11/14/charles-introduction/)