20190707 - FE：使用 Charles 在 IphoneX 上抓包

目录

• • 1. 为什么要用 Charles 抓包？
  • • 1.1 使用 Charles 前
    • 1.2 使用 Charles 后
    • 1.3 那么Charles 的作用是？
  • 2. 如何使用 Charles？
  • • 2.1 操作环境
    • 2.2 流程
    • 2.3 功能简介
  • 3. 那些年我踩过的 Charles 坑

1. 为什么要用 Charles 抓包？

在工作场景中，我们需要确定一个网页在某个事件下发出的请求及其回应，可以使用chrome轻易实现。但是，当我们要确定一个 APP 发出的请求及其回应的内容时，但往往不能通过浏览器的功能获得。因此，可以使用Charles，采用http 代理的方法，获得APP的请求及其回应。本文以 IphoneX 为例，说明使用 Charles 抓包的一般方法；如有问题，欢迎支指出~☺️

1.1 使用 Charles 前

1.2 使用 Charles 后

1.3 那么Charles 的作用是？

1. Charles 本质：http 代理服务器（如果只需要抓 https ，还需其它操作，本文暂不涉及。）
2. Charles 意义：用以查看手机端发出的 http 请求
3. Charles 作用：相当于演唱会入口验票处，每一个要看演唱会的人（http请求）都需要在演唱会入口验票处拿出门票验票（被 Charles 捕获）。

2. 如何使用 Charles？

2.1 操作环境

1. IphoneX 手机
2. MAC 笔记本
3. MAC 版 Charles 4.0.1

2.2 流程

1. 查看MAC本机地址：Help -> local IP Address

   ( 这个就是要在手机上填写HTTP代理的 服务器名称 )

2. 代理设置：Proxy -> Proxy Settings -> 查看端口（默认8888）

   ( 这个就是要在手机上填写HTTP代理的 端口号 )

3. 确保手机和电脑在同一个局域网下，在手机网络的HTTP代理上设置步骤1和步骤2中的的服务器名称和端口号
4. 手机正确设置后，会在电脑端自动弹出确认连接的弹框，如下图：

   

   点击Allow，即可使得 Charles 完成代理。

2.3 功能简介

1. 视图：

1. 工具
2. 分析请求

3. 那些年我踩过的 Charles 坑

1. 使用 Charles 成功代理之后，可以看到请求，但是请求里面有乱码？

   答：那说明有信息加密。问问你的老板，怎样解密或者进入开发者模式。