美文网首页程序员
Charles超详细使用文档

Charles超详细使用文档

作者: Gabriel_said | 来源:发表于2020-09-08 11:36 被阅读0次

Charles 的简介

如何安装 Charles

将 Charles 设置成系统代理

Charles 主界面介绍

过滤网络请求

截取 iPhone 上的网络封包

截取 Https 通讯信息

模拟慢速网络

修改网络请求内容

给服务器做压力测试

修改服务器返回内容

反向代理

设置外部代理,解决与翻墙软件的冲突

总结

 Charles是一个HTTP代理服务器,HTTP监视器,反转代理服务器,当程序连接Charles的代理访问互联网时,Charles可以监控这个程序发送和接收的所有数据。它允许一个开发者查看所有连接互联网的HTTP通信,这些包括request, response和HTTP headers (包含cookies与caching信息)。

Charles 主要的功能包括:

截取 Http 和 Https 网络封包。

支持重发网络请求,方便后端调试。

支持修改网络请求参数。

支持网络请求的截获并动态修改。

支持模拟慢速网络。

Charles安装:

    去Charles的官方网站(http://www.charlesproxy.com)下载最新版的相应操作系统的Charles

安装包安装即可。

    Charles是收费软件,可以免费试用30天。试用期过后,未付费的用户仍然可以继续使用,但

是每次使用时间不能超过30分钟,并且启动时将会有10秒种的延时。

****破解码:

Registered Name: https://zhile.io

License Key: 48891cf209c6d32bf4

将Charles设置为系统代理

这个操作很方便,在使用浏览器第一次访问是会弹窗提示是否要设为代理。

截取移动设备上的网络请求包

我们在调试移动APP时,需要抓取APP发送的数据包,首先进行设置,Proxy -> Proxy Settings默认端口是8888,根据实际情况可修改。

查看本机IP地址:Help -> Local IP Addresses

然后就是配置设备端的代理,这个和fiddler一样。

打开要调试的组件,请求就会发送到Charles,然后验证是否允许访问。

当点击允许后,可以在proxy ->Access Control Settings里看到可以访问此代理服务器列表。

如果不小心点了拒绝的话,重启Charles用手机再次访问,允许就可以了。

截取Https通信信息

windows:

选择Help -> SSL Proxying -> Install Charles Root Certificate.

Charles默认并不会截取Https的请求,所以需要在配置中添加,Proxy -> SSL Proxying Settings中设置需要截取的ip及端口。

可以使用通配符*来标识抓取所有地址请求。

移动端:

选择 Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Devices or Remote Brower,然后就可以看到Charles弹出的安装教程。

证书安装过程与Fiddler类似,在链接代理的终端浏览器中打开chls.pro/ssl。获得证书后安装。

同上,Charles默认不截取任何Https的请求,配置与电脑一样。

Charles主界面介绍

Charles 主要提供两种查看封包的视图,分别名为

Structure

Structure/结构视图,将网络请求按访问的域名分类,比如某个域名下有n个资源请求,那么所有此域名下的请求都会在这里做一个详细的分类;

Sequence

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

请求部分中,根据请求的内容,分很多项;

比如如果是表单提交,有form的选项供查看(表格图形化的格式),

最后的Raw是没有处理的请求信息,左侧的所有项目都是对raw的拆分和美化(响应区域的raw和其他项目也是这样),

如果响应内容是json格式的,charles会自动将json格式化,

如果是图片,可以显示出图片的预览。

Charles代理菜单

常用功能:记录设置,节流设置,断点设置;

charles还提供一个场景的使用,当你的测试目标为设备时,可以取消windows代理,此时电脑的访问就不会进过charles。

记录设置

Include/Exclude,正向及反向的包含记录,如上图是一个正向的包含,通过点击Add添加相应的域名(小窍门:在host中输入完整地址,鼠标点击path,charles会自动填充所需内容,如果不清楚某一位置该填什么实用通配符*代替即可),如果要测试的仅有一到两个新接口,可以入上图详细的填写接口地址,如果是测试一整个项目,那么通过在域名后面设置通配符*可以很好的过滤除这个域名以外所有的请求。反向则相反,除了设置的域名其他均记录,另!!!这个是记录不是过滤,也就是说开启这个功能出这些设置的域名,其他是不会被记录的。

节流设置

在代理菜单点击节流设置后弹窗中选中Enable Throttling来启用节流选项,charles提供许多网络场景配置,可以方便的选择需要的常用网络场景。在主界面点击小乌龟就可以开启节流。

参数解释;

Bandwidth----带宽

Utilisation-----利用率,带宽可以利用的比例

Round-trip latency------往返延迟测量客户端和远程服务器之间的第一次往返通信的毫秒延迟。

MTU----在任何传输的TCP数据包的最大尺寸。指定MTU不改变的可用带宽,但允许Charles在MTU分配带宽大小的块,导致在每个传输包分割的现实水平。

Reliability-------可靠性是衡量连接完全失败的可能性。这是非常有用的模拟不可靠的网络条件。可靠性是指定为成功发射10kib消息的可能性。

Stability-------稳定性是衡量一个连接的可能性是不稳定的,因此降低了质量。这是非常有用的模拟网络,如移动网络,定期连接质量差。

unstable quality range--------此处设置主要针对于Stability中设置中的范围。

断点设置

在断点设置的弹窗中添加需要断点的接口地址地址(charles的个个模块添加地址方法基本一致)这一不同的是可以设置打断请求或者响应。

每次该接口请求时弹出断点弹窗,Edit Request/Response编辑你所需要修改的任何内容,编辑完成后点击Execute。如果勾选了请求和响应,那么charles则会在请求和响应时均打断一次提供编辑功能。

Charles工具菜单

常用功能:禁用缓存和map&rewrite

禁用缓存,很多情况下因为开发自己发了版或你发版后忘记刷新(web端和H5页面),会提一些已修复的bug,造成与开发的矛盾,禁用缓存为的是让我们每一次切换菜单时都能拉取到最新的js,资源等等,避免造成类似问题。

map&rewrite

Charle的映射分为两种,map remote和map local;

map remote--------把你要请求的地址,映射到一个远程地址,相当于把你的请求地址修改了。

map local----------把需要请求网络的文件映射为请求本地文件。

这边着重讲map local

通过之前讲的内容,charles的添加域名的一些配置都是大同小异,无法这边是选中一个json格式的文件做为本次请求的返回内容。这样我们在有接口文档的情况下,可以编辑各种返回的值来校验前端处理是的正确性或者保证必要节点不被一个阻塞性的接口所打断太久。

这个就是需要json文件,文本编辑直接改后缀就行。

到这里似乎是ok了,实际操作中这样的响应往往是不行,因为响应的header不匹配,这里就需要另外的一个帮手。

Rewrite--------在通过charles时修改请求和响应。

第一个Add当然又是域名了,第二个则是规则。

Type中有很多选项,header,url,path,body等等,我们这边主要使用的是add header,勾选response。然后最关键的地方来了,你不知道怎么改是不是,

回忆下前面说的,响应区域的框框,看到么header都在里面。配置完rewrite,再配合着map,你就可以抛弃后端测试页面了。

最后;

这是charles的右击菜单,之前说过的功能大部分能在这里找到,而且点击的话是会把域名给配置完成的。

相关文章

  • Charles超详细使用文档

    Charles 的简介 如何安装 Charles 将 Charles 设置成系统代理 Charles 主界面介绍 ...

  • charles 使用文档

    1、下载安装包 打开浏览器访问 Charles 官网 ,下载相应系统的 Charles 安装包,然后安装即可。 地...

  • (new)压缩js/css、chunk分离

    参考文档:webpack打包体积优化(超详细) 使用分析器webpack-bundle-analyzer(可视化大...

  • Charles基本使用

    一、charles官网:在这里可以下载到charles和使用文档 二、charles注册码:(在help-regi...

  • Charles使用教程及Https乱码解决

    Charles的使用教程 手机端代理工具Charles(俗称花瓶)的详细使用教程及问题解决汇总(v4.2.1,iO...

  • elasticsearch 数据管理

    一、 文档: 二、 文档元数据: 详细说明: 详细使用方式: ① 使用自己的ID生成标识:命令: ② 自增的ID:...

  • Charles抓包教程

    Charles抓包教程 0 概述 文档内容:主要描述使用Charles工具抓取移动端APP与服务器传输数据的操作教...

  • charles使用教程详细介绍

    之前一直没用Charles抓过包,今天用了确实挺好用的,https的也可以抓到,非常方便,下面介绍一下我用到的功能...

  • Charles的使用详细介绍

    一、Charles简介 1.Charles的功能 Charles 是在 PC 端常用的网络封包截取工具,在做移动开...

  • Charles的使用详细介绍

    一、Charles简介 1.Charles的功能 Charles 是在 PC 端常用的网络封包截取工具,在做移动开...

网友评论

    本文标题:Charles超详细使用文档

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