Web调试代理工具Charles的使用

简介

Charles ( ) 是一款集抓包、断点、映射、代理、请求管理、带宽限流等功能于一身的强大工具,界面简单直观、容易上手。

Charles是使用Java开发的,支持Windows x86/x64、Mac OS X、Linux等多种平台。笔者以Mac为例,介绍Charles的使用。

安装

Charles是一款付费软件,可以根据你的操作系统类型从官网 ( download/ )下载安装。

如果你要抓取https的数据包,就要额外安装ssl证书。进入Help菜单,选择 SSL Proxying -> Install Charles Root Certificates,根据提示安装Charles Proxy Custom Root Certificate证书,并设置此证书为“始终信任”。

如果你是Mac,请务必保持Proxy菜单下的Mac OS X Proxy为开启状态。

如果你是Firefox浏览器,请务必保持Proxy菜单下的Mozilla Firefox Proxy为开启状态 ,并按照提示安装The Charles Autoconfiguration Add-on For Firefox插件,并进行相应配置。

功能概览

下面就是charles的界面,非常清爽。

常用的功能基本都在这儿了,非常方便,非常干净。

抓包

标题栏下面的主界面就展示的是会话开始时所记录的全部的网络请求。如下图

需要说明的是,如果你要 抓取https数据包 ,请务必右键选择该链接,选中Enable SSL Proxying并重新发送请求。

如果你不想使用缓存的话,可以打开Tools->No Caching。

两种视图

Charles展示网络请求有两种视图。一种是Structure, 一种是Sequence。前者按网络请求访问的域名分左右结构排列,左边是请求列表,右边是选中的请求信息;后者是按按访问的时间上下结构排序的,上面与Chrome开发者工具的Network比较相似,下面就是选中的请求信息了。本文最开始的两张截图就是这两种视图了。

六个方面

Charles把每一个网络请求,都分成了六块来展示:

概览Overview

这里展示了请求的URL、服务端IP、状态、大小、时间等概要信息。

请求Request

这里展示了此次网络请求的Headers,参数,Cookies和未处理的请求信息。

响应Response

这里展示了响应的Headers,Cookies设置信息和以Text、Hex、JavaScript、JSON、JSON Text几种格式处理过的响应Body和没有处理过的响应Body。

Summary

以表格形式展示的请求信息

Chart

以图表形式展示请求。这个与Chrome开发者工具的Timeline比较相似。

Notes

映射

Charles的映射,主要分为两种,将网络请求重定向到另一请求地址的Map Remote和将指定的网络请求重定向到本地文件的Map Local。

Map Remote

我们从Tools菜单下选择Map Remote,弹出如下的对话框。可以很清楚的看到,对话框里展示了远程映射的URL的列表和操作按钮。

选择Add或者双击某一条记录,可以打开映射关系编辑的窗口。在这里面我们可以修改映射源地址和目标地址的协议(http、https或者留空)、主机(可以是域名也可以是URL)、路径或者查询字符串。

一般情况下,你需要选中Perserve Host Header,以保证你在发送发送请求的时候,Headers能够保持不变。此外,如果你需要将某一个链接全部映射到另一个链接,那么映射源需要使用通配符*,目标地址留空即可。

Map Local

Map Local与Map Remote是很相似的。只不过目标地址不是一个URL,是一个文件了。Case-sensitive选项是确定是否大小写敏感的。Map Local也支持通配符。

带宽限流

带宽限流主要是让我们可以模拟不同的网络带宽来发送请求。比如,我们可以让一个请求以2G网络的速度来请求,也可以让他以4G的网络速度来请求。当然,你的带宽至少要比你模拟的最大带宽要“宽”才行。

设置网络节流也非常简单。打开Proxy->Throttle Settings,选中Enable Throttling,如果你仅仅是想对某些指定的URL限流,请选中Only for selected hosts来配置。

在下面的Throttle Configuration中,我们可以进行配置带宽、延迟、最大可用单元、稳定率等信息。

断点

断点这个功能估计大家已经很熟悉了。请求断点与我们平常在开发者工具在打断点是一样的。在工具栏上,点一下那个大红点,开启断点功能。然后右键选择你要打断点的链接,选中Breakpoints。好了,再选一下Repeat看看,是不是启动了断点了?

除了打断点,我们还可以编辑这个请求,修改请求参数呢。

请求

新增

在工具栏上选择组合新请求这个按钮,就会弹出一个如下的新建请求对话框。在此你可以配置新连接的URL、Method、Content Type的信息。

填写完成后,将自动跳转到下面的编辑页面。

编辑

选择新建请求或者编辑请求信息后,则会弹出一个新窗口。你可以在这里修改请求参数、Headers、Method等信息。

重发

右键一个请求,选择Repeat后,,可以保持原来的请求参数等信息,重新请求;你也可以选择Repeat Advanced...,在弹出的窗口中,配置请求间隔、延迟、次数等信息。

代理

代理这个功能是我们平时调试其他设备时经常使用的。我们这里以移动端为例,来看一看如何把PC上的Charles作为代理服务器转发请求。

首先呢,我们需要设置代理服务的选项。进入Proxy->Proxy Settings,在弹出的对话框中,我们可以看到很多常用的设置了。比如HTTP Proxy、SOCKS Proxy等等。如果是Mac则需要在Mac OS X页签中,开启Enable Mac OS X proxy和Use HTTP proxy。

接着,我们需要设置手机代理。我们在服务器中输入PC的IP地址,在端口处输入我们刚才设置的端口号。一般不需要鉴定,使其保持关闭状态。

当我们设置好手机代理,Charles就会提示我们允许从手机端发过来的连接请求。当然选择Allow喽。

现在,用手机访问网页看看,是不是所有的请求都已经在Charles中可以看到了呢?不过,细心的你可能已经发现了,设置完了,但是竟然看不到https请求信息!别急,那是因为你没有安装ssl证书啊。在手机上先打开 getssl 。选择安装,输入解锁密码,一气呵成!现在再试试,是不是很神奇?

本文到这里就要结束了,如果你有任何意见或者建议或者想与我成为同事带我飞的,请发邮件给我 [email protected]

长按二维码,关注猿猿相抱