Charles使用心得总结

1、下载/安装/配置

1.1下载并安装Charles.

mac版和window版都有,下载能够去Charles官网(http://www.charlesproxy.com/download/),下载下来的是试用版(截止2013.08.25最新版本是3.7),虽然只是试用版有必定限制,好比开机delay10s,每隔5分钟提示你转为试用版,30分钟后强行关闭,但鉴于他强大的功能,30分钟其实已经足够.目前3.6在百度上有破解版,自行百度之.

1.2 配置Charles

1)打开charles后,在proxy标签项关闭自身代理,此选项开启会抓取电脑的网络请求，影响咱们测试。实际上咱们在测试手机app并不须要，故关闭。以下:

 ​

2)设置pc端代理。以下图选择proxy setting.以下图所示:

 ​

Proxies一项设置以下,默认端口为8888，用于手机连上代理的端口.

 ​

接下来SSL一项以下设置:

 ​

即容许ssl代理，下方的*.*是要经过add按钮添加进去的。在按”add”按钮以后两个输入框均输入”*”,”*”便可.

3) 设置容许代理的ip地址范围。打开proxy->access control setting,以下：

 ​

将你容许的ip地址段填写进去。以下图：

 ​

肯定本身要填的ip地址段，

简单的方式：点击菜单栏，选择help---》右击，选择Local IP Address,便可查看到本机的IP

笨办法：window使用cmd命令行 输入ipconfig回车 便可看到本身目前所在的ip，如192.168.0.108（首先这个ip地址最好是无线路由分配的），便可以设置为192.168.0.0/24.如此设置以后192.168.0.0~192.168.0.255的地址都可以访问你的电脑，经过你的电脑进行代理上网。以下图：

​

1.3设置手机端的相关参数

前提注意事项：

ios 抓包https网页（如未配置，会显示unknown），那么如何处理此问题呢？

step1：给手机安装SSL证书

• 手机和电脑在同一wifi下，手机wifi配置http代理，ip是电脑ip，端口通常默认8888
• 安装SSL证书到手机，Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device
• 在手机上输入弹窗提示网址后，下载安装证书

ios 10以上，须要到通用-关于手机-证书信任证书

step2：charles SSL Proxying 增长你想要抓的网址

• charles，Proxy -> SSL Proxying Settings
• 点击add： host（写你要抓的网址url）；端口443

两步作完以后手机再次发起请求，charles已经能看到https网页的接口数据了

 

iOS：点击连接wifi后方的“i”进入详情页，拉倒最下方“http代理”处，点击“手动”并填写IP和端口号

 

 ​            ​

Android：在wifi界面，长按所链接wifi弹出菜单中选择“代理设置”后填写IP和端口保存。

   ​     ​

Android手机Charles证书如何处理？

• Help -> SSL Proxying -> Save Charles Root Certificate...，将这个保存到桌面（只要记住在哪里便可），选择哪一个格式的均可以，命名为1.cer

• 将1.cer文件发送到Android手机上

• 再次进入手机设置，点击“安全和隐私----更多安全设置->从存储设备安装->Download->.crt文件->肯定”，在弹出窗，对证书命名为：Charles，点击肯定（首次安装证书会让输入锁屏密码）。至此证书安装成功！当即在电脑端对手机网络进行抓包吧！
• 上述步骤不一样厂商的手机仍是稍微有些区别的
• 在Android手机上找到1.cer文件，打开手机的密码，而后从新命名1.cer文件便可。

而后关闭pc端的防火墙，测试是否链接电脑成功。（此步骤很重要）

测试方法：点击随便一个应用,看charles的Structure栏中有没有出现一些文件夹，相似下图，若是有则成功；

 ​

1.4如何安装破解版

先安装里面的原版，而后copy charles.jar覆盖到安装目录下的lib目录便可

2、charles经常使用的一些功能介绍

2.1 忽略请求功能

因为某些时候咱们只须要关注某一个应用的请求,因此过滤掉其余不须要显示的请求可让咱们集中精力在该应用.点击某行右键选择ignore（以下图），能够将此连接忽视，将干扰的网络请求屏蔽，防止影响咱们测试：

​

 

2.2 复制原连接

此功能能够复制请求的原连接，只要你使用Chrome浏览器安装了son viewer的插件，黏贴上去回车便可看到返回的数据结构。同时也方便于发给服务器的开发人员调试用。以下:

 ​

