Charles使用教程

本文涉及的产品
.cn 域名,1个 12个月
简介: Charles是在您自己的计算机上运行的网页代理(HTTP代理/ HTTP监视器)。 然后将您的网页浏览器(或任何其他网络应用程序)配置为通过Charles访问网络,然后Charles可以为您记录和显示所有发送和接收的数据。

前言


20210129113620309.png

下载包地址


Charles介绍


Charles是在您自己的计算机上运行的网页代理(HTTP代理/ HTTP监视器)。 然后将您的网页浏览器(或任何其他网络应用程序)配置为通过Charles访问网络,然后Charles可以为您记录和显示所有发送和接收的数据。


在网页和网络开发中,无法看到网页浏览器/客户端与服务器之间正在发送和接收的内容。 没有这种可见性,就很难准确地确定故障的位置。 这时Charles可以轻松地查看正在发生的事情,因此可以快速诊断和解决问题。

Charles使调试变得快速,可靠和高级。 在解决问题时可以节省很多时间!


主要特征


SSL代理–以纯文本格式查看SSL请求和响应

带宽限制以模拟较慢的网络连接(包括延迟)

AJAX调试–以树形或文本形式查看XML和JSON请求和响应

AMF –以树形视图查看Flash Remoting / Flex Remoting消息的内容

重复请求以测试后端更改

编辑请求以测试不同的输入

截取和编辑请求或响应的断点

使用W3C验证器验证记录的HTML,CSS和RSS / atom响应


1、端口号设置


接下来打开Charles的代理设置:【Proxy->Proxy Settings】,设置一下端口号,默认的是8888,这个只要不和其他程序的冲突即可,并且勾选【Enable transparent HTTP proxying】。


2、查询连接IP


【Help -> Local IP Addresses】


3、SSL代理设置

【Proxy -> SSL Proxying Settings…】

这里最常用的设置就是第一个功能栏【ssl proxying】,这里记录了需要捕获哪些ssl的信息;

注意,如果你在这里不设置,虽然你安装了ssl的charles证书,你依然无法正常捕获;

20210128110821419.png



通过SSL代理,您的浏览器或应用程序将收到由Charles签名的证书,而不是来自远程Web服务器的原始证书。这将在您的浏览器或应用程序中触发警告,某些应用程序实际上可能会拒绝该连接。

这时,您可以将浏览器或应用程序配置为接受Charles的证书。


4、电脑SSL代理

不开启电脑代理的话直接把勾去掉即可

20210128135959311.png


5、请求被禁:抓包时显示红色的小手

即请求被禁,见下图:

2021012820220589.png

旧版本:

【Tools -> Black List Settings 】(黑名单设置):阻止对选定位置的请求。

【Tools -> White List Settings 】(白名单设置):阻止除指定地点以外的所有请求。


20210128202913491.png


新版本

【Tools -> Allow List 】(允许列表):只允许对选定位置的请求

等同旧版本的白名单。

20210128111612712.png

说明:只允许对选定位置的请求。


注意:在使用这个功能的时候,请先理解设置这个功能的含义。要么就别使用。


6、抓包中路径显示【unknown】及信息显示乱码问题

在点击具体的请求时,发现请求协议的路径显示为,请求体(request)和返回信息(response)显示成乱码。出现原因要分以下两种情况,分别进行处理:


6.1、http请求


如果为http请求,那么应该是返回来的中文乱码,解决方案是找到该软件显示包内容,Contents目录下的info.plist,打开文件找到【vmoption】,添加【-Dfile.encoding=UTF-8】即可。

20210128141344874.png


6.2、https请20210128173134955.png

这时候就需要配置证书处理。


6.2.1、maOS设置


打开Charles, 点击【Help->SSL Proxying->Install Charles Root Certificate】

然后输入密码进行安装,安装完成之后就要信任这个证书,刚开始我以为下载下来就没事了,其实不是。

方法是有 双击,然后选择 始终信任。

这样就能在电脑上装好证书了。接下来是最重要的:给手机装证书。


6.2.2、iPhone设置


手机要与电脑连接同一个局域网(局域网获取见标题2)。

注意: 链接的电脑不要开启多个网关:即不要即链接Wifi又链接数据网线,在访问的时候会出现地址出现错误。


1)、获取域名和端口号

在Charles中, 点击【Help->SSL Proxying->Install Charles Root Certificate on a Mobile Device or Remote Browser】

20210128194034800.png

2)、配置代理

【设置 -> 选择对应的无线局域网 -> 点击进入详情 -> 点击配置代理 -> 改手动配置 -> 输入服务器和端口号】

20210128200322771.png


3)、下载证书

safari浏览器 上,输入【chls.pro/ssl】,点击执行。

20210128173818321.jpg

20210128173832126.jpg



4)、安装证书

【设置 -> 通用 -> 描述文件 -> 安装已下载的描述文件】

20210128173842404.jpg


20210128173855726.jpg


5、开启证书信任开关

描述文件安装成功后,执行如下操作:

【设置 -> 通用 -> 关于本机 -> 证书信任设置 -> 对已安装的证书开启信任开关】

20210128173906607.jpg

20210128173919235.jpg


注意: 如果还是显示乱码,则是SSL代理没有设置,具体操作前面已经提到。


7、重复请求设置


7.1、单词重复请求(Repeat)

1、选中接口,点击工具栏的【repeat selected request 】图标

20210128111256325.png

