逛逛 GitHub 除了推荐一些优质、有趣的 GitHub 项目，也会发一些好玩有用的软件，比如历史发布的：

• 微软给 Win10 量身打造的效率神器

• 推荐这一款提供效率的软件 Wox

• Windows 上的神兵利器 - 开发篇

• Windows 上的神兵利器 - 软件篇

这篇是抓包工具 Charles 应用的一篇教程，前端和后端的工程师肯定会用到这个工具，建议转发、收藏这个文章。

Charles 是在 PC 端常用的网络封包截取工具，在做开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。除了调试端口外，Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能，Charles 还可以分析 Https 协议。

Charles 通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而实现了网络封包的截取和分析，也就是抓包啦。

Charles 主要的功能包括：

• 截取 Http 和 Https 网络封包。

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

• 支持修改网络请求参数。

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

• 支持模拟慢速网络。

同类型的工具还有 大名鼎鼎的 Fidder：telerik.com/fiddler

1.使用背景

在与公司 App 端 同事调试接口时，有的时候可能会出现一些非常莫名其妙的问题。有的时候可能难以定位这个问题到底是属于前端展示 Bug ，还是说接口数据异常。

通常这个时候，可能后端就需要去服务端日志然后结合日志数据进行排查。但是限于工具 网络等等复杂的情况，这样的方式其实真的蛮低效的。

这个时候就需要这样的一个工具，可以实时的看运行 App 的接口返回情况。结合前端 视图 展示，能在很短的时间内找到问题出现的原因。这样就可以快速的修复问题了。

2. 下载

官网下载地址：

www.charlesproxy.com/download/

Charles 是收费软件，可以免费试用 30 天。试用期过后，未付费的用户仍然可以继续使用，但是每次使用时间不能超过 30 分钟，并且启动时将会有 10 秒种的延时。因此，该付费方案对广大用户还是相当友好的，即使你长期不付费，也能使用完整的软件功能。

但是，我选择破解  ，我用 Charles 是来提升排查问题的时间的。结果你给我搞这些东西 我就受不了了。主要还是破解比较容易。哈哈哈哈

破解方式可以关注微信公众号 逛逛GitHub，回复 1208 获取。选择当前自己的版本下载一个 Jar 包就可以了。

3. Charles 配置

当 Charles 安装好之后，这个时候就可以抓取 Http 的包了，但是我们为 App 提供的接口 一般都是 Https 的。所以我们需要安装证书。

安装证书

Help -> SSL Proxying ->Install Charles Root Certificate

证书安装好之后，还需要信任一下。就可以了

Https 抓取配置

iPhone 抓包配置

这里为什么是 iPhone 抓包配置，主要是因为 Android 抓包配置太麻烦了。然后 iPhone 就只需要简单的安装证书就可以了。

如上图，点击 Install Charles Root Certificate on a Mobile Device Or Remote Browser

点击之后的提示框中 192.168.1.106:8888 为手机将要设置网络代理的地址。chls.pro/ssl 为手机下载证书地址。

确认手机和电脑在同一个网络下，访问 chls.pro/ssl 下载并安装证书。而后信任证书。

安装证书

信任证书

设置 - 通用 - 关于本机 - 证书信任设置 - 勾选安装的证书

手机配置代理

在将 WIFI 的代理配置成 192.168.1.106. 这样就可以顺利抓取到 手机的 Https 的包了。

完成 上诉设置后，iPhone 就可以抓包了。

4. Chrome 抓包配置

Chrome 抓包配置和手机差不多，也是需要安装插件，然后配置代理。

配置代理，在 设置 - 高级 - 代理配置中。配置为 Charles 代理。接下来介绍主要功能：

Repeat

将已执行过的请求重复执行。

应用场景，服务器压力测试。

Compose

临时修改一些请求的参数，点击 Execute 就可以已修改后的请求发送。

Rewrite

Rewrite 功能功能适合对某一类网络请求进行一些正则替换，以达到修改结果的目的

Map Remote Config

地址从定向，将访问 A 服务器的请求代理到访问 B 服务器。

Map Local Config

将指定请求的 响应 替换为 本地文件

5. 实战一

接下来对蔚来 理想的 App，对其消息系统进行抓包分析。得到比较适合我们自己的消息系统设计。

理想 ONE

理想的消息系统设计师一种集中式的设计，将所有的消息集中管理，评论、赞、通知、私信、车辆。

在消息中心拉去通知类消息

对接口进行抓包如下。

https://api-app.lixiang.com/mms-api/v1-0/message?status=3&pageNumber=0&appId=chj_app_m01&channelType=1&pageSize=20&category=notice

接口设计上 通过 category 来区分是哪个渠道上的消息，现在我们请求的是通知 类型的消息，所以 category 为 notice。

接口的响应参数如下