2.3 清空捕获的网络请求

正常状态下在structure栏里按ctrl+a,而后按delete键，就能够清除全部捕获的网络请求，

2.4查看请求的相关数据

以下图，overview能够方便的看出请求的时间长短，请求的大小和返回数据的大小，即数据请求的大概状况；

Request用于查看请求的参数是否携带正确。以下图:

 ​

而response能够查看返回的数据结构是否是咱们想要的，以下图，能够明确的看到拿到的封面数据是否正确。

 ​

注：使用代理没法访问一些安全验证网站如新浪微博绑定页面，目前android版使用代理直接访问在某些机器上会直接闪退关掉该页面，故须要绑定时请关闭代理以后再链接上代理验证。

2.5分区介绍

Client 头域

Accept	浏览器端能够接受的媒体类型
Accept-Encoding	浏览器申明本身接收的编码方法，一般指定压缩方法，是否支持压缩，支持什么压缩方法（gzip，deflate）
Accept-Language	浏览器申明本身接收的语言
User-Agent	告诉HTTP服务器， 客户端使用的操做系统和浏览器的名称和版本.

 

Transport 头域

Connection	Connection: keep-alive 当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP链接不会关闭，若是客户端再次访问这个服务器上的网页，会继续使用这一条已经创建的链接 Connection: close 表明一个Request完成后，客户端和服务器之间用于传输HTTP数据的TCP链接会关闭， 当客户端再次发送Request，须要从新创建TCP链接。
Host	主要用于指定被请求资源的Internet主机和端口号，它一般从HTTP URL中提取出来的

 

Entity头域

Content-Length	发送给HTTP服务器数据的长度。
Content-Type

 

Miscellaneous 头域

Referer

提供了Request的上下文信息的服务器，告诉服务器我是从哪一个连接过来的，好比从我主页上连接到一个朋友那里，他的服务器就可以从HTTP Referer中统计出天天有多少用户点击我主页上的连接访问他的网站。

 

Cookie/Login 头域

Cookie

最重要的header, 将cookie的值发送给HTTP 服务器

 

Cache 头域

If-Modified-Since	把浏览器端缓存页面的最后修改时间发送到服务器去，服务器会把这个时间与服务器上实际文件的最后修改时间进行对比。若是时间一致，那么返回304，客户端就直接使用本地缓存文件。若是时间不一致，就会返回200和新的文件内容。客户端接到以后，会丢弃旧文件，把新文件缓存起来，并显示在浏览器中。
If-None-Match	If-None-Match和ETag一块儿工做，工做原理是在HTTP Response中添加ETag信息。 当用户再次请求该资源时，将在HTTP Request 中加入If-None-Match信息(ETag的值)。若是服务器验证资源的ETag没有改变（该资源没有更新），将返回一个304状态告诉客户端使用本地缓存文件。不然将返回200状态和新的资源和Etag. 使用这样的机制将提升网站的性能
Pragma	防止页面被缓存
Cache-Control	这个用来指定Response-Request遵循的缓存机制。各个指令含义以下: Cache-Control:Public 能够被任何缓存所缓存（） Cache-Control:Private 内容只缓存到私有缓存中 Cache-Control:no-cache 全部内容都不会被缓存

 

3、关键词解释

3.1 session

Charles有个会话（session，不是指http中的session）的概念，能够理解为浏览器中的tab，这个功能在须要调试多个站点页面时很实用，当你刷新页面的时候，只会在当前session中捕获请求。（PS：ctrl+N建立个新的session，ctrl+W关闭当前session）

3.2 Structure/Sequence

Structure是树状结构显示，Sequence是水平结构显示

垃圾桶图标 ： 功能是clear，清理掉全部请求显示信息

Filter ： 过滤

3.3 Overview 

overview查看此次请求的详细内容，例如耗时详细列举了请求开始时间、结束时间，响应开始时间、结束时间，总耗时、DNS耗时、网络延时等。
Size：也详细列出了请求头大小、响应头大小、压缩比例等内容。
URL：进行网络请求的连接；

Status：当前状态，complete表示请求完成；

Responce Code：返回码。不一样的接口，不一样的请求结果，返回码都不一样；

Protocol：使用的协议；

Method：请求方式，如GET请求，POST请求等；

Kept Alive：判断当前是否正在连接（活跃）；

