这两个工具的安装都比较简单，但是 Charles 在配置上会稍微复杂一些，毕竟要修改一些系统层面上的东西（不然没法抓包了）
Charles 是一个免费下载，但是使用收费的软件当然网上大量的..破解方案，详情咨询度老师和谷老师
官方网站：https://www.charlesproxy.com/
下载地址：https://www.charlesproxy.com/download/latest-release/
可能就是大量的会在证书配置这里卡壳，所以觉得 Charles 好麻烦，不想用；殊不知一次麻烦过后带来的是怎样的好处。
设置代理端口设置路径 Proxy -> Proxy Setting -> Proxies
安装成功以后，首先我们要设置代理所使用的端口号，一般来说都喜欢用8888
这个端口号是用来在远程设备上连接你本机时使用的。
同一个页面的其他几个选项卡，第一个是用来设置一些忽略的 IP、域名之类的，俗称的白名单。以及针对 MacOS 和 Firefox 的一些特殊选项。
设置路径 Proxy -> Proxy Setting -> SSL Proxying Settings
然后是设置 Charles 针对那些路径的请求去进行代理相关的操作，是一个可配置的表格。
图方便的话，可以直接写上:，前边是 IP、域名，后边是端口。*作为通配符可以匹配全部。
设置路径 Help -> SSL Proxying -> Install Charles Root Certificate
如果需要在本地进行一些抓包的操作的话，就需要在本地安装信任证书了
如果是 Mac，在安装完以后会自动跳转到钥匙串管理界面，右上角搜索 Charles 找到刚刚安装的证书。
将其所有的权限设置为始终信任即可。
至此，在电脑端的设置就已经结束了，接下来就是远程设备的设置了，也就是我们平时用的手机之类的。
首先，我们要保证两个设备处于同一个局域网下，然后设置手机设备上边的代理信息。
以 iOS 举例，设置路径为：
设置 -> 无线局域网 -> 点击当前连接的 Wi-Fi 右侧的感叹号图标 -> 滑动到底部找到 HTTP 代理，点击进入 -> 设置服务器为电脑端的 IP，端口为我们在上边设置的那个端口即可。
此时，Charles 应该会弹出一个弹框提示有新设备接入，是否允许，点击 Allow 即可。
但是，此时还没完，我们还需要安装证书到手机端才能够正常使用。
设置路径 Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser
点击后，电脑上会有一个弹框，按照其说明找到弹框中的一个 URL，在手机浏览器中输入即可（目前的版本是 chls.pro/ssl）。
P.S. 一定要保证手机是在连着本地代理的情况下去访问者个 URL
在 iOS 中会弹框提示你跳转到设置中安装描述文件，直接点击安装即可。
One more things，这个证书安装完以后，依然没有完成，我们还需要在 iOS 设备商进一步设置才能够使用。
此时我们看到的 https 的结果依然是错误的：
设置路径 设置 -> 通用 -> 关于本机 -> 证书信任设置（在最下边） -> 找到我们刚刚的 Charles，点击 checkbox 完全信任这个证书
现在就完成了在 iOS 上边的设置了，可以愉快的使用 Charles 进行抓包了。
在工作中，如果突然有一个页面出现了 bug，而且不能够在本地复现，此时怀疑问题出在 js 文件中。
可是这个文件是通过 webpack 之类的进行打包的，用 Charles 就可以很好的进行 debug。
我们可以使用 Map Local 来将某些网络资源替换为本地的资源，就像上边的，我们可以将线上压缩后的 js 文件替换为本地未压缩（或者添加了 debug 逻辑的 js 文件）来进行调试。
设置路径 Tools -> Map Local
比如我们将百度的首页替换为一个本地简单的页面。
此时再通过手机进行访问，得到的就是我们映射在本地的文件了。