阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Charles 使用教程

    本文介绍 charles 使用教程 - 代理抓包的使用方法

    Charles

    Charles是一个HTTP代理/ HTTP监视器/反向代理,使开发人员能够查看其机器和Internet之间的所有HTTP和SSL / HTTPS流量。这包括请求,响应和HTTP标头(包含cookie和缓存信息)

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

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

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

    推荐购买正版Charles

    • Charles: 网络封包分析 开发者调试工具
    • 购买正版Charles地址数码荔枝商城
    • 正版的优点:
      • 可以使用账号登录,具有完美的用户体验,有问题可以直接发工单,不用心惊胆战的担心突然不能用了;
      • 盗版因为不能用账号登录,一般数据也都是临时的,不能使用云相关的功能。
      • 可以使用最新版的软件功能,整体体验非常好;
      • 不到200块的价格,购买Charles后,一次购买,终身使用,非常的实惠。

    如果您是您一次使用 Charles

    可能对下面的感兴趣。

    如果您已经正在使用 Charles

    可能感兴趣下面的工具

    如果您想了解顶部菜单栏

    可以看下面的

    Charles 相关

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

    Charles 和 windows 下的 Fiddler 都是同性质的代理抓包工具

    Chrome DevTool 不能满足所有调试

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

    我常借用 Charles 做这些事情

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

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

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

    https://a.axihe.com/img/charles/chharles_total-1.jpg

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

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

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

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

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

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

    注意问题

    如果想要抓包,第一件事情,就是把 charles 设置成为本机和服务端之间的”过滤器”;

    让所有的网络请求全部经过 charles,这样就可以捕获并记录到你请求的内容和返回数据了,原理请参照上面那张图片;需要注意的是,如果你访问的是 web,可以把所有请求抓到;

    但如果你想抓某些应用(比如手机上的应用等),应用使用的某些资源,如果没有向服务器发送请求,而是通过调用内部资源的方式进行展现,那么此时 charles 是抓不到的;验证这个的方式很简单,就是把网络断掉后,如果还可以继续展现,就是属于调用内部资源的,这种时候就不要想着通过抓包工具来捕获资源了,他都没有像服务器发起请求,手机点烂也抓不到的;

    第一次启动 Charles

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

    https://a.axihe.com/img/charles/image_thumb.png

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录