{"success": true,"code": 0,"msg": "SUCCESS","data": {"pageSize": 20,"pageNumber": 0,"numberOfElements": 1,"totalPages": 1,"totalElements": 1,"elements": [{"requestId": "rC21P1A80H2DJJQIGR00","messageId": "C21P1A80H2DJJQIGR0000000","appId": "chj_app_m01","recipient": "3250332467430584322","sender": null,"title": "理想社区用户公约（试行）","summary": "亲爱的理想用户，为了维护社群的真实，友好的氛围，我们制定了理想的社群规范。","contentId": null,"action": "{\"accountId\":0,\"avatar\":\"\",\"comment\":\"\",\"commentId\":0,\"commentType\":1,\"createTime\":1598072448536,\"level\":1,\"messageType\":\"notice\",\"nickName\":\"\",\"productId\":754,\"surfacePlot\":\"https://p.ampmake.com/lixiangzhizao_app/pc_push_system/787334842102195.jpg\",\"type\":1}","tag": ["[Ljava.lang.String;@474616fd"],"category": "notice","status": 1,"encryption": null,"sendOn": 1598072449000,"receiveOn": 0,"createdOn": 1598072448000,"updatedOn": 1599009229000}]}
}

我们将返回值和界面放在一起对比一下:

对比之后，界面元素的各个字段就比较清晰了。action 对象中，用来控制 查看详情 按钮，具体根据不同的 category 来控制不同的行为，因为现在的通知消息为一篇 文章，所以 点击 查看详情，就是拉去对应文章的信息，action  中 productId 就是指向的文章的主键 Id

点击跳转至 详情页，上方展示了 【详情页页面】 【接口 URL 地址】 【接口详情】。可以看到对应的 productId 就是 754.

消息分类

评论 comment

点赞 favour

通知 notice

车辆 vehicle

蔚来 NIO

蔚来的消息入口是放在 IM 中的一个会话，和理想的设计不太一样，消息点击进入之后 分为 互动 和 通知，对互动消息列表的抓包结果如下。

在抓包时发现，在每次请求消息列表 这个接口的时候，还会附带一个 history_read 的一个接口

/api/1/message/history_read?app_id=10002&app_ver=4.4.0&device_id=2c0d36fa578c45c6819e0567399b8704&lang=zh-cn&region=cn&timestamp=1599026946&sign=4be15ff9fa6e02e2fe5b24bb06c74a03

猜测应该是控制当前用户已经读取过当前时间之前的消息。下次进入系统就不会再提示了。

在对比 通知里面的消息结构。基本的消息结构就比较明确了。

上图是在 蔚来 发表了一条 说说 之后，获取得到了 11 个点赞，28个评论后，第一次登陆时的在主界面 调用 history_info 接口，拉去消息列表。可以看到在 notification 分类下有 1 条未读消息，在 social_events 分类下有 28 条未读消息。

在 data.msg 数组中，每个类型下都有一条消息。结合界面可以发现，这一条消息就是用来在界面最外面展示的。

第一张图是 点赞 消息对应的 消息结构，第二张图是 评论 对应的消息接口。

基本可以确定 蔚来 NIO 的消息结构里面主要包括

• read 是否已读。

• data 内容信息，博客信息和点赞评论信息。

• description 消息描述，这个字段应该是用于 消息推送 的时候的内容。

• title 在 App 消息列表中呈现的标题。

• scenario 场景，当前场景为关注，点赞、收藏，都在这里面。

• like 点赞，comment 收藏

• category 类别，应该用来区分 互动类通知 和 系统类通知。

• msg_id 消息ID，因为这样的操作可能会触发消息推送，所以每条需要添加 唯一 ID。

• ink_value 需要跳转到对应的地址 nio:// 这种形式 应该是 客户端的一种方式。

6. 实战二

社区帖子添加标签是一个很常用的功能，大部分的社区 App 都有实现，诸如 微博，豆瓣，Oppo社区，理想，蔚来。真正在进入此需求之前，最好了解下相关平台的产品。

以上分别是 豆瓣、蔚来、Oppo社区、理想汽车 的 Tag 展示方案。

• Tag 可以支持一个或者多个

开始抓包 分析接口

后面所贴出的 返回结果针对 Topic 部分JSON， 其他部分省略。

豆瓣

豆瓣列表 展示

{"topic_label_bg_color":"#F7F7F7","topic_label_bg_img":"","name":"读书时写的有趣批注","topic_icon_large":"","url":"https://www.douban.com/gallery/topic/164512/","uri":"douban://douban.com/gallery/topic/164512","topic_icon":"","topic_label_hashtag_color":"#5DC66F","topic_label_text_color":"#39A94C","type":"gallery_topic","id":"164512"
}

豆瓣主题详情

