1.为什么需要Charles?
混合app里面会嵌套网页,如果需要进行数据交互的页面。
针对页面有没前后端分离,我们分为2种情况。
1.如果没有进行前后端分离,前端只进行静态页面的编写,不负责数据的交互.
这时候可能存在的情况就是因为写的静态数据,可能样式方面是正确的格式,然后后台数据渲染之后,可能因为一些数据的问题,导致样式错乱了,这时候就会导致我们调试不方便。
2.如果进行了前后端分离,前端自己做数据交互方便的代码
这时候可能存在的情况就是我们没办法拿到后台接口返回的数据值,去分析数据值是否正确
大家一般在浏览器上面调试更多的会使用一些js断点,还有console方法之类的技巧,这些在浏览器调试的技巧,给我们定位错误,调试代码带来了很大的便捷性。
（注:）下面介绍的这款工具就是为了上述的2中情况遇到的问题。
2.什么是Charles?
1.Charles 是收费软件，可以免费试用 30 天。试用期过后，未付费的用户仍然可以继续使用，但是每次使用时间不能超过 30 分钟，并且启动时将会有 10 秒种的延时。因此，该付费方案对广大用户还是相当友好的，即使你长期不付费，也能使用完整的软件功能。只是当你需要长时间进行封包调试时，会因为 Charles 强制关闭而遇到影响。这点还是比较人性化的,符合中国的国情...
2.Charles 主要的功能包括：
- 截取 Http 和 Https 网络封包。
- 支持重发网络请求，方便后端调试。
- 支持修改网络请求参数。
- 支持网络请求的截获并动态修改。
- 支持模拟慢速网络。
3.安装 Charles
去 Charles 的官方网站下载最新版的 Charles 安装包，是一个 dmg 后缀的文件。打开后将 Charles 拖到 Application 目录下即完成安装。
4.如何使用Charles
(注:)下面到了重点咯
4.1 启动代理
之前提到，Charles 是通过将自己设置成代理服务器来完成封包截取的，所以使用 Charles 的第一步是将其设置成系统的代理服务器。
启动 Charles 后，第一次 Charles 会请求你给它设置系统代理的权限。你可以输入登录密码授予 Charles 该权限。你也可以忽略该请求，然后在需要将 Charles 设置成系统代理时，选择菜单中的 “Proxy” -> “Mac OS X Proxy” 来将 Charles 设置成系统代理。如下所示：
4.2 Charles 主界面介绍
4.3 Charles 主要提供两种查看封包的视图，分别名为 “Structure” 和 “Sequence”。
1.Structure 视图将网络请求按访问的域名分类。
2.Sequence 视图将网络请求按访问的时间排序。
大家可以根据具体的需要在这两种视图之前来回切换。请求多了有些时候会看不过来，Charles 提供了一个简单的 Filter 功能，可以输入关键字来快速筛选出 URL 中带指定关键字的网络请求。
对于某一个具体的网络请求，你可以查看其详细的请求内容和响应内容。如果请求内容是 POST 的表单，Charles 会自动帮你将表单进行分项显示。如果响应内容是 JSON 格式的，那么 Charles 可以自动帮你将 JSON 内容格式化，方便你查看。如果响应内容是图片，那么 Charles 可以显示出图片的预览。
4.4 截取 app上的网络封包
Charles 通常用来截取本地上的网络封包，但是当我们需要时，我们也可以用来截取其它设备上的网络请求。下面我就以 iPhone 为例，讲解如何进行相应操作。
Charles 上的设置
代理端口默认8888,如果不需要修改,可以忽略下面的步骤。
要截取 iPhone 上的网络请求，我们首先需要将 Charles 的代理功能打开。在 Charles 的菜单栏上选择 “Proxy”->”Proxy Settings”，填入代理端口 8888，并且勾上 “Enable transparent HTTP proxying” 就完成了在 Charles 上的设置。如下图所示:
iPhone 上的设置
首先我们需要获取电脑上的ip地址,我这边演示下mac上面获取ip地址的方式,打开设置->网络->如下图
在 iPhone 的 “ 设置 “->” 无线局域网 “ 中，可以看到当前连接的 wifi 名，通过点击右边的详情键，可以看到当前连接上的 wifi 的详细信息，包括 IP 地址，子网掩码等信息。
在其最底部有「HTTP 代理」一项，我们将其切换成手动，然后填上 Charles 运行所在的电脑的 IP，以及端口号 8888（注:就是刚刚设置的端口号,默认为8888），如下图所示：
4.5 Charles同意网络请求
设置好之后，我们打开 iPhone 上的任意需要网络通讯的程序，就可以看到 Charles 弹出 iPhone 请求连接的确认菜单（如下图所示），点击 “Allow” 即可完成设置。
(注:首次打开需要同意,后面好像就不需要了)
4.6查看抓包过来的数据
上面的一些环境都是一些介绍方面加上配置方面的,下面才到了本文的重点,就是如何解决上面提到的2个问题,扯淡结束,下面我们开始进入解决问题环节....
首先切换到Structure模式,打开如下图的监控:
然后清空一下页面,使用如下图的按钮:
问题1:静态页面是正确的,获取数据之后页面就错乱了
打开你需要调试的页面,先用按钮清空一下目前页面的数据,然后就会得到我们当前页面的信息,如下图:
我们获取到了我们当前页面所需要的js,css,image,还有html,然后选择保存下来,如下图:
右击,选择Save All,保存在本地,然后在本地用浏览器调试
问题2:调用后台接口,不清楚数据返回的结果,无法分析数据
同样的方法,获取到数据,格式如下:
对应4个接口的请求信息,选择一个打开,如下：
选择response,下面几种显示状态可以切换.
这样我们就拿到了我们请求的接口数据,就可以进行数据分析了
5.模拟慢速网络(非常实用)
在做移动开发的时候，我们常常需要模拟慢速网络或者高延迟的网络，以测试在移动网络下，应用的表现是否正常。Charles 对此需求提供了很好的支持。
在 Charles 的菜单上，选择 “Proxy”->”Throttle Setting” 项，在之后弹出的对话框中，我们可以勾选上 “Enable Throttling”，并且可以设置 Throttle Preset 的类型。如下图所示：
选择Enable Throttling 开启限流,然后选择想要的对应速度
6.总结
重要的事情说三遍
切记,调试完代码之后,一定要把手机wifi刚刚调试的手动换为关闭
切记,调试完代码之后,一定要把手机wifi刚刚调试的手动换为关闭
切记,调试完代码之后,一定要把手机wifi刚刚调试的手动换为关闭
介绍的Charles的内容比较简单,就是一些常用的功能,也是我在做项目的过程中遇到的一些问题。希望能够帮到大家。
这边有篇Charles比较全面的文章,如进行https抓包的方式,大家可以去看看Charles 从入门到精通
还有一篇介绍更多的抓包工具的文章,有兴趣的也可以去看看
如何在 Mac 下使用 Fiddler