移动应用抓包调试利器Charles

一、Charles是什么?

image.png

二、为什么是Charles?

为什么要用抓包工具?大家在平常移动App调试测试中是如何进行抓包的?

在我们做开发与测试的过程中,总免不了碰到网络问题,特别是重后台的产品,这个时候我们往往的处理方法是抓个网络包,看看到底应用发送和接收了些什么鬼.....这个时候Charles上场了;Charles是一款屌的不行的截包工具,好用到没朋友。

那么Charles屌在哪里呢???主要特点如下:

1.支持SSL代理,可以截取分析SSL的请求

2.支持流量控制。可以模拟慢速网络(2G,3G),以及等待时间较长的请求。

3.支持AJAX调试。可以自动把JSON或者XML数据格式化,方便查看。

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

5.支持修改网络请求参数。

6.支持网络请求的截取和动态修改。

7.最重要的一个优点就是有不同平台的版本(Mac,Windows、Linux)即学一个打遍天下。

三、Charles基本工作原理

charles是通过网络代理来进行抓包的,下面先了解一下http代理的原理:

1.普通http请求过程

image.png

2.加入了Charles的HTTP代理的请求与响应过程

image.png

四、Charles的下载与安装过程

1.官网下载地址:

http://www.charlesproxy.com/download/

2.Mac下安装:

是一个安装包是一个dmg后缀的文件。打开后将Charles拖到Application目录下即完成安装。

3.Windows下安装:

下载后直接双击根据安装向导一步一步安装即可

五、Http抓包操作步骤

Step 1:开启Charleshttp代理;

Step 2:手机端Wifi添加代理;

Step 3:开启Charles录制功能;

Step 4:启动应用开始抓包;

Step 5:分析抓取的数据包。

Step 1: 开启Charleshttp代理

a.设置Charles代理

image.png

a.激活http代理功能

image.png

Step 2: 手机端Wifi添加代理

a. Android手机:

1.在手机端打开你的Wifi设置然后长按已经连接的Wifi在弹出来的菜单中选择【修改网络】

2.沟上[显示高级]选项--【手动】

3.输入代理服务器的IP与端口,IP即安装了Charles的电脑IP地址,端口就是前面一步设置Charles时所设置的端口。

image.png

b. iOS手机:

1.点击你所连接的wifi

2.输入代理服务器的IP与端口,

IP即安装了Charles的电脑IP地址,端口就是前面一步设置Charles时所设置的端口。

image.png

Step 3:开启Charles录制功能

image.png

Step 4:启动应用开始抓包

image.png

Step 5:分析抓取的数据包

image.png

1.Charles 主要提供两种查看封包的视图,分别名为 “Structure”和 “Sequence”:

a.Structure 视图将网络请求按访问的域名分类;

b.Sequence 视图将网络请求按访问的时间排序。

2.大家可以根据具体的需要在这两种视图之前来回切换。请求多了有些时候会看不过来,Charles提供了一个简单的Filter功能,可以输入关键字来快速筛选出URL 中带指定关键字的网络请求。

3.对于某一个具体的网络请求,你可以查看其详细的请求内容和响应内容。如果请求内容是POST 的表单,Charles 会自动帮你将表单进行分项显示。如果响应内容是 JSON 格式的,那么 Charles可以自动帮你将JSON 内容格式化,方便你查看。如果响应内容是图片,那么 Charles可以显示出图片的预览。

六、Https抓包操作步骤

Step 1:了解一下https的基本原理;

Step 2:在手机端安装SSL证书;

Step 3:激活Charles的SSL代理;

Step 4:将指定的URL请求开启SSL代理功能

Step 5:其他步骤与Http抓包相同,请参考四、Http抓包操作步骤

Step 1:了解一下https的基本原理;

image.png

详细说明,请参考:
http://blog.csdn.net/clh604/article/details/22179907

Step 2:在手机端安装SSL证书

1.将证书文件从Charles导出

2.然后通过adb或者其他工具将其复制到手机的SD卡中。

image.png

3.将证书文件导入Android手机

image.png

4.在iOS手机端进行证书配置,在手机浏览器中输入CA证书下载链接地址打开。

CA证书下载链接:https://www.charlesproxy.com/documentation/additional/legacy-ssl-proxying/

image.png

image.png

证书下载完成后,会自己提示安装,和企业级开发者证书一样,比较容易搞定。这样就可以抓取https的数据接口包了。

Step 3:激活Charles的SSL代理

image.png

Step 4:将指定的URL请求开启SSL代理功能

image.png
image.png

七、Charles进阶---修改请求也响应的内容

Step 1:设置Charless断点。

Step 2:对指定的URL开启断点功能。

Step 3:编辑请求与响应的内容。

Step 1:设置Charless断点

image.png

Step 2:对指定的URL开启断点功能。

image.png

Step 3:编辑请求与响应的内容。

a.编辑请求内容

image.png

b.编辑服务器响应的内容

image.png

八、Charles进阶---弱网模拟

1.菜单中选择【Proxy】--->【Throttle Settings..】---> 激活【Enable Throttling】。

2.在Throttle Configuration设置弱网的参数。

3.以下是各种网制式的速率参考文档:

移动网络制式与网速的参考文档

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、Charles是什么? 二、为什么是Charles? 为什么要用抓包工具?大家在平常移动App调试测试中是如何...
    luckydaxian阅读 84,625评论 19 190
  • 目录 准备 分析2.1. 三次握手2.2. 创建 HTTP 代理(非必要)2.3. TLS/SSL 握手2.4. ...
    RunAlgorithm阅读 39,072评论 12 117
  • 泛黄纸页上的文字,诉说着我们的故事 一转眼,已经在时间的另一头。 —...
    沐风听雨眠阅读 674评论 3 2
  • 那天,我猛地睁开眼,发现自己躺在一个陌生的地方,周围全是被砍伐后,遗留的树桩,我感觉什么在指引着我,便站起来,缓缓...
    孝影杨阅读 496评论 0 0
  • 表扬儿子有问题和我心平气和的商量。今天孩子和我聊了关于压岁钱和零花钱的合理支配使用方法。孩子有自己的想法,想自己管...
    THY桃花颜阅读 261评论 2 3

友情链接更多精彩内容