网页抓包工具Charles介绍

0    71    1

Tags:

👉 本文共约12643个字,系统预计阅读时间或需48分钟。

抓包工具Charles的使用教程

参考:https://zhubangbang.com/charlesproxy

如果您是您一次使用Charles,可能对下面的感兴趣。

如果您已经正在使用Charles,可能感兴趣下面的工具

如果您想了解顶部菜单栏,可以看下面的

如果您有前端测试的需求,推荐 SwitchHosts 这个小工具,当然您如果对chrome浏览器的在线改host感兴趣,也可以用下 Host Switch Plus

Charles可能很多人不熟悉,但是另外一个windows下的Fiddler很多人应该不陌生的;它们都是同性质的代理抓包工具;

正常情况下,Chrome DevTool已经满足了日常web开发的需求,但是有的特性: 编辑request的参数、重定向request请求的资源、编辑response的数据 ,ChromeDevTool就很蛋疼了,而且查看和调试移动端资源时候Chrome也并不好用;

我常借用Charles做这些事情 :

  • 抓取 Http 和 Https 的请求和响应,抓包是最常用的了。
  • 重发网络请求,方便后端调试,复杂和特殊情况下的一件重发还是非常爽的(捕获的记录,直接repeat就可以了,如果想修改还可以修改)。
  • 修改网络请求参数(客户端向服务器发送的时候,可以修改后再转发出去)。
  • 网络请求的截获和动态修改。
  • 支持模拟慢速网络,主要是模仿手机上的2G/3G/4G的访问流程。
  • 支持本地映射和远程映射,比如你可以把线上资源映射到本地某个文件夹下,这样可以方面的处理一些特殊情况下的bug和线上调试(网络的css,js等资源用的是本地代码,这些你可以本地随便修改,数据之类的都是线上的环境,方面在线调试);
  • 可以抓手机端访问的资源(如果是配置HOST的环境,手机可以借用host配置进入测试环境)

其实Charles的实现原理并不复杂;大概的实现如下;

网页抓包工具Charles介绍

charles相当于一个插在服务器和客户端之间的“过滤器”;

当客户端向服务器发起请求的时候,先到charles进行过滤,然后charles在把最终的数据发送给服务器;

注意:此时charles发给服务器的数据,不一定是客户端请求的数据;charles在接到客户端的请求时可以自由的修改数据,甚至可以直接Block客户端发的请求;

服务器接收请求后的返回数据,也会先到charles,经过charles过滤后再发给客户端;

同理:客户端接收的数据,不一定就是服务器返回的数据,而是charles给的数据;

正因为上面的原理,所以charles能实现的功能,对前端开发者来说非常有吸引力,相当于请求和响应都可控的,而且charles为了控制更加方面,提供很多简洁的操作;

网页抓包工具Charles介绍

注意Charles是收费软件,可以免费试用30天的时间,推荐使用正版,研究学习可以看下 charles破解版免费下载和安装教程 (我个人用的是charles4.1.2这个版本);

如果想要抓包,第一件事情,就是把charles设置成为本机和服务端之间的”过滤器”;让所有的网络请求全部经过charles,这样就可以捕获并记录到你请求的内容和返回数据了,原理请参照上面那张图片;需要注意的是,如果你访问的是web,可以把所有请求抓到;但如果你想抓某些应用(比如手机上的应用等),应用使用的某些资源,如果没有向服务器发送请求,而是通过调用内部资源的方式进行展现,那么此时charles是抓不到的;验证这个的方式很简单,就是把网络断掉后,如果还可以继续展现,就是属于调用内部资源的,这种时候就不要想着通过抓包工具来捕获资源了,他都没有像服务器发起请求,手机点烂也抓不到的;

启动 Charles 后,第一次 Charles 会询问你是否把Charles设置为系统的代理,如果此时你忽略了这个询问敞口,你可以在后期设置的;将 Charles 设置成系统代理:选择菜单中的 “Proxy” -> “Mac OS X Proxy/windows proxy” 来将 Charles 设置成系统代理,参考如下,如果Mac下有管理密码,需要输入密码后方可进行;

网页抓包工具Charles介绍

将charles设置为chrome的代理

需要注意的是,Chrome 和 Firefox 浏览器并不一定使用的就是本机,可能是一些代理工具,而 Charles 是通过将自己设置成代理服务器来完成资源记录的,所以如果你的charles无法截取 Chrome 和 Firefox 浏览器的网络请求内容,需要在浏览器里做下修改。在 Chrome 中设置成使用系统的代理服务器设置即可,或者直接将代理服务器设置成 127.0.0.1:8888 也可达到相同效果。

