美文网首页程序员
Charles使用指南

Charles使用指南

作者: _karen | 来源:发表于2020-07-23 23:38 被阅读0次

    Charles简介

    Charles是一个HTTP代理服务器,HTTP监视器,反转代理服务器,是目前最强大的http调试工具,在界面和功能上远强于Fiddler,同时是全平台支持,唯一的缺陷是收费的。Charles通过将自己设置成系统的网络访问代理服务器,使得所有的网络访问请求都通过它来完成,它允许一个开发者查看所有连接互联网的HTTP通信,这些包括request, response和HTTP headers (包含cookies与caching信息),从而实现了网络封包的截取和分析。

    主要功能

    • 支持SSL代理。可以截取分析SSL的请求。
    • 支持流量控制。可以模拟慢速网络以及等待时间(latency)较长的请求。
    • 支持AJAX调试。可以自动将json或xml数据格式化,方便查看。
    • 支持AMF调试。可以将Flash Remoting 或 Flex Remoting信息格式化,方便查看。
    • 支持重发网络请求,方便后端调试。
    • 支持修改网络请求参数。
    • 支持网络请求的截获并动态修改。
    • 检查HTML,CSS和RSS内容是否符合W3C标准。

    Charles界面介绍

    image.png

    右键的各个选项


    image.png

    Charles设置过滤器

    • 临时过滤器设置


      image.png
    • 长久过滤器设置


      image.png
    image.png

    Charles抓取接口详解

    将浏览器取消缓存,打开Charles,刷新页面即可看到请求


    image.png

    抓取到的http请求,可查看响应


    image.png

    抓取https请求

    点击 Charles菜单下 Help -> SSL Proxying -> Install Charles Root Certifacate 选择添加。


    image.png

    从应用钥匙串访问搜索Charles,找到添加的证书,双击证书,在信任下选择始终信任。

    通过Charles抓包的时候需要在菜单Proxy -> SSL Proxying中配置需要开启Enable SSL Proxying并配置需要抓包的域名,可统一配置成* 443


    image.png

    客户端代理(抓取客户端的请求)

    要抓取客户端的请求,需要在客户端设置代理,设置—网络—手动设置代理,输入ip地址和端口,端口见Proxy Setting中的端口号,就可以抓取到http的请求,如果要抓取https的请求,要在手机上安装证书,Android和iOS均可,具体的可以百度
    charles安装ssl证书和charles使能ssl功能
    手机证书链接:https://www.charlesproxy.com/assets/legacy-ssl/charles.crt

    模拟慢速网络

    在 Charles 的菜单上,直接点击小乌龟图标,即可使得电脑访问使用慢速网络,如果有特殊的设置,可以选择 “Proxy”->”Throttle Setting” 项,在之后弹出的对话框中,我们可以勾选上 “Enable
    Throttling”,并且可以设置 Throttle Preset 的类型。如下图所示:


    image.png

    如果我们只想模拟指定网站的慢速网络,可以再勾选上图中的 “Only for selected hosts” 项,然后在对话框的下半部分设置中增加指定的
    hosts 项即可。

    修改网络请求的内容

    修改请求参数

    有些时候为了调试服务器的接口,我们需要反复尝试不同参数的网络请求。Charles
    可以方便地提供网络请求的修改和重发功能。只需要在以往的网络请求上点击右键,选择 “Edit”,即可创建一个可编辑的网络请求。如下所示:


    image.png

    我们可以修改该请求的任何信息,包括 URL 地址、端口、参数等,之后点击 “Execute” 即可发送该修改后的网络请求(如下图所示)。Charles
    支持我们多次修改和发送该请求,这对于我们和服务器端调试接口非常方便

    修改响应

    有些时候我们想让服务器返回一些指定的内容,方便我们调试一些特殊情况。例如列表页面为空的情况,数据异常的情况,部分耗时的网络请求超时的情况等。如果没有 Charles,要服务器配合构造相应的数据显得会比较麻烦。这个时候,使用 Charles 相关的功能就可以满足我们的需求。
    根据具体的需求,Charles 提供了 Map 功能、 Rewrite 功能以及 Breakpoints功能,都可以达到修改服务器返回内容的目的。这三者在功能上的差异是:

    1. Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。
    2. Rewrite 功能适合对网络请求进行一些正则替换。
    3. Breakpoints 功能适合做一些临时性的修改。
    • Map 功能
      Charles 的 Map 功能分 Map Remote 和 Map Local 两种,顾名思义,Map Remote 是将指定的网络请求重定向到另一个网址请求地址,Map Local是将指定的网络请求重定向到本地文件。
      在 Charles 的菜单中,选择 “Tools”->”Map Remote” 或 “Map Local” 即可进入到相应功能的设置页面。
      1.对于 Map Remote
      功能,我们需要分别填写网络重定向的源地址和目的地址,对于不需要限制的条件,可以留空。
      对于 Map Local 功能,我们需要填写的重定向的源地址和本地的目标文件。对于有一些复杂的网络请求结果,我们可以先使用 Charles 提供的“Save Response…” 功能,将请求结果保存到本地,然后稍加修改,成为我们的目标映射文件,命名为test.json。
      然后copy这个URL,用tools—Map Loacl 设置,如图:

      Charles会往“Notes”界面打个log,可以查看是否map映射成功 image.png
      然后再次发送请求,即可拿到修改后的响应
      image.png
    • Rewrite 功能
      Rewrite 功能功能适合对某一类网络请求进行一些正则替换,以达到修改结果的目的。
      例如,我们的客户端有一个 API 请求是获得phoneNo,而我当前的phoneNo是 “15510400131”,如下所示:


      image.png

      我们想试着直接修改网络返回值,将 15510400131换成成 110。于是我们启用 Rewrite 功能,然后设置如下的规则:


      image.png
      完成设置之后,我们就可以从 Charles 中看到,之后的 API 获得的phoneNo被自动 Rewrite 成了 110,如下图所示:
      image.png
    • Breakpoints 功能
      上面提供的 Rewrite 功能最适合做批量和长期的替换,但是很多时候,我们只是想临时修改一次网络请求结果,这个时候,使用 Rewrite 功能虽然也可以达到目的,但是过于麻烦,对于临时性的修改,我们最好使用 Breakpoints 功能。

    Breakpoints 功能类似我们在 开发编辑器 中设置的断点一样,当指定的网络请求发生时,Charles 会截获该请求,这个时候,我们可以在 Charles 中临时修改网络请求的返回内容。

    下图是我们临时修改phoneNo的 API,将phoneNo进行了更改,修改完成后点击 “Execute” 则可以让网络请求继续进行。

    需要注意的是,使用 Breakpoints 功能将网络请求截获并修改过程中,整个网络请求的计时并不会暂停,所以长时间的暂停可能导致客户端的请求超时。

    给服务器做压力测试

    我们可以使用 Charles 的 Repeat 功能来简单地测试服务器的并发处理能力,方法如下。
    我们在想打压的网络请求上(POST 或 GET 请求均可)右击,然后选择 「Repeat Advanced」菜单项,可以设置次数,做简单的压测,如下所示:


    image.png

    接着我们就可以在弹出的对话框中,选择打压的并发线程数以及打压次数,确定之后,即可开始打压。


    image.png

    结语

    Charles还有很多好用的功能可以供我们使用,有兴趣的大家可以一起交流

    相关文章

      网友评论

        本文标题:Charles使用指南

        本文链接:https://www.haomeiwen.com/subject/hneklktx.html