Charles是一款常用的抓包工具，抓包工具可以截取通过它设置代理服务器下所有通过他发起与返回的网络请求，和fiddler、wireshark，原理是一样的。

  • Charles主要功能有：
    1、截取各种协议的网络包
    2、支持修改请求参数
    3、支持修改返回结果
    4、支持模拟弱网测试
  • Charles抓包的意义
    定位问题，因为可以获取发出去的请求，请求头，请求体，返回的数据，所以可以定位是前端的请求问题，还是后端的返回问题，或者是前端对返回取值的问题。测试同学就可以针对性的提bug，提升效率。除此之外，可以拦截请求，可以修改请求，即可以协助测试同学测试各种异常情况。
  • Charles在web端的抓包
  • web端抓包无需添加设置，打开Charles软件。
  • 此时，在浏览器任意的发起请求，比如访问一个网站，这些请求将被获取。如图，我们可以看到，我们访问的网站的URL，看到status是200（即请求成功）
  • 也可以在request看到请求的具体参数，比如我请求登录的usernam与password
  • 在response中也看的到请求成功的返回，status为0，接口请求成功，并返回了该用户的角色，这样登录成功后前段根据返回参数展示用户可以访问的菜单。
  • Charles 修改请求与返回操作
    在测试过程中，我们往往需要测试异常场景，通过正常的造数据，可能比较麻烦，我们就可以在Charles中对请求设置断点，在发起请求的过程，我们可以修改请求参数去发起请求，在请求成功后，我们可以修改返回的数据。
  • 先发起一次请求，对该请求设置断点，此次设置后，以后每次请求都将被拦截住。选中此次请求的default，右键，然后选择Breakpoint
  • 修改请求： 设置断点后，重新发一次请求，此时，我们可以看到浏览器中一直在转圈，没有响应。这是因为请求被拦截中，并没有发送出去。这时候我们看Charles，我们能看到有一个 Edit Request，里面分别有URL、Header、cookies等等，我们分别进行修改，然后点击右下角的Execute按钮。如果不修改请求的话，直接点击Execute按钮。【点了Execute按钮后，此次请求才发送出去了】
  • 修改返回：我们发起请求后，会收到响应的信息，而响应的信息，也会被Charles拦截住，此时我们能看到一个 Edit response，里面分别有 Header、cookie、txt、html等，我们对应修改后，点击右下角Execute按钮。如果不修改的话，直接点击Execute按钮。【点了Execute按钮后，此次响应才真正的返回给client端，即我们在浏览器中才收到响应】
  • Charles在APP端的抓包
    因为Charles和手机直接没有连接，所以不能直接抓APP的包，所以手机需要设置代理，将有Charles的电脑设置为代理服务器，这样每次手机的包就可以被Charles获取。
  • 确保电脑和手机在同一个局域网，通过命令 ipconfig或者查看电脑连接网络的详细信息，得到电脑的IP，然后在Charles里设置一个端口。如图进入proxy setting弹窗，填写端口（没有被占用的端口都可以），勾选上“Enable transparent HTTP proxying”，这样设置就完了
  • 打开手机，选择和电脑同一个局域网的WiFi，进入代理设置页面（多找一下，手机不一样可能位置不一样），选择手动代理，输入代理服务器主机名与端口，也可以设置不代理的网址，即访问该网址的请求都过滤，不拦截。
  • 设置完成后，在手机上发送的请求，即可被Charles获取，我们就可以分析请求或者返回啦，从而协助我们判断bug的原因了。
  • Charles的弱网设置
  • 我们在测试过程中，需要测试一些网络不好时候的异常场景，我们就可以通过设置Charles，模拟2G、3G的网络情况，设置一些上下行速率，设置一些丢包率。这些设置有行业标准，可以参考行业标准。