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

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

写作背景：

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

Charles区域介绍：

操作快捷栏：

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

快捷菜单	图标	功能
清空会话		清空会话开关
功能开关		录制/拦截开关
		SSL代理开关
		弱网模拟开关
		断点开关
接口调试		修改当前选中的接口
		重放当前选中的接口
		校验当前选中接口响应
设置菜单		如：断点设置、网络缓存、资源映射等
		Charles 系统级别的设置

显示模式：

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

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

Charles代理配置：

代理开启：

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

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

端口设置：

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

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

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

结论：

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