Charles在前端的使用心得
前言
charles是一个抓包软件，之前很少使用，最近学习了发现其在前端开发、调试工作中能起很大促进的作用，本文就Charles在前端的使用进行总结，希望可以给到没有使用过Charles等抓包工具的前端同学以启发。
这里不会讲Charles的安装、代理设置、HTTPS证书安装等，这些可以参考Charles使用教程。下面具体讲述一下Charles在前端平常开发、调试中的使用。
一、抓包
Charles的主要作用当然还是抓包，设置好代理，就能看到抓到的网络请求。
当然这个事情Chrome的Network也同样能够做到，所以这里就主要针对移动端和客户端。比如抓取手机京东的网络请求：
还有像我们安防的公司，经常回使用视频控件，我们只能看到后端传给我们获取流的URL，但具体传到客户端，有没有真正的取流播放，这个我们通过Charles抓包很方便的定位出哪里的问题，再也不用和后端、客户端“撕逼”了。
为了更加清楚的显示我们需要的抓包信息，我们可以使用Charles过滤功能，过滤可以使用两种办法。一个是代理设置中填写具体的域名或ip：
这种设置缺点是容易忘记设置过，后面不记得会发现不会抓取其他域名下的接口了，不推荐。另外一个是设置focus，这种方式在“Structure”模式下还是可以看到其他域名的接口，只是会更加清楚显示我们需要的抓包，“Sequence”模式下只显示当前接口的抓包。
二、修改网络请求
在前端开发中，我们对接接口前或者接口出现异常时，我们通常会通过postman进行接口测试，修改传参来调试接口或者反馈给后端。我们使用Charles也同样可以实现，Charles可以抓取到接口后进行断点，修改请求参数后再执行，测试不同传参的接口情况。
Charles的这个功能在线上出现问题可以很方便的定位出是否是接口问题，更有甚者可以针对一些有漏洞的网站修改其接口参数实现修改后台数据的作用，当然这个会不会导致一些法律问题就不知道了。这里也提醒我们在一些比较重要的接口开发一定要做好加密和后台校验工作，特别是后端同学，不要以为前端做了校验就没问题了，到时出现安全问题得背锅的。
三、替换线上文件
这一个功能主要针对线上直接调试的不方便，我们可以利用Charles的映射功能，实现线上文件和本地文件映射，修改本地文件，刷新浏览器，实现线上调试的功能。下面是具体的步骤：
- 抓包获取到需要替换的线上文件，保存该文件到本地。
- 选择Map Local，添加映射项。
- 修改本地文件，刷新浏览器查看修改效果。
备注：
如果找不到你想替换的文件，可以通过以下方式获取到地址
1
2
3
4
5
6
7
如何得到抓取想要的js、css等静态资源url:
1.页面css和js位置查看与地址copy：
Network - - - js或者css - - - 资源文件 - - - 右键选择copy - - - 选择copy link address
2.保存的html等静态资源文件可能是没有后缀的，自己重命名添加后缀即可
但目前这种方式只适合线上能直接显示源码的项目，比如jsp这种比较老的项目。现在很多项目都会使用webpack进行代码压缩，如果生产环境没有设置sourceMap或者禁止掉，现实情况一般是推荐生产环境禁止sourceMap，这样不会出现安全问题。
这种线上不显示源码或者没有sourceMap的项目调试目前最常用的还是本地起服务，代理到线上环境获取数据，这个在上一篇文章前端调试的正确姿势讲到过。
四、服务器压力测试
这个功能主要是利用Charles的Repeat功能对服务器进行并发访问来实现。步骤：选中某个网络请求 -> 右击 -> Repeat Advanced -> 在弹出的面板里面设置总共的迭代次数（Iterations）、并发数（Concurrency） -> 点击“OK” 。开始执行可以看到以设置的并发数的规模，进行总共达设置的总共迭代次数的访问。（专业的压力测试工具：Load Runner）
总结
Charles的功能远远不止这些，本文只是列出了一些对前端开发或调试起促进作用的功能，“工欲善其事，必先利其器” ，掌握了它，相信可以为你大大提高开发中调试网络的效率。