网页抓包工具Charles介绍

备注:如果您的chrome有用过改HOST的扩展工具(比如你用了 Host Switch Plus 这个扩展工具),请暂时关闭;否则chrome会通过你的扩展控制,不能使用charles;你的chrome中可能会看到您的网络代理设置是由扩展程序管理的。 这种的提示;如果你有修改HOST或者用host进行FQ的需求,我更加推荐你使用 SwitchHosts 这个工具;

charles 主界面的介绍

Charles 主要提供两种查看封包的视图,分别名为 “Structure” 和 “Sequence”。
– Structure/结构视图,将网络请求按访问的域名分类,比如某个域名下有n个资源请求,那么所有此域名下的请求都会在这里做一个详细的分类;

网页抓包工具Charles介绍

– Sequence/序列视图,将网络请求按访问的时间排序,按照你的电脑的发送请求顺序进行。

网页抓包工具Charles介绍

可以根据具体的需要在这两种视图之前来回切换。

当使用”序列视图”的时候

请求多了有些时候会看不过来,Charles 提供了一个简单的 Filter 功能,可以输入关键字来快速筛选出 URL 中带指定关键字的网络请求。

对于需要抓取的某个请求,通常情况下,我们需要对网络请求进行过滤,只监控向指定目录服务器上发送的请求。对于这种需求,以下几种办法:

方法一:直接过滤域名

在主界面的中部的 Filter 栏中填入需要过滤出来的关键字。例如我查看的域名地址是: https://zhubangbang.com , 那么只需要在 Filter 栏中填入 zhubangbang.com或bang,即可过滤含有这些关键字信息的请求(只要host和path中含有即可)。

网页抓包工具Charles介绍

方法二:修改Include的域名和端口

在 Charles 的菜单栏选择 “Proxy”->”Recording Settings”,然后选择 Include 栏,选择添加一个项目,然后填入需要监控的协议,主机地址,端口号。这样就可以只截取目标网站的封包了;

网页抓包工具Charles介绍

通常情况下,我们使用方法一做封包过滤,方法二做一些唯一的域名抓包,正常情况下,不推荐这种设置方法;

因为这种方法,你的charles只能抓你配置的域名;如果某天早晨,你的charles一切正常,访问也正常,而且在active commections里也看到了某个域名的请求信息,但是在主界面死活看到获取到的信息,不用着急,非常有可能是因为你设置了include的指定域名;而且是设置后你忘记解除了,导致你一脸懵逼;这种方法非常不推荐,太粗暴了,除非你这半个月都只看某个HOST下的信息,否则 千万千万别这么搞,很容易在以后使用时候的忘记解除

如果你只是为了更清楚的查看某个域名下的请求和响应信息,推荐使用结构视图模式下的焦点域名设置;那种模式比这种方法更好,下面是过滤焦点域名后在序列模式下的调用方法;

方法三:过滤焦点域名

网页抓包工具Charles介绍

在目标的网络请求上右键,选中focus(此时,该域名已经被设置为一个焦点标记了;);然后点击fillter后面的focused来筛选你的做的focus标记文件;

你设置的焦点域名在”focused Hosts”里面可以查看和管理

网页抓包工具Charles介绍

结构视图,这种模式下的展现更加人性化;

当你设置某个域名为焦点域名的时候,会把当前域名单独显示在上面,

而其它的非焦点域名,都会在other Hosts里显示;

网页抓包工具Charles介绍

捕获的信息,界面展示的信息如下,

网页抓包工具Charles介绍

contents是最常用的一个标签,其中上半部分是请求,下半部分是响应;

请求部分中,会根据请求的内容,而分为很多项;比如如果是表单提交,还会有form的选项供你查看提交的内容(表格图形化的方式),最后一项”Raw”是未经处理的请求信息,可以理解为,raw左侧的所有项目都是对raw信息的拆分和美化,以便直观查看;当然响应区域的raw和其它项目的关系也是一样,响应部分的Raw是接收到的全部未处理信息;如果响应内容是 JSON 格式的,那么 Charles 可以自动帮你将 JSON 内容格式化,方便你查看。如果响应内容是图片,那么 Charles 可以显示出图片的预览。

Charles菜单介绍

网页抓包工具Charles介绍

一、file(文件菜单)

