windows10 charles的contents乱码 charles在windows上使用
charles抓包的安装，使用说明以及常见问题解决(windows)
Charles 主要的功能包括：
1 . 截取 Http 和 Https 网络封包。
2 . 支持重发网络请求，方便后端调试。
3 . 支持修改网络请求参数。
4 . 支持网络请求的截获并动态修改。
5 . 支持模拟慢速网络。
一 、安装
- 百度云盘版安装包下载： 链接: https://pan.baidu.com/s/1kV3h0gf 密码: nqaa
- 官网下载：https://www.charlesproxy.com/download/
笔者使用的版本是：
二、使用说明
1 . 在手机上抓包 配置过程：（安装完成，即可在PC机上直接使用，不需要配置！）
1 . 查看本机的IP 地址：
- 方法一： 打开”运行”（快捷键：win+R键；或者在任务栏的”搜索”按钮中查找并点击”运行”），输入“cmd”后进入命令行窗口，在命令行窗口中输入”ipconfig”命令查看IP
- 方法二： 在charles中查看 ：Help -> Local IP Address
2 . 查看端口：
3 . 在手机设备或者远程浏览器上设置代理，抓取手机设备上的请求包（手机和电脑必须在同一个局域网内，并关闭电脑防火墙、其他代理或者软件）
- 第一步：在手机wifi 上设置代理 -> 手动
- 服务器IP：PC机器的IP（通过之前介绍的查看IP的方法）
- 端口号：8888（通过之前介绍的查看端口的方法）
- 第二步：Charles弹出询问“allow”或者“deny”,点击“allow”按钮允许；
- 第三步：抓取https数据需要在手机上安装证书
Help -> SSL proxying -> Install charles root certificate on a Mobile Device or remote browser…
复制弹出层上的地址 http://charlesproxy.com/getssl或http://www.charlesproxy.com/ssl.zip 到手机浏览器打开，点击 here 下载，安装，信任；
截取https信息，pc机上也需要安装Charles的CA证书，还需要设置 SSL 代理
- 菜单栏 Help -> Install Charles CA SSL Certificates…
- 设置SSL代理
- 选择Proxy -> SSL Proxying Settings -> SSL Proxy -> Add
- Host : * (使用通配符表示检测所有网络请求；建议还是设置单个需要抓取的https host，尽量避免使用 * 通配符)
- Port：443
- ！！！完成以上操作，就完成Charles抓取HTTP(S)数据包的所有配置了。查看Charles,我们可以看到数据包的内容了。
2 . 抓包字段的详细说明：
- Structure：树状结构显示，将网络请求按访问的域名分类；
- Sequence：水平结构显示，将网络请求按访问的时间排序
- 垃圾桶图标 ： 功能是clear，清理掉所有请求显示信息
- Filter ： 过滤，可以输入关键字来快速筛选出 URL 中带指定关键字的网络请求
- Overview ： 查看这次请求的详细内容，例如耗时详细列车了请求开始时间、结束时间，响应开始时间、结束时间，总耗时、DNS耗时、网络延时等。
对于Size也详细列出了请求头大小、响应头大小、压缩比例等内容。
- URL：进行网络请求的链接；
- Status：当前状态，complete表示请求完成；
- Responce Code：返回码。不同的接口，不同的请求结果，返回码都不同；
- Protocol：使用的协议；
- Method：请求方式，如GET请求，POST请求等；
- Kept Alive：判断当前是否正在链接（活跃）；
- Content-Type:发送的内容类型，如这里用的是XML文本，以UTF8的方式发送；
- Client Address：客户端的IP地址；
- Remote Address：远程服务器的IP；
- Timing:
- Request Start Time：请求开始的时间；
- Request End Time：请求结束的时间；
- Response Start Time：返回开始的时间；
- Response End Time : 返回结束的时间；
- Duration : 总时间；
- Size:
- Request Header ：请求的头部大小；
- Response Header：返回的头部大小；
- Request : 请求发送的大小；
- Response：返回数据的大小；
- Total：所有数据大小；
- Request Compression : 请求压缩；
- Response Compression : 返回压缩；
- Request ： 查看请求内容（底下的Headers，Query String，Cookies，Raw。）
- Headers：发送请求的头部信息；
- Query String : 发送参数列表；
- Cookies： 浏览器缓存；
- Raw：发送的原生数据，包括了头部和参数；
- Reponse : 查看响应内容
- Headers：是返回的头部信息；
- Text：返回信息（除去头部）后的文本；
- Hex：返回信息的16进制表示；
- XML：我返回的数据是XML。如果你返回的是JSON，这里就会显示JSON；
- XML Text：如果你返回JSON，这里会显示JSON Text；
- Raw：返回的所有原生数据，包括头部；
- Summary: 查看发送数据的一些简要信息（主机，状态码，数据的类型，header和body大下，加载时间，总时间）
- Chart: Summary中简要信息以图表形式展示
- Notes: 其他信息
三、过滤网络请求
作用：快速筛选出 URL 中带指定关键字的网络请求。
- 方法一 ： 在界面中部的 Filter 输入框中输入需要过滤的关键字，即可快速筛选出相关网络请求。（临时性的包过滤)
- 方法二 ： Charles菜单栏 -> Proxy ->Recording Settings ->include。（经常性的包过滤)
- 方法三 ： 选中想过滤的网络请求，单击右键 -> 勾选Focus，然后在界面中 Filter输入框右侧的Foucssed选中。（临时性的包过滤)
四、设置映射（Map）
Map分 Map Remote 和 Map Local 两种。
- Map Local : 将指定的网络请求重定向到本地文件。
- Map Remote : 将指定的网络请求重定向到另一个网址请求地址。
1 . 设置本地映射（Map Local）
作用：把线上的静态资源映射到本地：这样当请求静态的html、js和css等资源的时候会使用本地的信息，方便调试并及时看效果。
1 . 设置本地映射
- 第一步： 选中某一条包数据，右键，选择最低端的 Map Local
- 第二步：修改 path 为
如： 【/yundai/*】 这样的地址，设置local path 为【E:\webstorm\yd_h5\debug\】 这样的本地路径；
表示所有的域名+/yundai/下面的目录都替换成，本地路径下的相对应的文件；
2 . 查看所有的本地映射
- Tools -> Map Local , 可以查看所有的本地映射配置。
- 在Overview的Nodes中查看。
2 . 设置远程映射（Map Remote）
1 . 设置远程映射
- 第一步： 选中某一条包数据，右键，选择最下面的 Map Remote
- 第二步：将请求映射到远端写好的接口。推荐一个生成接口的链接 Mocky：http://www.mocky.io/
如： 本地请求按 协议、主机、端口、路径和参数分别对应远程接口的相关字段，没有则不填；
2 . 查看所有的远程映射
- Tools -> Map Remote , 可以查看所有的本地映射配置。
- 在Overview的Nodes中查看。
3 .重发网络请求
- 选中某调请求，右键选则 “Repeat”重复发送一次该请求；
- 选中某调请求，右键选则 “Repeat Advanced…”设置请求次数（Iterations），重复间隔（Concurrency），重复发送多次该请求。
4 . 修改网络请求参数
1.选中一条请求，右键选择“Edit”，就可以编辑请求内容。
2.在编辑框中修改请求内容，“cancle”取消修改，“Revert”恢复原状，返回原来的状态，“Excute”执行修改的请求。
3.修改完成之后，点击“Excute”，执行修改的请求。
4.返回修改后的响应内容。
5 . 网络请求的截获并动态修改
- 方法一：本地映射
- Charles进行抓包
- 选择某一个网络请求 > 鼠标右键 Save Response…
- 如果该请求返回的是一个json串，保存文件时需要保存rename.json
- 需要更改的请求点击右键 Map Local.. 指定到本地保存的renam.json.
- 通过在本地更改rename.json就可以自动的更改请求的返回值。
- 方法二：打断点（Breakpoints）
- 选择某一个网络请求 > 鼠标右键 Breakpoints
- 然后点击 Execute 执行，然后编辑返回值。
- 缺点：容易请求超时。还没等你调整完返回数据，app那边已经请求超时了。
- 方法三：远端映射
- 将App内部的请求映射到远端写好的接口。推荐一个可以自己生成接口的链接： Mocky：http://www.mocky.io/。
- 方法四：rewrite（mac上支持，但在windows上有点问题，暂不支持该方法）
- 菜单栏 Tools —> Rewrite
- 根据自己的需求重写…。
- 推荐网址：
常见问题解决
1 . 手机无法抓包的问题
- 检查是否配置好代理IP,端口号
- 检查是否与电脑在同一个局域网
- 检查是否关闭防火墙，代理，软件
- 弹出询问点击“allow”或者“deny”时，误点“deny”，关闭charles重启，手机再次浏览则会重新弹出询问
2 . 解决request和response信息中的中文乱码问题。
- 方法一 ：修改charles windows版本安装目录下也有一个Charles.ini的配置文件
- 原配置文件
- 修改后的配置文件 增加vmarg.3参数，并设置编码格式为UTF-8
- 方法二 ： Tools -> Rewrite… -> Rules -> Add –>配置信息
- 选中 Request 和 Response
- Match
- Name : Content-Type
- Value : application/x-zip
- Replace
- Name : Content-Type
- Value : application/json;charset=UTF-8
- 选中 Replace All
–》点击OK，完成配置。
！！！通过以上方法就可以解决Request和Response的中文乱码问题了。
3 . 本地映射配置错了，删除错误的映射
- Tools -> Map Local… -> 选中需要删除的映射 -> Remove -> OK
注意：不抓包请关闭手机HTTP代理，否则断开与电脑连接后会连不上网