抓包神器！
这篇是抓包工具 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®ion=cn×tamp=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 应用的一篇教程，前端和后端的工程师肯定会用到这个工具，大家可以转发。