网页抓包工具Charles介绍

这个实在没有必要新建一篇文章介绍,需要注意的是;

“导入””导出”这个功能在和别人沟通的时候很常用,比如你向第三方工具/类库开发人员求助某个功能,或者有BUG怎么避开;

他们一般会让你提供抓包到时候收到的文件,或者应用场景之类的;

你可以导出你捕捉到的信息,发送给别人(类似PS里的PSD源文件),

别人收到后,在charles里打开就可以看到同样的抓包信息了,方便远程分析和交流;

二、edit(编辑菜单)

查看 charles编辑菜单介绍

charles中Edit菜单的介绍;

我的是4.1.2版本,mac系统下的菜单大同小异;

网页抓包工具Charles介绍

这里用的一般也就查找和偏好设置;

查找设置

网页抓包工具Charles介绍

界面如上图,也没啥好说的;

偏好设置

网页抓包工具Charles介绍

视图选项

网页抓包工具Charles介绍

启动设置

网页抓包工具Charles介绍

警告设置

网页抓包工具Charles介绍

三、view(视图菜单)

查看 charles的视图菜单介绍

Charles的视图菜单里的东西其实是非常常用的功能;

但是我们一般是不需要从这里点进来的;

网页抓包工具Charles介绍

里面,无非是查看的视图结构(按照域名和按照访问时间)

然后是一些概览之类的;如下图

网页抓包工具Charles介绍

在下面是把charles的请求和响应以什么方式来展现的;

Focus Host是焦点域名的;这里配置好的可以在结构视图中,单独拎出来显示;

如下图,在把zhubangbang.com设为焦点域名,在视图中是下图这么展示的;

网页抓包工具Charles介绍

在序列视图的时候,是按照下面这么展示的;

选择focued后,就会只保留你的焦点域名;

网页抓包工具Charles介绍

四、 proxy (代理菜单)

  1. - stop / start recording 开始/暂停记录
  2. - stop / start throttling 开始/暂停节流
  3. - enable / disable breakpoints 启用/禁用断点
  4. - recording settings 记录设置
  5. - throttle settings 节流设置
  6. - breakpoint settings 断点设置
  7. - reverse proxies 反向代理
  8. - port forwarding 端口转发
  9. - windows proxy Windows 代理(开启整个系统通过 charles 作为代理)
  10. - mozilla firefox proxy 火狐代理
  11. - proxy setting 代理设置
  12. - ssl proxy setting ssl 代理设置
  13. - access control setting 访问控制设置
  14. - extornal proxy setting 外部代理设置
  15. - web interface setting Web 界面设置

分类: Charles

