抓包青花瓷使用教程①

Posted 前端小鑫同学

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了抓包青花瓷使用教程①相关的知识,希望对你有一定的参考价值。

写作背景:

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

Charles区域介绍:

【抓包】青花瓷使用教程①_端口号

操作快捷栏:

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

快捷菜单

图标

功能

清空会话

【抓包】青花瓷使用教程①_客户端_02

清空会话开关

功能开关

【抓包】青花瓷使用教程①_端口号_03

录制/拦截开关

【抓包】青花瓷使用教程①_前端_04

SSL代理开关

【抓包】青花瓷使用教程①_前端_05

弱网模拟开关

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

断点开关

接口调试

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

修改当前选中的接口

【抓包】青花瓷使用教程①_客户端_08

重放当前选中的接口

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

校验当前选中接口响应

设置菜单

【抓包】青花瓷使用教程①_客户端_10

如:断点设置、网络缓存、资源映射等

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

Charles 系统级别的设置

显示模式:

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

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

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

【抓包】青花瓷使用教程①_前端_13

Charles代理配置:

代理开启:

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

【抓包】青花瓷使用教程①_端口号_14

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

端口设置:

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

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

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

【抓包】青花瓷使用教程①_前端_16

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

结论:

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

以上是关于抓包青花瓷使用教程①的主要内容,如果未能解决你的问题,请参考以下文章

Charles-青花瓷抓包工具

抓包青花瓷实战教程②

Charles安装及使用教程——请求抓包Https配置

iOS使用Charles(青花瓷)抓包并篡改返回数据图文详解

清花瓷抓包手机配置

ios 抓包工具 ios青花瓷charles