【抓包】青花瓷使用教程①

大家好，我是小鑫同学。一位从事过 Android 开发、混合开发，现在长期从事前端开发的编程爱好者，我觉得在编程之路上最重要的是知识的分享，所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识，欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~

写作背景：

抓包也是作为程序员的一项基本的本领，不论是需要分析客户端的网络请求状态还是抓取一些接口来实现一些自己的页面都有需要。相比来说 Charles 的功能完善、界面简洁、跨平台等特点都不错，配置也没有想象的复杂。我们通过几节的文章来学习一下 Charles 。

Charles 区域介绍：

操作快捷栏：

操作快捷栏这块可化分为 4 个小区域：

显示模式：

切换显示方式为结构模式，也就是树状结构，可以展开来看到当前域名下各个接口的信息：

切换模式为顺序模式，也就是按时间拦截的先后顺序依次展示：

Charles 代理配置：

代理开启：

一切的拦截源于代理的功劳，所以当我们在 PC 刚打开 Charles 的时候虽然默认开启的录制开关，但并没有拦截到任何内容。我们要想拦截 PC 的网络信息，这时候就需要开启代理，开关位置 【Proxy】=>【macOS Proxy】，需要注意的是如果你系统已开启了代理将会出现冲突导致无法正常截取，请关闭其它的代理软件。

注：window 的开关和 macOS 的开关一样，android 和 ios 的配置需要在手机设置页面进行代理地址和端口的配置，且手机需要和 pc 在同一个局域网内。

端口设置：

当开启了代理后在 macOS 的【网络偏好设置】=>【高级】=>【代理】中将看到下图已被自动配置好了。我们要关注一下这个端口号，因为在前端开发的一些项目在启动后可能会占用掉 8888 端口。

我们可以在【Proxy】=>【Proxy Settings】中指定一个新的端口号或改为动态端口。

注：上面的配置无误，Charles 将开始输出 macOS 中的请求信息了。

结论：

Charles 的主要原理就是通过代理将客户端发出的请求和服务器响应的内容进行拦截并处理来组成 Charles 的主要功能。如：资源代理、弱网模拟、断点调试等，下一节将来介绍各种功能的使用。