2、选中接口,鼠标右击,选择“Repeat”选项

20210128111344571.png


7.2、连续多次请求(Repeat Advanced):压力测试

如果是要同一个接口同时调用多次,则选择【Repeat Advanced】,输入运行次数


20210128111419345.png


8、过滤指定域名

当使用目录结构|序列查看的时候,请求多了有些时候会看不过来,Charles 提供了一个简单的 Filter 功能,可以输入关键字来快速筛选出 URL 中带指定关键字的网络请求。


对于需要抓取的某个请求,通常情况下,我们需要对网络请求进行过滤,只监控向指定目录服务器上发送的请求。对于这种需求,以下几种办法:


8.1、直接过滤域名

在主界面的中部的 Filter 栏中填入需要过滤出来的关键字。

例如下图的域名:【https://alpha-api.szy.com】 , 那么只需要在 Filter 栏中填入 【alpha-api.szy.com】或【alpha-api】,即可以过滤含有这些关键字信息的请求(只要host和path中含有即可)。

20210128114122708.png


8.2、过滤焦点域名(Focused Hosts)

你设置的焦点域名在【View -> Focused Hosts】里面可以查看和管理

2021012813521073.png

该结构视图模式下的展现更加人性化;

当你设置某个域名为焦点域名的时候,会把当前域名单独显示在上面,

而其它的非焦点域名,都会在other Hosts里显示;


8.3、修改Include的域名和端口( Recording Settings)

在 Charles 的菜单栏选择 【Proxy -> Recording Settings】,然后选择 Include 栏,选择添加一个项目,然后填入需要监控的协议,主机地址,端口号。这样就可以只截取目标网站的封包了。

20210128114530766.png

通常情况下,我们使用方法一做封包过滤,方法二做一些唯一的域名抓包,正常情况下,不推荐这种设置方法;

因为这种方法,你的charles只能抓你配置的域名;

此法太过粗暴了,哪天设置了,没有还原回来,下次再次使用,很容易遗忘之前的操作的。

总结:此功法太过霸道,不推荐修炼。


9、断点(Breakpoints)

断点的功能搞开发不会不知道,在Charles发起一个请求的时候,我们是可以给某个请求打一个断点的,然后来观察或者修改请求或者返回的内容,但是在这过程中药注意请求的超时时间问题。要针对某一个请求设置断点,只需要在这个请求网址右击选择Breakpoints就可以断点某一个请求了。


20210128180051233.png

20210128180446565.png

10、网速设置(Throttle Setting)

有时候在开发的时候我们想要模拟一下网络慢的情况,这时候Charles他是可以帮助到你的,在【Proxy->Throttle Setting】,然后选择【Enable Throttling】,在Throttle Preset下选择网络类型即可,具体设置你可以自行拿捏。

20210128200706790.png


11、请求重定向(Map Remote)

请求重定向的作用是什么呢?开发中一般都是测试环境,如果我们想对比一下和线上版本的区别的话,可以讲测试的请求重定向到正式环境下。在选择 【Tools->Map Remote】下:

20210128200836266.png


12、内容替换(Rewrite)

有时候我们会测一下请求的参数不同会带来不同的返回结果以测试是否达到业务需求,或者需要不同的返回结果来验证我们对数据的处理是否正确,这时候需要后台的同事配合,但是有了Charles,我们可以自己把控接口返回来的内容,比如数据的空与否,数据的长短等等。在【Tools->Rewrite Settings】下:

20210128200938327.png


Charles其他的功能,有发现继续更新。


参考:

1、官方文档


相关文章
|
5月前
|
网络协议 数据挖掘 Linux
【最详细】Wireshark使用教程(二)
【最详细】Wireshark使用教程(二)
|
5月前
|
网络协议 网络安全 数据安全/隐私保护
【最详细】Wireshark使用教程(一)
【最详细】Wireshark使用教程(一)
|
6月前
|
网络协议 API Android开发
手把手教你使用Charles+drony进行抓包
手把手教你使用Charles+drony进行抓包
196 1
|
6月前
|
网络协议 Windows
Wireshark的下载安装及简单使用教程
Wireshark的下载安装及简单使用教程
159 0
|
Web App开发 网络安全 Android开发
【超详细!】charles的安装与使用
【超详细!】charles的安装与使用
|
机器学习/深度学习 决策智能 Windows
CTex完整、详细、亲测安装教程,初步使用教程
CTex完整、详细、亲测安装教程,初步使用教程
1110 0
|
XML JSON 监控
手把手教你Charles抓包工具使用(一)
手把手教你Charles抓包工具使用
338 0
手把手教你Charles抓包工具使用(一)
|
监控 测试技术 网络安全
手把手教你Charles抓包工具使用(三)
手把手教你Charles抓包工具使用
489 0
手把手教你Charles抓包工具使用(三)
|
存储 Android开发 iOS开发
手把手教你Charles抓包工具使用(二)
手把手教你Charles抓包工具使用
293 0
 手把手教你Charles抓包工具使用(二)
|
缓存 前端开发 JavaScript
入门兵器谱,测试相关软件系列——Fiddler抓包工具使用教程
Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据(指cookie,html,js,css等文件)。Fiddler 要比其他的网络调试器要更加简单,因为它不仅仅暴露http通讯还提供了一个用户友好的格式。
279 0
入门兵器谱,测试相关软件系列——Fiddler抓包工具使用教程