对于前端日常工作中遇到的问题，我们可以通过抓包方式进行问题排查。尤其是当无法通过控制台进行查看或者无法查看接口的时候，一个好的抓包工具能节省很多处理问题的时间。目前使用比较多的应该就是Charles了，使用方便，配置起来也很简单。
但是今天本文并不是介绍如何使用，而是简单说下使用过程中遇到的问题及处理方式，毕竟关于配置使用网上教程已经很多了。话不多说，我们开始（本文主要针对mac，window原理同）：
一、抓包接口出现unknown，同时数据乱码
这个问题应该是遇到最多的了，主要从以下几个方面进行排查：
1。证书是否安装及证书是否被信任、是否过期
可以点击上图选项，如果没有安装证书会提示安装，如果已安装会跳转到系统证书窗口。可以搜索charles搜索出相关证书，查看是否已经过期，如果过期可以删掉证书，重新安装；是否已被信任，如果未被信任，可以双击进去修改设置。
2、检查sslproxy设置
如果证书没有问题，接下来就从配置上查看，通过Proxy--SSL Proxying Setting打开设置页面，检查是否勾选Enable SSL Proxying，勾选之后，点击include的add按钮，此处注意一定是include下的配置，如果添加了exclude那无论怎么修改都一直是unknown（别问我是怎么知道的😭）。点击add按钮后，在配置的host和port里都添加*即可，表示接受任何端口的请求。当然port也可以添加443或者其他，根据自身需要，添加完后保存即可。
通过上述方式排查，unknown的问题基本就能解决了。
二、代理本地开发localhost无法抓包
有时候我们本地开发可能会使用抓包去查看一些数据，但是发现无论是访问localhost还是127.0.0.1都无法成功抓包，可以采用下面两种方式：
1、使用 localhost.charlesproxy.com
这事charles官方给出的方法，将原本的localhost替换成localhost.charlesproxy.com，可以发现能够成功抓包。
2、通过修改host方式
既然无法通过ip地址方式获取数据，那么我们可以把本地的域名指向任意一个自定义的域名，然后去访问域名就可以成功抓取数据了。这里给大家一个好用的工具switchHosts，可以一键开启关闭host代理和修改。这里我们将127.0.0.1指向aa.test.com，然后直接去访问aa.test.com:3000/path（自己的项目路径）就可以了。
三、vue3+vite项目开启本地代理无限刷新
如果项目是通过vue3+vite开发的，在通过上述方式开启本地代理的时候，会发现页面一直反复刷新，即使成功打开了，还是会不断的刷新，如果发布到测试或者生产环境是没问题的。
这个问题产生是开发环境热更细问题导致：由于开启代理后，走的端口发布前端项目和框架本身的ws走的端口不一样，导致ws在请求服务器的时候提示连接失败，从而不停的刷新界面，请求服务器获取连接。
处理这个问题，可以在vite配置里添加hmr的一条配置即可，使其ws请求也走我们的代理地址就可以了，上代码：
server: {
host: '0.0.0.0',
port: 3000,
proxy: devProxy === 'true' ? {
'/api': {
target: 'https://test.value.com',
changeOrigin: true,
rewrite: path => path.replace('/api', '/')
}
} : {},
// 避免host代理之后热更新无限刷新
hmr: {
protocol: 'ws',
host: '127.0.0.1'
}
}
以上三条就是近期在使用charles过程中遇到的问题，问题不大，但是也花费一定时间进行了检查和处理，希望能够帮助有同样困惑的小伙伴。
