前言#
之前和后端的工程师配合的时候，接口偶尔会出现接口问题导致数据显示失败，而前端断点调试也看不到什么有价值的信息，这个时候后端工程师发话了，“你抓个包给我看看”，搞得我一脸懵逼。
作为一个有理想有抱负的工程师，这么low 的场面一定要hold住。如果你也曾经遇到跟我一样的情况，希望你能看看这篇博客，相信对你能够有所帮助。
Charles 抓包工具#
因为我这的网从官方下载的速度很慢，所以是从其他网上下载的，http://xclient.info/s/charles.html，解压密码和打开dmg文件的密码都在网站上，破解的name和密码都在dmg文件里。
网站上的截图
前两部应该都没有什么问题，主要是第三步，这个序列码到底在哪用，经过我的寻找，其实是注册，注册成功就破解成功了。
注册成功后重启，你就会发现之前的试用期提示消失了。我这张图是已经注册成功了，所以在文字跟你会有差别，但是注册Registered你肯定认识。
配置Charles
首先需要在电脑中安装证书
安装成功后，需要在手机端安装证书
点击了选项之后会出现一个提示窗口
首先你的手机网络和电脑网络是在同一路由下，这样charles才能抓到手机的数据包，然后修改连接网络的ip地址为172.16.100.113， 端口号是8888， 然后打开浏览器 前往chls.pro/ssl 去下载证书并安装。（具体ip地址和端口号请参照实际情况）
这些完成之后你就可以在charles中看到电脑已经手机访问的网址了
因为大部分的数据因为编码问题或者是经过算法加密，所以看到乱码是非常正常的事情，但是这样已经证明我们抓包成功了。
Charles 拦截网络请求##
charles不仅能够进行抓包，还能够对发起的网络请求进行拦截和控制，例如在开发中，后端已经定义好了json的格式，但是并没有开发完成接口，利用charles前端工程师就可以自己完成模拟数据的返回。
首先选中要进行拦截的网址，邮件选择 Map Remote，打开了一个设置窗口
Map from 是选中的地址的信息，Map To 就是我们要设置的地址信息，这样设备访问选中的地址时，就会去访问我们设置的地址。但是这个地址从哪来呢，这个时候就必须要隆重介绍一下Mocky。
Mocky 模拟返回的数据#
Mocky 是一个在线工具网站，他帮助开发者模拟网络请求返回的数据信息，官方网址是 http://www.mocky.io/
这是mocky网站的截图，可以看到我们可以设置网络请求的状态码（200），返回的内容类型（json），内容的编码格式（utf-8）以及具体的内容，这里我简单的写了一个json串，点击蓝色按钮，稍微等待一会，在上面的有颜色背景区域就会出现生成的网络地址。
不实战一下有个卵用#
工具都已经掌握的差不多了，不实际操作一下是没什么卵用的，下面我们来完成访问 www.test.com （无效网址，不用在意）返回 http://www.mocky.io/v2/58a26f0c130000560b4e0767的数据。
首先确保手机和电脑在同一路由下，并且手机已经设置了正确的ip和端口，在charles已经看到了设备的网络请求记录。
我们先验证一下生成的网站是不是有效
完美，再查看charles中显示了什么
显示得到的是json数据也完全正确，有些同学可能会问，为什么有时候看到json相关的选项，这是跟刚才设置的内容格式有关（application/json），没有就说明返回的不是json数据，可能是你的设置有问题。
拦截www.test.com的网络请求，设置访问 http://www.mocky.io/v2/58a26f0c130000560b4e0767
手机打开浏览器输入网址 www.test.com
看起来没有问题，再查看一下charles中的情况
的确是访问了http://www.mocky.io/v2/58a26f0c130000560b4e0767 ，并返回了正确的数据。
小小实战非常顺利的完成了，如果你遇到了意外情况
如果charles没有显示手机的访问记录，请再次检查手机和电脑是否在同一路由，并且设置的ip地址和端口和提示完全相同
如果发现拦截没有起作用，先点击Tool -- Map Remote 查看是否已经启用了Map Remote。可以尝试关闭再打开，看看是否有效
总结#
我们已经掌握了charles抓包功能的基本使用，以及和Mocky配合来实现拦截并控制任意的网络请求，更多高深的用法还需要继续努力学习，作为一名前端开发，对后端有足够的了解是必备的，懂得这些对于我们团队适应能力有大的提高，求人不如求己，过于依赖其他人，终究会被淘汰。
如果有不正确的地方或者有问题欢迎留言指正，大家相互讨论学习进步，拜拜！