Charles 抓包使用教程

  • charles使用教程

  • 将 Charles 设置成系统代理

  • Charles 主界面介绍

  • 过滤网络请求

  • 截取 iPhone 上的网络封包

  • 截取 Https 通讯信息

  • 模拟慢速网络

  • 修改网络请求内容

  • 给服务器做压力测试

  • 修改服务器返回内容

  • 总结

  • 简介

  • 网页抓包工具Charles介绍

    Charles 是在 Mac 下常用的网络封包截取工具,在做 移动开发 时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析。

    Charles 通过将自己设置成系统的网络访问代理服务器,使得所有的网络访问请求都通过它来完成,从而实现了网络封包的截取和分析。

    除了在做 移动开发 中调试端口外,Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能,Charles 还可以分析 Https 协议。

    Charles 主要的功能包括:

    将 Charles 设置成系统代理

    之前提到,Charles 是通过将自己设置成代理服务器来完成封包截取的,所以使用 Charles 的第一步是将其设置成系统的代理服务器。

    启动 Charles 后,第一次 Charles 会请求你给它设置系统代理的权限。你可以输入登录密码授予 Charles 该权限。你也可以忽略该请求,然后在需要将 Charles 设置成系统代理时, 选择菜单中的 “Proxy” –> “Mac OS X Proxy” 来将 Charles 设置成系统代理。如下所示:

    网页抓包工具Charles介绍

    之后,你就可以看到源源不断的网络请求出现在 Charles 的界面中。

    需要注意的是,Chrome 和 Firefox 浏览器默认并不使用系统的代理服务器设置,而 Charles 是通过将自己设置成代理服务器来完成封包截取的,所以在默认情况下无法截取 Chrome 和 Firefox 浏览器的网络通讯内容。如果你需要截取的话,在 Chrome 中设置成使用系统的代理服务器设置即可,或者直接将代理服务器设置成 127.0.0.1:8888 也可达到相同效果。

    Charles 主界面介绍

    网页抓包工具Charles介绍

    Charles 主要提供两种查看封包的视图,分别名为 “Structure” 和 “Sequence”。

    大家可以根据具体的需要在这两种视图之前来回切换。请求多了有些时候会看不过来,Charles 提供了一个简单的 Filter 功能,可以输入关键字来快速筛选出 URL 中带指定关键字的网络请求。

    对于某一个具体的网络请求,你可以查看其详细的请求内容和响应内容。如果请求内容是 POST 的表单,Charles 会自动帮你将表单进行分项显示。如果响应内容是 JSON 格式的,那么 Charles 可以自动帮你将 JSON 内容格式化,方便你查看。如果响应内容是图片,那么 Charles 可以显示出图片的预览。

    过滤网络请求

    通常情况下,我们需要对网络请求进行过滤,只监控向指定目录服务器上发送的请求。对于这种需求,以下几种办法:

    方法一:在主界面的中部的 Filter 栏中填入需要过滤出来的关键字。例如我们的服务器的地址是: http://yuantiku.com , 那么只需要在 Filter 栏中填入 yuantiku 即可。

    方法二:在 Charles 的菜单栏选择 “Proxy”–>“Recording Settings”,然后选择 Include 栏,选择添加一个项目,然后填入需要监控的协议,主机地址,端口号。这样就可以只截取目标网站的封包了。如下图所示:

    网页抓包工具Charles介绍

    通常情况下,我们使用方法一做一些临时性的封包过滤,使用方法二做一些经常性的封包过滤。

    方法三:在想过滤的网络请求上右击,选择 “Focus”,之后在 Filter 一栏勾选上 Focussed 一项,如下图所示:

    网页抓包工具Charles介绍

    这种方式可以临时性的,快速地过滤出一些没有通过关键字的一类网络请求。

    截取 iPhone 上的网络封包

    Charles 通常用来截取本地上的网络封包,但是当我们需要时,我们也可以用来截取其它设备上的网络请求。下面我就以 iPhone 为例,讲解如何进行相应操作。

    Charles 上的设置

    要截取 iPhone 上的网络请求,我们首先需要将 Charles 的代理功能打开。在 Charles 的菜单栏上选择 “Proxy”–>“Proxy Settings”,填入代理端口 8888,并且勾上 “Enable transparent HTTP proxying” 就完成了在 Charles 上的设置。如下图所示:

    网页抓包工具Charles介绍

    iPhone 上的设置

    首先我们需要获取 Charles 运行所在电脑的 IP 地址,Charles 的顶部菜单的 “Help”–>“Local IP Address”,即可在弹出的对话框中看到 IP 地址,如下图所示:

    网页抓包工具Charles介绍

    在 iPhone 的 “ 设置 ”–>“ 无线局域网 ” 中,可以看到当前连接的 wifi 名,通过点击右边的详情键,可以看到当前连接上的 wifi 的详细信息,包括 IP 地址,子网掩码等信息。在其最底部有「HTTP 代理」一项,我们将其切换成手动,然后填上 Charles 运行所在的电脑的 IP,以及端口号 8888,如下图所示:

    网页抓包工具Charles介绍

    设置好之后,我们打开 iPhone 上的任意需要网络通讯的程序,就可以看到 Charles 弹出 iPhone 请求连接的确认菜单(如下图所示),点击 “Allow” 即可完成设置。

    网页抓包工具Charles介绍

    本人提供Oracle(OCP、OCM)、MySQL(OCP)、PostgreSQL(PGCA、PGCE、PGCM)等数据库的培训和考证业务,私聊QQ646634621或微信db_bao,谢谢!
    网页抓包工具Charles介绍后续精彩内容已被小麦苗无情隐藏,请输入验证码解锁本站所有文章
    验证码:
    请关注本站微信公众号,回复“小麦苗博客”,获取验证码。在微信里搜索“DB宝”或者“www_xmmup_com”或者微信扫描右侧二维码都可以关注本站微信公众号。

标签:

Avatar photo

小麦苗

学习或考证,均可联系麦老师,请加微信db_bao或QQ646634621

您可能还喜欢...

发表回复

嘿,我是小麦,需要帮助随时找我哦
  • 18509239930
  • 个人微信

  • 麦老师QQ聊天
  • 个人邮箱
  • 点击加入QQ群
  • 个人微店

  • 回到顶部