{"subscription_count": 1267,"creator": null,"is_subscribed": false,"invite_type": "","screenshot_title": "分享海报","screenshot_url": "douban://partial.douban.com/screenshot/gallery/topic/164512/_content","guests": [],"card_subtitle": "88篇内容・164.1万次浏览","screenshot_type": "rexxar","id": "164512","is_closed": false,"focused_subject": null,"topic_label_bg_color": "#F7F7F7","topic_label_bg_img": "","has_create_button": true,"group": null,"topic_tabs": [],"post_count": 88,"name": "读书时写的有趣批注","label": "","topic_label_hashtag_color": "#5DC66F","ad_monitor_urls": [],"is_ad": false,"unpublic_reason": "","participant_count": 92,"tags": [],"subject_card": null,"cover_url": "","introduction": "今天重翻了我从前看的书，对于自己写的批注感到好笑，虽然很多是无厘头的碎碎念，但也很有趣不是么？让我看看你们写的吧，一起分享这快乐！","content_type": 6,"is_public": true,"topic_label_text_color": "#39A94C","sharing_url": "https://www.douban.com/doubanapp/dispatch?uri=/gallery/topic/164512/","wechat_timeline_share": "url","topic_icon_large": "","click_track_urls": [],"uri": "douban://douban.com/gallery/topic/164512","create_button_text": "","topic_icon": "","mask_color": "","mask_type": ""
}

核心信息：类型、跳转地址、名称、文字背景色、文字颜色、文字背景图片、图标，描述，文章发布数

蔚来

帖子列表

{"name": "EC6提车季","topic_id": "20872"
}

帖子详情

{"topic_id": 20872,"topic_name": "EC6提车季","img_url": "https://cdn-app.nio.com/user/2020/9/24/419faa45-35eb-412b-86c1-d4a3cfd33a36.jpeg","summary": "2020年12月31日前(含)参与话题互动，分享你的提车作业或用车体验，每月抽选10位用户各获得500积分奖励","create_user_id": "660135565","create_type": 1,"sort_id": 77,"ugc_count": 256,"attend_user_count": 12640,"new_hot_tag": 0,"create_time": 1600962984,"update_time": 1600997614,
}

蔚来的 Tag 显示逻辑是，在文章列表页 只是显示比较简单的 Topic 名称和 ID，只是作为展示使用。当进入 Topic 专题页时 拉取当前 Topic 详细信息。

核心信息：名称，图片、描述、文章 UGC 数量，参与人数。

理想

帖子列表 （右）

{"productId": 95830,"name": "有理想的假期","browseNum": 0,"participantsNum": 0,"contentNum": 0,"type": 1,"topicMark": 1
}

帖子详情（左）

{"success": true,"code": 0,"data": {"productId": 95830,"name": "有理想的假期","type": 1,"description": "当国庆节遇上中秋节，就迎来了疫情之后的第一个黄金周长假，在家憋了大半年，这次长假你准备好今年的“报复性”旅行了吗？赶紧来分享你的自驾旅途，晒路线、晒美食、晒装备...关键是还有机会赢SWITCH游戏机！","image": "https://p.ampmake.com/aisp/community/aisp/community/6ece59aa-7604-4f52-bcc3-2577f9a9f678.jpg","imageRes": "1600*900","browseNum": 650,"participantsNum": 164,"contentNum": 273,"router": "https://www.lixiang.com/community/detail/topic/95830.html","createdAt": 1601012653000,"topicMark": 1},"msg": "成功"
}

在进入帖子详情时，会拉取 Tag 详细信息。随后获取当前 Tag 下的帖子。从返回结果 router 字段 可以看出  理想汽车 主题实现是通过 H5 进行实现的。

核心信息： H5，浏览数，发布数，内容，类型，描述，图片，图片大小

Oppo 社区

帖子列表

[{"id": 970,"name": "抬头，看树！"
}]

帖子详情

{"id":941,"name":"我怎么这么好看","weight":1029,"status":1,"related":0,"perm":1,"style":0,"type":"","guide":"发出你的自拍吧！","description":"发出你的自拍吧！","small_img":"https://imgfs.oppo.cn/uploads/topic/2020/07/31/17315884601.jpg","pc_img":"https://imgfs.oppo.cn/uploads/topic/2020/07/31/17320924401.jpg","big_img":"https://imgfs.oppo.cn/uploads/topic/2020/07/31/17320396101.jpg","insert_time":1596187981,"insert_by":15122500992,"compere_ids":"","category_id":1,"category_name":"人像","group_id":"","related_topic":"","reply":"1.2万","follower":64,"thread":"1.3万","read":"33.3万","is_follow":0,"username":[]
}

抓包发现，Oppo 社区 部分接口 采用的是 protobuf 协议。不太好抓。对应 的网页 是 Json 的形式

关键信息： H5，名称，图片，地址，类型，回复量，参与量，读取，状态。

话题选择页

可以看出大致的都差不多可能需要关注的几个点

• 话题有热门非热门的区分

• 话题具备类型

好了，这篇是抓包工具 Charles 应用的一篇教程，前端和后端的工程师肯定会用到这个工具，大家可以转发、点个在看，以后肯定能用到。

投稿作者：胡川港

知乎主页：www.zhihu.com/people/hu-chuan-gang-58

GitHub主页：https://github.com/xiaoxiunique

推荐阅读
0. 逛逛GitHub交流群限时加入
1. 地铁大数据客流分析系统
2. 2020 年 GitHub 年度总结出炉！
3. 程序员找工作黑名单
4. 这个 AI 开源项目要火！