Content-Type：发送的内容类型，如这里用的是XML文本，以UTF8的方式发送；

Client Address：客户端的IP地址；

Remote Address：远程服务器的IP；

 

3.4 Timing

Request Start Time：请求开始的时间； 

Request End Time：请求结束的时间； 

Response Start Time：返回开始的时间； 

Response End Time : 返回结束的时间； 

Duration : 总时间； 

 

3.5 Size

Request Header ：请求的头部大小； 

Request Header：返回的头部大小； 

Request : 请求发送的大小； 

Response：返回数据的大小； 

Total：全部数据大小； 

Request Compression : 请求压缩； 

Response Compression : 返回压缩； 

 

3.6 Request/Response

request查看请求内容（底下的Headers，Query String，Cookies，Raw。）

Headers：发送请求的头部信息；

Query String : 发送参数列表；

Cookies： 浏览器缓存；

Raw：发送的原生数据，包括了头部和参数；

Reponse : 查看响应内容

Headers：是返回的头部信息；

Text：返回信息（除去头部）后的文本；

Hex：返回信息的16进制表示；

XML：我返回的数据是XML。

若是你返回的是JSON，这里就会显示JSON；

XML Text：若是你返回JSON，这里会显示JSON Text；

Raw：返回的全部原生数据，包括头部；

3.7 Summary

 查看发送数据的一些简要信息（主机，状态码，数据的类型，header和body大下，加载时间，总时间）

3.8 Chart

 Summary中简要信息以图表形式展现

3.9 Notes

其余信息

 

4、界面功能初探

 ​

工具条包含了Charles的大部分功能：

 ​

有几个功能比较抽象，后面会详细说明。

右键请求出现菜单，Charles的右键菜单功能比fiddler强大太多了。

 ​

双击请求进入列表视图，相似fiddler，方便查看和过滤请求。

Charles的过滤查找功能很是赞，很快速：

 ​

请求详情跟fiddler类似，但直观很多：

​

 

5、网速模拟功能

throttle功能对于前端来讲很是实用，能够看页面在低网速下的表现，从而找出优化的点。

在线上环境一般有些由于网速慢致使的bug，在本机没法重现，那时候就很抓瞎，若是嫌远程麻烦，推荐使用throttle。

首先先配置下throttle。

 ​

咱们要看页面在3G环境下的表现：

 ​

（Charles的预配置对于中国的网络环境并不许确，电信、移动、网通的速度还有有明显差别。）

解析下图上几个配置的含义：

Bandwidth（带宽）、Utilistation（利用百分比）、Round-trip（往返延迟）、MTU（字节）（MTU的说明请看百度百科）。

 

6、断点功能

Charles另外一个很是实用的功能，对于开发者和测试人员来讲，堪称神器。Charles可以断到发送请求前（篡改Request）和请求后（篡改Response）。

场景：ajax发送请求，咱们须要测试接口的各类边界状况，好比出错、超时等表现，Charles的断点+随意篡改，很是方便测试。

 ​

upload.php是咱们要测试的上传接口，右键选择“BreakPoints”，开启断点。

小技巧：不用在web界面中操做，使用repeat功能，就可再次发送同样的请求：

 ​

断点列表查看

 

 ​   ​

能够指定断点“get”请求仍是“post”请求。

7、重复发送请求 

repeat功能对于测试同窗特别有用，能够检验接口的健壮性。

repeat功对于前端的价值是不须要刷新页面，只须要repeat请求，好比检验代理是否成功，修改请求后执行等。

 ​

“repeat”重复发送一次请求。

“repeat Advances”能够自定义重复次数和重复间隔。

 ​

 

8、捕获记录控制 

捕获的请求太多，容易产生干扰，Charles能够对捕获记录进行过滤。

 ​

而后配置“exclude”：

 ​

9、web界面 

Charles有个有趣的web界面：

 ​

 

10、Charles目前尚有问题的地方

1.一样设置在一些机器能够捕获到Google Analytics的请求,但有些不行,暂时还找不到缘由.

2.暂时没法捕捉到微信等请求,可能由于使用的协议不一样因此没法捕获,这也是其局限性之一.

3.在一些机器开启charles捕获连接时使用新浪微博登陆时会出现崩溃现象,缘由也暂时不明.

 

也能够看看此人的博客，超好的哦~

https://blog.csdn.net/s0228g0228/article/details/52778895