zoukankan      html  css  js  c++  java
  • charles系列04——常用功能介绍

    Charles的主要功能:
    
    (1)截取Http 和 Https 网络封包。
    
    (2)支持重发网络请求,方便后端调试。
    
    (3)支持修改网络请求参数。
    
    (4)支持网络请求的截获并动态修改。
    
    (5)支持模拟慢速网络。
    

    1. 模拟网速功能

    在线上环境通常有些因为网速慢导致的bug,在本机无法重现,那时候就很抓瞎,如果嫌远程麻烦,推荐使用throttle。

    支持对Bandwidth(带宽)、Utilistation(利用百分比)、Round-trip(往返延迟)、MTU(字节)进行配置,并且支持3G/4G或者其他网络模式。

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

     
     

    ADSL:属于DSL技术的一种,全称Asymmetric Digital Subscriber Line( 非对称数字用户线路),亦可称作非对称数字用户环路。是一种新的数据传输方式

    VDSL:是一种非对称DSL技术,全称Very High Speed Digital Subscriber Line (超高速数字用户线路)。和ADSL技术一样,VDSL也使用双绞线进行语音和数据的传输。VDSL是利用现有电话线上安装VDSL,只需在用户侧安装一台VDSL modem。最重要的是,无须为宽带上网而重新布设或变动线路。

    Isdn:综合业务数字网(Integrated Services Digital Network,ISDN)是一个数字电话网络国际标准,是一种典型的电路交换网络系统。在ITU的建议中,ISDN是一种在数字电话网IDN的基础上发展起来的通信网络,ISDN能够支持多种业务,包括电话业务和非电话业务。

    2.修改网络请求内容

    Charles可以方便地提供网络请求的修改和重发功能。这也可以解决我们,为了修改谋其格请求,或者反复尝试不同参数的网络请求的需求。方法是:只需要在以往的网络请求上点击右键,选择 “Edit”/点击铅笔图标,即可创建一个可编辑的网络请求。如下所示:

     
     

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

     
     

    3. 重复发送网络请求

    (1)Repeat:此功能此功能对于测试同学特别有用,可以检验接口的健壮性。对于前端的价值是不需要刷新页面,只需要repeat请求,比如检验代理是否成功,修改请求后执行等。使用方法:选择请求后,右击Repeat就是重复发送一次请求。 

    (2)Advanced Repeat可以自定义重复次数和重复间隔,重复发送多次请求。可以来简单地测试服务器的并发处理能力,方法如下:我们在想打压的网络请求上(POST或 GET 请求均可)右击,然后选择 「Repeat Advanced」菜单项。然后在弹出的对话框中,选择打压的并发线程数以及打压次数,确定之后,即可开始打压。(iteration:迭代次数,Concurrency:并发数,repeat为时间间隔)。

     
     

    4. 修改服务器返回内容

    有些时候我们想让服务器返回一些指定的内容,方便我们调试一些特殊情况。例如列表页面为空的情况,数据异常的情况,部分耗时的网络请求超时的情况等。如果没有Charles,要服务器配合构造相应的数据显得会比较麻烦。这个时候,使用 Charles 相关的功能就可以满足我们的需求。

    根据具体的需求,Charles提供了 Map 功能、 Rewrite 功能以及 Breakpoints 功能,都可以达到修改服务器返回内容的目的。这三者在功能上的差异是:

    △Map功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。

    △Rewrite功能适合对网络请求进行一些正则替换。

    △Breakpoints功能适合做一些临时性的修改。

    4.1 MAL

    在Charles的菜单中,选择 “Tools”->”Map Remote” 或 “Map Local” 即可进入到相应功能的设置页面。

    (1)map remote

    对于Map Remote功能,我们需要分别填写网络重定向的源地址和目的地址,对于不需要限制的条件,可以留空。

     
     

    (2)map local

    对于Map Local功能,我们需要填写的重定向的源地址和本地的目标文件。对于有一些复杂的网络请求结果,我们可以先使用 Charles 提供的 “Save Response…” 功能,将请求结果保存到本地(如下图所示),然后稍加修改,成为我们的目标映射文件。

    方法是:

    1.请求右键—save response,然后另存在自己电脑的某个位置(文件属性必须为.txt)

    2.请求右键/tools—MAPlocal,然后添加你刚才保存的文件,点击OK保存

     
     

    3.右键请求,选择repeat

    4.重新刷新app的页面,会看到数据已经修改过来了。

    5.去掉代理配置:取消勾选Tools—Maplocal即可

     
     

    4.2  Rewrite

    Map Local在使用的时候,有一个潜在的问题,就是其返回的 Http Response Header 与正常的请求并不一样。这个时候如果客户端校验了 Http Response Header 中的部分内容,就会使得该功能失效。解决办法是同时使用 Map Local 以下面提到的 Rewrite 功能,将相关的 Http 头 Rewrite 成我们希望的内容。

    Rewrite功能功能适合对某一类网络请求进行一些正则替换,以达到修改结果的目的。

    例如:我们的客户端有一个API请求是获得用户昵称,而我当前的昵称是 “XXXX”。我们想试着直接修改网络返回值,将“XXXX”替换成“测试测试下”。

    步骤是:

    1.选中请求,然后在Tools—右键选择rewrite功能;

    2.在弹出的提示弹窗中,选择add-rules

     
     

    3.完成设置之后,右键请求,选择 repeat。然后我们就可以从 Charles 中看到,之后的 API 获得的昵称被自动 Rewrite 成了 测试测试下,如下图所示:

     
     

    5. 断点功能(Breakpoints)

    上面提供的Rewrite功能最适合做批量和长期的替换,但是很多时候,我们只是想临时修改一次网络请求结果,这个时候,使用 Rewrite 功能虽然也可以达到目的,但是过于麻烦,对于临时性的修改,我们最好使用 Breakpoints 功能。

    Breakpoints,当指定的网络请求发生时,Charles 会截获该请求,这个时候,我们可以在 Charles 中临时修改网络请求的返回内容。

    Charles能够断到发送请求前(篡改Request)和请求后(篡改Response)。

    使用断点修改请求的弊端是,如果开发设置了请求超时时间,那么修改的速度慢了往往即使返回了也没有效果,所以实际测试中使用此方法的场景并不多。

    这里以将我的券金额修改为13.00元为例:

    (1) 针对接口右键选择"BreakPoints",这样这个接口就被加入到断点状态了;

     
     

    (2)需要进一步修改断点的属性,可以在菜单栏"Proxy"–>"Breakpoints Settings"里进行添加删除或者修改,并且可以选择这个断点是在request还是response,还是两者都要。这里只是修改response

     
     

    (3)刷新app界面,跳转到断点模版,这个时候你可以在对应状态情况下修改request或者response,然后点击下方按钮“Execute”。点开Edit Response界面,选择JSON格式,格式清晰,方便修改,直接在上面进行数据修改,改成你想要测试的数据,然后点击执行按钮

     
     

    (4)再次刷新app界面,然后app返回的是新改的数据,根据返回数据测试客户端显示是否正确

     
     

    6. 查看连接本机charles代理的ip

     
     

    这里可以看到连接自己charles代理的IP,针对某些不需要的/未知用户,点击remove即可

    7. 设置请求的黑名单

    不想某些请求发起,直接返回404,可以用黑名单。选择Tools-Blacklist,设置如下图:

     
  • 相关阅读:
    前端页面的防抖与节流
    vue3.0 响应式原理
    cssBEM命名规范及常用CSS class 命名
    vue2.x 响应式原理
    npm 相关命令
    Node之 fs
    Node 之 Buffer
    Node之path
    Node之process
    Node.js 如何处理 ES6 模块
  • 原文地址:https://www.cnblogs.com/miaoxiaochao/p/13025680.html
Copyright © 2011-2022 走看看